Uncaught Error: cannot call methods on prior to initialization, attempted to call method refresh

Written by on April 1, 2015

Uncaught Error: cannot call methods on prior to initialization, attempted to call method refresh

This is probably most commonly found error when working with jQuery Mobile. It can come in several different flavors and each one depends on a used widget.

In a nutshell, there are some moments when we need to generate and append dynamic content to our jQuery Mobile page. Usually, this is not a problem, but there’s a big catch with jQuery Mobile. It wrap’s HTML content with its own HTML/CSS structures so when we dynamically add content it doesn’t look like a content enhanced by jQuery Mobile.

This can be easily solved, every jQuery Mobile widget has a function that can refresh / enhance newly added content. But, there’s always but, this function is also expecting this element to be initialized prior to enhancement process.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

So let’s say we have a jQuery Mobile page, that looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>
            
            <div data-role="content">
                
            </div>
        </div>    
    </body>
</html>   

and we would like to add dynamically created listview, we would do something like this, at least this is what an official documentation is saying to do:

$(document).on('pagebeforeshow', '#index', function(){ 
    $('<ul>').attr({'data-role':'listview','id':'dynamic-listview'}).html('<li>Listview element</li>').appendTo('.content');
    $('#dynamic-listview').listview('refresh');
});

Well, this solution will not work because an error will be thrown:

[quote]Error: Error: cannot call methods on listview prior to initialization; attempted to call method ‘refresh'[/quote]

This error is referencing to a listview, but same problem can occur on a button, select … and many more other widgets. Luckily same error
is also offering us a solution. In this case a listview needs to be initialized before it can be enhanced/refreshed. This can be done easily,
just call same widget method only this case without parameter ‘refresh’.

Our final solution would look like this:

$(document).on('pagebeforeshow', '#index', function(){ 
    $('<ul>').attr({'data-role':'listview','id':'dynamic-listview'}).html('<li>Listview element</li>').appendTo('.content');
    $('#dynamic-listview').listview().listview('refresh');
});

As you can see a function called listview has been called twice, first without parameter and second time with a parameter refresh.

And here’s a working jsFiddle example: http://jsfiddle.net/Gajotres/4sPr7/

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.



Categories

15 thoughts on “Uncaught Error: cannot call methods on prior to initialization, attempted to call method refresh”

  1. Hi, nice text, almost worked for me, I was looking a way to ‘enhance’ a columntoggle table after a Ajax return. So to code was:

    $.post(“somepage.html”, args, function(cRetorno){
    $(“#divContent”).html(cRetorno);
    $(“table#table-grid”)
    .trigger(“create”)
    .table().table(“refresh”);
    });

    But now the column toogle option don´t work so well, some columns can be hidden and others don´t. Any hint?

  2. Hi Gajotres,

    Thanks for the article.

    I’m trying to make it work in a page with various section tags with data-role=page. I have listviews in pages that are now show when the page is loaded. When I click button to go to the page, it doesn’t update the listview, but if I go to another page and from there call the function that updates the listview, it works. Is there a way to populate all the listviews when the page is loaded? Remember the listviews are not in the initial page shown.

    Thanks for your attention.

    Regards,
    Helio

  3. Sorry for a late response, I was having a rather long vacation.

    Table is rather new jQuery Mobile widget so there’s a good chance this is a bug. First browse through jQuery Mobile table error tickets on their Github repository. In case you can’t find it then post you question at Stackoverflow jQuery Mobile group and I will find you an answer.

  4. I wish this showed up higher in search results. Most of the things that I found before this didn’t help my problem at all. My problem wasn’t JQuery Mobile and what I had was initialized. The error was just masking the real problem and this got rid of that to see that a bad path was the real culprit in a .load() call.

  5. Is this possible to use bootstrap and jquery mobile togeather because i got this error

    cannot call methods on page prior to initialization; attempted to call method ‘bindRemove’

    How can we solve this error ?

Leave a Reply