JQUERY Mobile Dynamic Pages

Question

I'm trying load a page dynamically with ajax. I pass along refid that i use to get the page content.

All the information is stored in a custom attribute in the tag.

<a href="#dPage" title="More Info" data-theme="c" lat="{value}" lon="{value}" refid="{value}" id="detailslink">

<div data-role="page" id="dPage">
        <div data-role="header">
            <h1>Details</h1>
        </div>
        <div data-role="content">
            <div id="detailspage">

            </div>
        </div>

    </div>

---

//$('#dPage').bind('pageshow', function() {
$('#detailslink').live('click', function() {
    $("#detailspage").html('');
    var placelat = $(this).attr('lat'); 
var placelon = $(this).attr('lon');
var refid = $(this).attr('refid');
    //alert (refid);
    //$.mobile.pageLoading();
    //alert("Your browser broke!");
    $.ajax({  
       cache: false,
       url: "getdetails.php", 
       dataType: "html",
       data: "&lat="+placelat+"&lon="+placelon+"&refid="+refid,
       success: function (data) {   
        $("#detailspage").html(data);

        }
    });
    //alert("done");

});

---

NEED HELP: This doens't work on iPhone. The content is returned and works fine on pc, android, but not iphone. Nothing is loaded on the iphone, just a blank page. Any ideas how to fix the iPhone?

I managed to get it to load the first page content properly but it loads that page. All the other pages just show the same page. The content does not refresh.

Answer 1

You may want to try implementing the error handling for the jquery.ajax call. Take a look at http://api.jquery.com/jQuery.ajax , specifically the error and the statusCode settings to see if you can get a better idea of what's happening. Possibly something like the following:

$.ajax({  
   cache: false,
   url: "getdetails.php", 
   dataType: "html",
   data: "&lat="+placelat+"&lon="+placelon+"&refid="+refid,
   success: function (data) {   
    $("#detailspage").html(data);
    },
   error: function(jqXHR, textStatus, errorThrown) {
       alert(textStatus);
   }
});

If the above doesn't help, you may also try reproducing the error in Safari on a desktop/laptop. Safari has a pretty good JavaScript debugger that may help you see what's happening and can even let you step through your code info .

Hope this helps!