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, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 
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:
 
Error: Error: cannot call methods on listview prior to initialization; attempted to call method ‘refresh’
 
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.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • Volker

    Like! 😀

  • José Aurélio

    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?

  • Helio

    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

    • @Helio: If it is not a problem, mail me your problem and I will find you a solution.

  • 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.

  • Thank you. I tried many solutions but in vain. But this worked like a charm. Thanks again !

  • Cole

    YES.
    YES.
    YES.

  • Nikhil

    can you please explain what is happening ‘inside’?

    • Basically you can’t do anything on a component before it’s initialized.

  • Joe

    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.

  • Josue

    This does not work, this is my complete error:

    Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method ‘refresh’

    And happens in http://www.trirand.com/blog/jqgrid/mobile/js/jquery.js:551

    I’m using jqGrid

    • Of course it’s not working, you can’t use .listview(‘refresh’); on a slider. Tell me what have you done so far?

  • 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 ?

    • What specific line of code caused this error?