Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile and ajax on load
    text
    copied!<p>Well I´ve been breaking my head with this problem for some time, I´ve tried tons of solutions online yet none of them work.</p> <p>What I need is to feed data from a json to a listview on page load and present it yet it only works on index after that I need to reload every page so I can see the listview.</p> <p>Here´s my jquery code:</p> <pre><code>$(document).bind("mobileinit", function () { $.mobile.ajaxEnabled = false; }); $(document).bind('pageinit',function() { DrawPageContent(); }); function DrawPageContent() { $.ajax({ dataType: "json", url: "js/categorias.json", success: function(msg){ console.log(msg.categorias[1].nombre); var categos = ''; for(var i=0;i&lt;msg.categorias.length;i++){ categos += '&lt;li&gt;&lt;a href="refrescos.html?id='+ 0 +'"&gt;&lt;img src="' + msg.categorias[i].logo + '"&gt;&lt;h2&gt;'+msg.categorias[i].nombre + '&lt;/h2&gt;&lt;p&gt;' + msg.categorias[i].desc + '&lt;/p&gt;&lt;/a&gt;&lt;/li&gt; '; } $("#categorias").html(categos); $("#categorias").listview("refresh"); //$("#page").trigger("pagecreate"); } });} </code></pre> <p>I've also tried $(document).ready() and some other things.</p> <p>Here's the HTML for that part:</p> <pre><code>&lt;div id="page" data-role="page"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;Categorias&lt;/h1&gt; &lt;a href="#popupOpciones" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="gear" data-theme="b" data-transition="pop"&gt;Opciones&lt;/a&gt; &lt;/div&gt; &lt;div data-role="content"&gt; &lt;ul id="categorias" data-role="listview" data-inset="true"&gt; &lt;/ul&gt; </code></pre> <p>Any ideas how to fix this?</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload