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
– Richard Dalton, Commented Jan 4, 2012 at 11:51

Th0rndike · Accepted Answer · 2012-08-10 10:01:46Z

1

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  });

edited Aug 10, 2012 at 10:01

Th0rndike

3,4363 gold badges25 silver badges43 bronze badges

answered Aug 10, 2012 at 3:25

Jeff

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

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, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 4, 2012 at 11:52

Mateusz W

2,0311 gold badge15 silver badges16 bronze badges

1 Comment

Fernando Redondo Over a year ago

None of the proposed solutions in that thread gave me the answer. I have now posted the solution in this thread.

Fernando Redondo · Accepted Answer · 2012-01-04 14:29:04Z

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?

Collectives™ on Stack Overflow

jQuery Mobile - jQuery.ajax never gets called

3 Answers 3

Comments

1 Comment

Solution

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related