Jquery mobile page ne peut pas remplir avec des données

Index.htmlJquery mobile page ne peut pas remplir avec des données

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
</head> 
<body> 

    <div data-role="page" id="reviewsPage"> 
     <div data-role="header"> 
      <h1>Reviews</h1> 
      <a href="twitter.html" id="twitterBtn" class="ui-btn-right" 
      >TWEET</a> 
     </div> 

    </div> 
    <script type="text/javascript"> 
     $(document).on("pageinit", "#reviewsPage", function(event) { 
      $("#twitterBtn").bind("click", function(e) { 
       $.mobile.showPageLoadingMsg(); 

       $.mobile.loadPage("twitter.html", { 
        reloadPage :false 
       }); 

      }); 
     }); 

    </script> 

</body>

ci-dessus montre mon fichier index.html qui charge le fichier twitter.html.

twitter.html

<div data-role="page" id="twitterPage"> 

    <div data-role="content"> 
    <ul id="tweet-list" data-role="listview" data-inset="true"> 
     <li data-role="list-divider"> 
      <p> 
       Tweets 
      </p> 
     </li> 
    </ul> 
</div>

 <script type="text/javascript"> 
     $("#twitterPage").live("pagebeforecreate", function(){{ 
     alert("shdgs"); 
     $.ajax({ 
     url : " searchresult.php", 
     success : function(data) { 
      alert("dsds"); 
      var markup = ""; 
      $.each(data, function(i, elem) { 
       var $template = $('<div><li><img class="ui-li-icon profile"><p class="from"></p><p class="tweet"></p></li></div>'); 
       $template.find(".from").append(elem['a']); 
       //$template.find(".tweet").append(result.text); 
       //$template.find(".profile").attr("src", result.profile_image_url); 
       markup += $template.html(); 

      }); 
      $("#tweet-list").append(markup).listview("refresh", true); 

      $.mobile.changePage($("#twitterPage")); 
     }, 

     error : function(request, error) { 
      // This callback function will trigger on unsuccessful action 
      alert(error); 
     } 
    }); 

});

Lorsque le code html index appelle l'écran twitter.html file.The sera remplacé par twiter.html w fichier sans data.But si je cours twitter.html directement les données seront peuplées.

Source

2013-10-17 user2889058

Veuillez remplacer ce '$ (" #twitterPage ") .live (" pagebeforecreate ", function() {{' avec '$ (document) .on ('pagebeforeshow', '#twi tterPage ', function() {{' – SathishKumar

ne fonctionne toujours pas.je ai essayé dans google chrome – user2889058

Je pense que le problème est que vous utilisez' href = twitter.html' pour migrer vers la page de twitter. Vous ne changez pas vraiment la page car JQM exige. Par conséquent 'pagebeforecreate' n'est pas appelé. –

Gardez le body du fichier HTML:

<div data-role="page" id="reviewsPage"> 
    <div data-role="header"> 
     <h1>Reviews</h1> 
     <a id="twitterBtn" class="ui-btn-right">TWEET</a> 
    </div> 
</div> 
<div data-role="page" id="twitterPage"> 
    <div data-role="content"> 
     <ul id="tweet-list" data-role="listview" data-inset="true"> 
      <li data-role="list-divider"> 
       <p>Tweets</p> 
      </li> 
     </ul> 
    </div> 
</div>

Dans le code javascipt changement loadPage-changePage (mettre le code à deux js dans la même fichier):

$("#twitterBtn").bind("click", function (e) { 
    $.mobile.showPageLoadingMsg(); 

    $.mobile.changePage("#twitterPage", { 
     reloadPage: false 
    }); 

});

Voir cette version de travail: http://jsfiddle.net/NrCGb/272/

Source

2013-10-17 06:51:47

votre exemple fonctionne très bien.Mais quand les données sont chargées à la page suivante et montrent sur la liste et disparaissent – user2889058

je don Ne comprenez pas ce que vous voulez dire. –

Doit être une erreur stupide que vous faites. Je ne peux pas dire pourquoi cela se produit, dépend de votre nouveau code. Ne se produit pas dans mon cas: http://jsfiddle.net/NrCGb/273/ –

Jquery mobile page ne peut pas remplir avec des données

Répondre

Questions connexes