CODEWITHSUNDEEP
javascriptjquerylistviewmobilejquery-mobile
psergiocf
psergiocf

Reputation: 1617

Refresh listview with jQuery mobile version 1.0rc3

I'm developing a tablet application with the jquery.mobile-1.0rc3 version. Previoulsy, I used the jquery.mobile-1.0a4.1 version on another application, and it was possible to refresh a listview by doing myListview.listview( "refresh" ).

I'm having some problems doing the same with the new jquery.mobile-1.0rc3 version. Is it possible to do that with the new jquery.mobile-1.0rc3 version?

Thank you very much.

Here's a bit of the code:

var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

lists.empty();

/* Fill the lists with jquery template */

lists.listview( "refresh" );

Error:

uncaught exception: cannot call methods on listview prior to initialization; attempted to call method 'refresh'

Upvotes: 2

Views: 1161

Answers (1)

Jasper
Jasper

Reputation: 76003

Depending on when your code runs it may be running before the jQuery Mobile initialization process. jsFiddle by default runs code after the load event fires so the DOM is all setup and jQuery Mobile has done its initialization. If you change @Phill Pafford's jsFiddle (http://jsfiddle.net/qSmJq/3/) to run on "no wrap (body)" rather than "onLoad" then you get the same error you are reporting. So I recommend either removing the lists.listview('refresh'); line or putting your code inside either a document.ready or a pageshow/pagecreate event handler:

var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

lists.empty();

/* Fill the lists with jquery template */

//lists.listview( "refresh" );

Here's a jsfiddle for running the code as soon as it is parsed by the browser: http://jsfiddle.net/jasper/qSmJq/5/

Or:

$(function () {
    var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

    lists.empty();

    /* Fill the lists with jquery template */

    lists.listview( "refresh" );
}

Here is a jsfiddle for wrapping your code in a document.ready event handler: http://jsfiddle.net/jasper/qSmJq/4/

Or:

$('#my-page-id').on('pagecreate', function () {
    var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

    lists.empty();

    /* Fill the lists with jquery template */

    //lists.listview( "refresh" );
}

Here is a jsfiddle for using the pageshow event: http://jsfiddle.net/jasper/qSmJq/6/

And here is a jsfiddle for using the pagecreate event: http://jsfiddle.net/jasper/qSmJq/7/

On a side note: if you want to detect whether or not jQuery Mobile has initialized a certain element you can check for the jQuery Mobile specific classes on the element:

$(function () {

    //cache lists
    var lists = $( '#posicaoIntegradaActivosList, #posicaoIntegradaPassivosList, #posicaoIntegradaOutrosList' );

    //iterate through the lists
    lists.each(function (index, value) {

        //cache this specific list
        var $value = $(value);

        /*add rows to this listview here*/

        //check if the listview has been initialized by jQuery Mobile by checking for the existence of the `ui-listview` class
        if ($value.hasClass('ui-listview')) {

            //since the class was found, refresh the already initialized element
            $value.listview('refresh');
        } else {

            //the class was not found, so initialize the widget
            $value.trigger('create');
        }
    });
});

Upvotes: 3

Related Questions