web-dev-qa-db-fra.com

Jquery Mobile: Forcer l'actualisation du contenu

J'ai un gros problème: j'ai un listview et chaque élément renvoie à la page #concorsi. Lorsque je clique sur un lien, l'URL devient #concorsi?numero=1 Car je récupère le formulaire numéro 1 dans un JSON.

Quand je clique la première fois, tout va bien. Chaque entrée est visualisée avec les classes jQuery Mobile mais si je reviens et après je vais dans le même lien, le code ne se rafraîchit pas. L'en-tête est bien visualisé mais le contenu non. Comment forcer le rafraîchissement du contenu div?

Ce sont mes fonctions JavaScript:

<script type="text/javascript">
$(document).bind( "pagebeforechange", function( e, data ) {
    // We only want to handle changePage() calls where the caller is
    // asking us to load a page by URL.

    if ( typeof data.toPage === "string" ) {
        // We are being asked to load a page by URL, but we only
        // want to handle URLs that request the data for a specific

        var u = $.mobile.path.parseUrl( data.toPage ),
            re = /^#concorso/;
        if ( u.hash.search(re) !== -1 ) {
            // We're being asked to display the items for a specific category.
            // Call our internal method that builds the content for the category
            // on the fly based on our in-memory category data structure.
            showConcorso( u, data.options);
            // Make sure to tell changePage() we've handled this call so it doesn't
            // have to do anything.
            e.preventDefault(); 
        }
    }
});
</script>

Et showConcorso() L

function showConcorso( urlObj, options )
{
    document.getElementById('conccont').innerHTML="";
    var concorsoNum = urlObj.hash.replace( /.*numero=/, "" ),

        // Get the object that represents the category we
        // are interested in. Note, that at this point we could
        // instead fire off an ajax request to fetch the data, but
        // for the purposes of this sample, it's already in memory.
        concorso = obj.concorsi[ concorsoNum ],

        // The pages we use to display our content are already in
        // the DOM. The id of the page we are going to write our
        // content into is specified in the hash before the '?'.
        pageSelector = urlObj.hash.replace( /\?.*$/, "" );

    if ( concorso ) {
        // Get the page we are going to dump our content into.
        var $page = $( pageSelector ),

            // Get the header for the page.
            $header = $page.children( ":jqmData(role=header)" ),

            // Get the content area element for the page.
            $content = $page.children( ":jqmData(role=content)" ),
            $footer = $page.children( ":jqmData(role=footer)" );



        // Find the h1 element in our header and inject the name of
        // the category into it.
        $header.find( "h1" ).html(concorso['title']);

        markup=document.createElement('form');
        markup.setAttribute('action','#home');
        markup.setAttribute('method','POST');
        markup.id="concForm";
        markup.onchange="alert (test)";
        items=obj.concorsi[concorsoNum].elementi;

        for(field in items) {
            nest=items[field];
            nest=obj.campi[nest];
            switch(nest.type){
                case "free": markup.appendChild(createFree(nest));
                            break;
                case "text": markup.appendChild(createText(nest));
                            break;
                case "textarea": markup.appendChild(createTextArea(nest));
                            break;
                case "switch": markup.appendChild(createSwitch(nest));
                            break;
                case "switchcust": markup.appendChild(createSwitchCustom(nest));
                            break;
                case "slider": markup.appendChild(createSlider(nest));
                            break;
                case "select": markup.appendChild(createSelect(nest));
                            break;
                case "checkbox": markup.appendChild(createCheckbox(nest));
                            break;
                case "radio": markup.appendChild(createRadio(nest));
                            break;
                case "reset": markup.appendChild(createButton(nest));
                            break;
                case "submit": markup.appendChild(createButton(nest));
                            break;
            }
        }

        // Inject the category items markup into the content element.
        $content.html( markup );

        // Pages are lazily enhanced. We call page() on the page
        // element to make sure it is always enhanced before we
        // attempt to enhance the listview markup we just injected.
        // Subsequent calls to page() are ignored since a page/widget
        // can only be enhanced once.

        $page.page();


        // We don't want the data-url of the page we just modified
        // to be the url that shows up in the browser's location field,
        // so set the dataUrl option to the URL for the category
        // we just loaded.
        options.dataUrl = urlObj.href;

        // Now call changePage() and tell it to switch to
        // the page we just modified.
        $.mobile.changePage( $page, options );
    }
}
jqueryjquery-mobile
23
Oniz

Pour actualiser l'utilisateur de la page:

.trigger('create');

Plus ici:

Créer vs rafraîchir: une distinction importante
Notez qu'il existe une différence importante entre l'événement create et la méthode refresh que certains widgets possèdent. L'événement create est adapté pour améliorer le balisage brut qui contient un ou plusieurs widgets. La méthode d'actualisation doit être utilisée sur les widgets existants (déjà améliorés) qui ont été manipulés par programme et dont l'interface utilisateur doit être mise à jour pour correspondre.

Par exemple, si vous aviez une page où vous avez ajouté dynamiquement une nouvelle liste non ordonnée avec l'attribut data-role = listview après la création de la page, le déclenchement de la création sur un élément parent de cette liste la transformerait en un widget de style listview. Si plus d'éléments de liste étaient ajoutés par programme, l'appel de la méthode d'actualisation de listview mettrait à jour uniquement ces nouveaux éléments de liste à l'état amélioré et laisserait les éléments de liste existants intacts.

Vous pouvez également actualiser la vue de liste comme ceci:

$('#mylist').listview('refresh');

Plus ici:

Mise à jour des listes
Si vous ajoutez des éléments à une vue de liste, vous devrez appeler la méthode refresh () pour mettre à jour les styles et créer les listes imbriquées ajoutées. Par exemple:

$('#mylist').listview('refresh');

Notez que la méthode refresh () affecte uniquement les nouveaux nœuds ajoutés à une liste. Cette opération est effectuée pour des raisons de performances. Tout élément de liste déjà amélioré sera ignoré par le processus d'actualisation. Cela signifie que si vous modifiez le contenu ou les attributs d'un élément de liste déjà amélioré, ceux-ci ne seront pas reflétés. Si vous souhaitez qu'un élément de liste soit mis à jour, remplacez-le par un nouveau balisage avant d'appeler Actualiser.

Éléments de formulaire rafraîchissants:

Éléments de formulaire actualisés
Dans jQuery Mobile, certains contrôles de formulaire améliorés sont simplement stylisés (entrées), mais d'autres sont des contrôles personnalisés (sélections, curseurs) construits à partir du contrôle natif et maintenus en synchronisation avec celui-ci. Pour mettre à jour par programme un contrôle de formulaire avec JavaScript, commencez par manipuler le contrôle natif, puis utilisez la méthode d'actualisation pour indiquer au contrôle amélioré de se mettre à jour pour correspondre au nouvel état. Voici quelques exemples de mise à jour des contrôles de formulaire courants, puis appelez la méthode d'actualisation:

Cases à cocher:

$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");

Radios:

$("input[type='radio']").prop("checked",true).checkboxradio("refresh");

Sélectionne:

var myselect = $("#selectfoo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");

Curseurs:

$("input[type='range']").val(60).slider("refresh");

Interrupteurs à bascule (ils utilisent un curseur):

var myswitch = $("#selectbar");
myswitch[0].selectedIndex = 1;
myswitch.slider("refresh");

Pliant:

$('div[data-role=collapsible]').collapsible();
56
Phill Pafford