Question

I am trying to use ajax call to get some values as JSON object from the server side using JquerMobile framework. This works without any issues in the Desktop Chrome Browser. THis DOES NOT work on the mobile phone browsers. Any help to point out what I am doing wrong here will help. Script below.

$("#showmore").live("click", function(event, param1){
    event.preventDefault();
    getUrl = $(this).attr('href');
    $.post(getUrl, function(data){  
        $('#sname').html(data.name);
    },"json");   
    return false;  
});

If I print the callback data in an alert box I get the current page’s HTML content! In desktop browser I am getting the right values. Thank you for your help!

Answer 1

I have had this same issue. I have only experienced the issue on an iPad and was not able to find a fix. I was able to find a workaround though.

Instead of relying on the href attribute, use a data-attribute, like data-href. Set the data-href attribute to the same as the href attribute and reference the data-href attribute in your jQuery code.

There seems to be a bug where you can’t get the correct href attribute’s value in some versions of Mobile Safari. The reason you are loading the same page with your AJAX request is because the href value returned to you via JS is blank, referring to it’s parent document.

JS —

$("#showmore").live("click", function(event, param1){
    var getUrl = $(this).attr('data-href');//no need to create a global variable, so use the `var` keyword here
    $.post(getUrl, function(data){  
        $('#sname').html(data.name);
    },"json");   
    return false;  
});

HTML —

<a data-href="foobar.html" href="foobar.html" id="showmore">SHOW MORE!</a>

Note that return false in a jQuery event handler is functionally the same as calling event.preventDefault() and event.stopPropagation() at the same time.