JQuery mobile listview update from json file

Question

Après avoir passé les derniers jours à essayer de trouver une solution, je demande maintenant de l'aide pour comprendre quelle est/sont la/les erreur(s) de mon code. A partir du fichier Json externe suivant listviewJsonData.json

var itemList = [{"title":"Title_1","description":"Blah blah1"},{"title":"Title_2","description":"Blah blah2"}];

Je mets à jour une listview à l'aide du code suivant :

<div id="dataList">
     <ul data-role="listview" data-inset="true">
        <script type="text/javascript">
            var serviceURL = "https://.../.../listviewJsonData.json";
            var outputitem = '';
            $.getJSON(serviceURL,function(data) {
                $.each(data, function(index,item) {
                        outputitem += '<li><h4>'+ item[index].title +'</h4></li>';
                        $('#dataList').append(outputitem);
                    }
                    $('#dataList').listview('refresh');
            }); 
        </script>
     </ul>
</div>

Ce code ne me permet pas d'obtenir une mise à jour et la liste reste vide, J'ai également vérifié ceci poste mais je n'ai pas trouvé de solution à mon problème.

Quelqu'un peut-il m'aider ? Merci beaucoup

Answer 1

Votre script est en ligne et peut se déclencher avant que jQuery Mobile ne charge ou n'améliore votre balisage. Essayez d'invoquer votre script en le lançant dans le cadre de votre événement pageinit.

http://jquerymobile.com/demos/1.2.0/docs/api/events.html

$( '#aboutPage' ).live( 'pageinit',function(event){
  enhanceMyDataList();
});

De plus, vous ajoutez <li> des éléments dans un conteneur <div> et non votre <ul> . Déplacer/combiner vos id attribut.

<ul id="dataList" data-role="listview" data-inset="true">

Answer 2

Essayez ceci :

<div>
  <ul id="dataList" data-role="listview" data-inset="true">
  </ul>
  <script type="text/javascript">
     var serviceURL = "https://.../.../listviewJsonData.json";
     $.getJSON(serviceURL,function(data) {
       $.each(data, function(index,item) {
         $('#dataList').append('<li><h4>'+ item.title +'</h4></li>');
       });
       $('#dataList').listview('refresh');
     });
  </script>
</div>

EDITAR: J'ai changé le div id en ul et une erreur de syntaxe sur script.