jQuery Mobile - jQuery.ajax never gets called

Question

I have been struggling with this for quite some time now. jQuery.ajax in the code below never runs. I know that is because I'm using the wrong pageinit/document.ready.

One other strange thing is that the pageLoadingMsg doesn't become "Laddar..." as specified below, but "loading"...

I have tried to initialize the ajax call with:

But what should I use? I have tried:

$(function() {

$(document).live( 'pageinit',function(event){

$(document).live( 'pagecreate',function(event){

$(document).bind( 'mobileinit',function(event){

$(document).bind( 'pageinit',function(event){

My complete code:

 $(function() {

     var photos = {};

     $.mobile.showPageLoadingMsg("Laddar...");

     $.ajax({
             type: "get",
             url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
             data: ({tags: 'cat', format: 'json', tagmode: 'any'}),
             cache: false,
             dataType: "json",
             success: onSuccess,
             error: onError
     });
});


//////////////////////////////////////////////////////////////////////////
//
// Handle the returned data
//
//////////////////////////////////////////////////////////////////////////

function onSuccess(data)
{
     photos = data;
     var output = [];

     for (var i = 0, len = data.items.length; i < len; i++) {

         output.push('<li><a data-index="' + i + '" href="details.html?author='+ data.items[i].author +'&image='+ data.items[i].media.m +'"><img src="images/de.png" class="ui-li-icon">' + data.items[i].author + '</a></li>')
     };

     $('#list').append(output.join('')).listview('refresh');
     $.mobile.hidePageLoadingMsg();
}


//////////////////////////////////////////////////////////////////////////
//
// Failure for the ajax call
//
//////////////////////////////////////////////////////////////////////////

function onError(param1, param2, param3)
{
    alert(param1); alert(param2); alert(param3);
}

To set the loading message set the value of `$.mobile.loadingMessage = "Laddar...";` then call `$.mobile.showPageLoadingMsg();` — Richard Dalton, Jan 04 '12 at 11:51

score 1 · Answer 1 · edited Aug 10 '12 at 10:01

It's because jquery mobile loads new pages through ajax requests, and with the exception of the first page loaded, each additional page loaded by ajax only pulls in the content that exists between the first "data-role="page"" element it finds.

It does not pull in the head section or anything else. If no 'data-role="page"' is found, it will try to load everything from the body tags.

So, if you're calling a new page, and you want to preform some additional work on the dom, you need to add the script (inside) the first data-role="page" element. If you are adding to the dom, you should include your js in the

$('your-page-id').live('pagebeforecreate', function(){ // code to run here  });

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

0

There was bug in jQuery mobile, and maybe you encountered it. Here is solution: How to initialize pages in jquery mobile? pageinit not firing

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 04 '12 at 11:52

Mateusz W

1,981
1
14
16

None of the proposed solutions in that thread gave me the answer. I have now posted the solution in this thread. – Fernando Redondo Jan 04 '12 at 14:29

Fernando Redondo · Accepted Answer · 2012-01-04T14:29:04.647

I tried to put my code inside a < div > as suggested by the answers in the thread Mateusz Wozniak linked to:

<div data-role="page" id="news">

<script type="text/javascript">
    $("#news").live('pageinit', function() {


            alert("pageinit runs");
            getData();
     });
</script>

// More html code...

</div>

And getData() is defined in the < head > section:

<script type="text/javascript">


    //////////////////////////////////////////////////////////////////////////
    //
    // Get data
    //
    //////////////////////////////////////////////////////////////////////////

    function getData()
    {
         var photos = {};

        alert("getData() runs");

         $.mobile.loadingMessage = "Laddar...";
         $.mobile.showPageLoadingMsg();

         $.ajax({
                 type: "get",
                 url: "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                 data: ({tags: 'cat', format: 'json', tagmode: 'any'}),
                 cache: false,
                 dataType: "json",
                 success: onSuccess,
                 error: onError
         });    
    }
</script>

The first alert shows, but not the one in getData(). I get the error message:

getData() is not defined.

But it is, can you see any errors?

Solution

Well this is weird. Because it couldn't find my function after I called in in the pageinit I googled a bit. After a while I understood that you have to put all your JS code inside the < page > tag. When I put my getData() function there it worked!

Can somebody perhaps explain why?

jQuery Mobile - jQuery.ajax never gets called

3 Answers3

Solution