Question

Creating app with jQuery Mobile, I want a page to load data from a server, I’m building the list items in PHP when I load for various reasons.

So when I load a page for the first time everything goes smoothly, if I load it again the data reinserts but the markup doesn’t enhance.

There are several threads on SO adress this EXACT issue, however the accepted answer is always use .trigger(‘create’). This I have done but I’ve had no success, I’ve tried using .listview(‘refresh’), .trigger(‘updatelayout’), I’ve tried triggering these events on the page, the class for the page, the listview div, putting it in the complete: of my ajax call but nothing. So I’ve resorted to asking you community:

I’m using jQM 1.1.1: Have I missed something if you require more Info I’ll happily provide:

Here is my front page

<div data-role="page" id="frontPage">
    <div data-role="header" data-theme="e" data-id="commonHead" data-position="fixed">
        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext"></a>
        <h1>
            myApp
        </h1>
    </div>
    <div data-role="content" class="content">
        <ul data-role="listview">
            <li><a href="#" onClick="viewfList()">List</a></li>
        </ul>
    </div>
</div>

Here is the page to which I naviagate to:

<div data-role="page" id="fView">
    <div class="commonHeader"></div>
    <div data-role="content">
        <ul data-role="listview" id="fList">

        </ul>
    </div>
</div>

and here is the viewfList function I use to call the page

function viewFeatList(){
    jQuery.ajax({ //getting my new <li>
            url: 'http://sources.mysource.com/get_list.php',
            type: 'POST',
            //data: myData,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, textStatus, jqXHR){     
                $('#fList').empty(); //emptying the listview                
                for (i=0;i<data.f.length;i++){
                    $('#fList').append(data.f[i]); //appending the <li>
                    }
                $('#fList').trigger('create'); //this version's attempt to re-enhance markup
                $.mobile.changePage('#fView');   //navigate to page                         

                },
            error:  function(jqXHR, textStatus, errorThrown){
                myAlert('There was an error submitting your request')
                }
            });

    }

Answer 1

Ok thanks to inspiration from the comments, and overcoming my own negligence due to frustration I’ve found a solution:

Here is my new function

function viewfList(){
    jQuery.ajax({
            url: 'http://sources.mysource.com/get_list.php',
            type: 'POST',
            //data: myData,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, textStatus, jqXHR){     
                $('#fList').empty();;               
                for (i=0;i<data.f.length;i++){
                    $('#fList').append(data.f[i]);
                    }

                $.mobile.changePage('#fView');  
                $('#fList').listview('refresh');                                            
                },
            error:  function(jqXHR, textStatus, errorThrown){
                myAlert('There was an error submitting your request')
                }
            });

    }

Turns out .listview(‘refresh’) did work and it did indeed throw out an error in the Javascript console according to CrimsonChin‘s suggestions however I was executing these on the page not the actual listview element. When I did execute it on the listview element I got this error:

Uncaught cannot call methods on listview prior to initialization;
attempted to call method ‘refresh’

Which led me, obviously, to call the refresh after the page had been changed to.

My only concern with this is: if there is alot to do on the page one day, is it possible I’ll see un-enhanced markup flash on the screen for a split second before it changes…this doesn’t happen now but i’m running a very basic page for the time being.

Thanks for your help.