web-dev-qa-db-fra.com

Actualiser une section après avoir ajouté du HTML dynamiquement à jquery mobile

Duplicata possible:
Ajout dynamique d'éléments pliables

J'ai vu quelques articles à ce sujet, mais aucun d'entre eux ne semble vraiment s'appliquer, ou je pourrais simplement le lire mal. J'ai du HTML qui me vient d'un serveur que je ne peux pas vraiment changer. Ce que je veux faire, c'est saisir ce HTML, l'insérer dans un élément div et demander à jQuery mobile de faire son style dessus. J'ai potentiellement besoin de le faire plusieurs fois, et c'est là que la douleur se produit.

Quand je l'insère la 1ère fois, tout va bien, jqm reprend l'ajout et le stylise parfaitement. Si j'essaye une deuxième fois, jqm ne le prend pas du tout. J'ai essayé de créer un "modèle" que je copie et modifie ou j'insère simplement du HTML statique et aucun des deux ne fonctionne.

J'ai un cas de test ci-dessous, comme vous le verrez, cliquez une fois sur Ajouter une nouvelle liste, et ça va, cliquez à nouveau dessus et vous obtenez une sélection sans style. J'ai lu quelque part que l'utilisation de l'événement en direct peut fonctionner, mais cela ne fonctionne pas non plus dans ce cas.

En outre, je connais la méthode selectmenu select list dans jQuery mobile, mais l'élément que je récupère peut être des listes de sélection simples/multiples, un tas de boutons radio ou même un ensemble de champs de texte gratuits. Comme vous pouvez le voir, j'ai également essayé d'exécuter la méthode de la page sur l'élément le plus haut, j'ai également essayé d'exécuter la page sur l'élément que je suis sur le point d'ajouter, en vain. :(

Tester:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
    <title>List insert test</title> 
    <meta http-equiv="Pragma" content="no-cache" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <!-- include jQuery -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
    <!-- include jQuery Mobile Framework -->
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.css" />
</head> 
<body>
    <div data-role="page" data-theme="b" id="Dashboard">

        <button id='addlist'>add new list</button>
        <button id='addips'>add templated list</button>
        <button id='clearall'>clear</button>
        <div id='theplace'></div>
        <div id='newtemp'>
            <select id='thelisttemplate'>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div id="thelist">
            jkghjkgh
        </div>
    </div>
</body>

<script type="text/javascript">
    $('#addips').live('click', (function() {
        l = $('#thelisttemplate').clone()
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

    }))

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('')
        $('#thelist').append($(l))
        $('#thelist').page()

        //$('#theplace').after($("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>"))
        //$('#thelisttemplate').page()
    })

    $('#clearall').click(function() {
        $('#thelist').html('')
    })
</script>

</html>

Mise à jour: En utilisant la réponse de naugur ci-dessous, la fonction d'ajout de nouvelle liste ressemblerait à ...

    $('#addlist').click(function() {
        l = $("<select id='thelisttemplate'><option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option></select>")
        $('#thelist').html('<div data-role="collapsible-set" id="newstuff"></div>');
        $("#newstuff").html(l).page();            
    })

Mise à jour # 2: Apparemment, cela est désormais obsolète, voir ci-dessous pour quelques idées sur la façon de corriger la bêta2.

javascriptjqueryjquery-mobile
26
dochead

mise à jour

Depuis jquery mobile beta2, vous déclenchez un événement - .trigger('create')

FAQ mise à jour: http://demos.jquerymobile.com/1.3.2/faq/injected-content-is-not-enhanced.html

Ceci est déconseillé:

utilisez la fonction .page().

Je suggère:

  1. videz le div que vous remplissez
  2. créer un nouveau div à l'intérieur
  3. remplir le nouveau div
  4. appeler .page() sur ce nouveau div
30
naugtur

J'ai lutté avec celui-ci pendant des heures et rien ne fonctionnait. J'ai des menus de sélection en cascade qui étaient remplis via un appel ajax lorsqu'une option a été sélectionnée dans un autre menu. Le DOM était en cours de mise à jour, mais jQM a refusé de reconnaître les options nouvellement ajoutées.

Ce qui a finalement fonctionné (et il était basé sur une intuition - je ne l'ai trouvé nulle part):

$('#controlName').selectmenu('refresh');

J'utilise JQM 1.0 RC2.

4
csigrist