JQuery Mobile page does not load getJSON content until page is refreshed

Question

I have a list of "patients" that is queried and linked like so:

list.append($(document.createElement('li')).html("<a href='./patient.html?id="+data[i].UnitNumber+"'><img src='http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+data[i].UnitNumber+"&type='/><h3>"+data[i].LastName+", "+data[i].FirstName+" "+data[i].MiddleName+"</h3><p>Age: "+data[i].Age+"</br>SSN: "+data[i].SSN+"</p></a><a href='./patient.html?id="+data[i].UnitNumber+"' data-transition='slideup'>info</a>"));

Upon clicking that page I arrive at a patient profile page that should load in some of this data using the query in the URL (ie patient.html?id=100002). That ID is used in a getJSON call to populate the various fields. I want this to happen as soon as the page is loaded.

Problem: When one of the list elements above is clicked, it leads to the patient profile page but none of the fields have been populated. If I Refresh that same page, all of the data loads fine. Here's some code:

  function login() {

        var query = window.location.search;

          if (query.substring(0, 1) == '?') {
            query = query.substring(4);
          }




                    $.getJSON("http://URLGOESHERE/wcf/PatientSearch.svc/byunitnumber?unitnumber="+query+"", function(data) {

                           var head1 = document.getElementById("name");
                           var newtitle=""+data.LastName+", "+data.FirstName+" "+data.MiddleName+"";
                           head1.firstChild.nodeValue=newtitle;



                            document.frmLogin.email.value="  "+data.BirthDateText+" ("+data.Age+")";
                            document.frmLogin.password.value="  "+data.SSN;


                            document["profpic"].src = "http://URLGOESHERE/wcf/PatientSearch.svc/patientpic.jpg?unitnumber="+query+"&type=pic";



                });





           }

I call the function "login()" at document.ready. I even tried calling it "onLoad" of the body. No idea why this doesn't work when linked, but does if I just go to the URL directly or I refresh..

Answer 1

Linking within a multi-page document A single HTML document can contain one or many 'page' containers simply by stacking multiple divs with a data-role of "page". This allows you to build a small site or application within a single HTML document; jQuery Mobile will simply display the first 'page' it finds in the source order when the page loads.

If a link in a multi-page document points to an anchor (#foo), the framework will look for a page wrapper with that ID (id="foo"). If it finds a page in the HTML document, it will transition the new page into view. You can seamlessly navigate between local, internal "pages" and external pages in jQuery Mobile. Both will look the same to the end user except that external pages will display the Ajax spinner while loading. In either situation, jQuery Mobile updates the page's URL hash to enable Back button support, deep-linking and bookmarking.

It's important to note that if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the Ajax hash in the URL. This is critical because Ajax pages use the hash (#) to track the Ajax history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.

For example, a link to a page containing multiple internal pages would look like this:

href="multipage.html" rel="external">Multi-page link