L’actualisation de la liste de diffusion jquery mobile après un appel ajax dans la fonction complète ne fonctionne pas.

Je développe une application utilisant jQuery 1.3.1 et phonegap 2.9.0.

Toutes les données sont chargées dynamicment depuis le serveur en utilisant php. Mon problème est que l’appel d’actualisation ne fonctionne pas à chaque fois que les éléments listview changent. J’ai essayé et cherché beaucoup sans succès pour le moment. Ce que je pense, c’est que la fonction d’actualisation est appelée avant la fin de la liste, mais j’essaie de mettre cette ligne de code partout où cela ne fonctionne pas.

De l’aide?

voici ma listview

    voici comment je fais appel thaax au serveur

     $.ajax({url: JsonURL beforeSend: function(){ $.mobile.showPageLoadingMsg('b', 'Updating content...', true); }, complete: function () { console.log("refreshing.."); $('#listview1').listview('refresh'); $('#listview2').listview('refresh'); $('#listview3').listview('refresh'); $.mobile.hidePageLoadingMsg(); }, contentType: "application/json; charset=utf-8", dataType: "json", async: true, success: function (result) { data = result; app.setupdevice(); $.mobile.changePage('#home', {transition: 'slide'}); }, error: function (request, error) { console.log(error.message); } }); 

    et voici comment je crée la listview. Ce code s’exécute chaque fois que les éléments de la liste changent pour mettre à jour la liste avec les nouveaux éléments.

    Dans la fonction success , j’appelle setupdevice qui initialise les listes comme indiqué ci-dessous. Ensuite, dans la fonction complète, j’actualise la listview. Pour quelque raison que ce soit rafraîchissant seulement la première fois.

     items=''; $.each(data.pois, function() { items += '
  • '+this.name+'

    call
  • '; }); $('#listview1').html(items);

    C’est la première fois que j’atteins ce problème et je suis vraiment ennuyé car je ne trouve pas pourquoi cela se produit.

    L’actualisation de la vue liste doit être exécutée après le remplissage de l’élément ul, procédez comme suit:

     items=''; $.each(data.pois, function() { items += '
  • '+this.name+'

    call
  • '; }); $('#listview1').html(items); $('#listview1').listview('refresh');

    De cette façon, vous pouvez être sûr que la liste de diffusion ne sera actualisée que lorsque le contenu aura été ajouté.

    MODIFIER :

    Le problème mentionné dans le commentaire peut être résolu comme ceci:

     items=''; $.each(data.pois, function() { items += '
  • '+this.name+'

    call
  • '; }); $('#listview1').html(items); $('#listview1').listview().listview('refresh');

    Le premier appel de listview initialisera le widget et un second l’actualisera.

    Vous devez attendre que la vue liste soit complètement créée. Tiré de l’exemple de @ gajotres:

     items=''; $.each(data.pois, function() { items += '
  • '+this.name+'

    call
  • '; }); $('#listview1').html(items).promise().done(function () { $(this).attr("data-role", "list view").listview().listview('refresh'); });

    Vous pouvez faire l’actualisation en attendant la méthode de promise .

    J’ai récemment eu presque le même genre de problème, résolu comme ceci:

     $.each(data.itemList, function(index, item) { console.log('index: ' + index); html += '
  • ' + item.SI_REGNBR + '

    Name: ' + item.SI_NAME_EN + '

    Type: ' + item.SI_TYPE + '

  • '; }); $('#dataView').empty(); $('#dataView').append($(html)); $('#dataView').sortinggger('create'); $('#dataView').listview('refresh'); $('#dataView ul').listview('refresh');

    Ce fut le success: partie de l’appel $.ajax . Le HTML ressemblait à ceci:

     

      J’espère que ça aide.