Страница JQuery Mobile не загружает содержимое getJSON, пока страница не обновится

Question

У меня есть список «пациентов», который запрашивается и связывается следующим образом:

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

При нажатии на эту страницу я попадаю на страницу профиля пациента, которая должна загрузить некоторые из этих данных, используя запросв URL (т. е. Patient.html? ID = 100002).Этот идентификатор используется в вызове getJSON для заполнения различных полей.Я хочу, чтобы это произошло, как только страница загрузится.

Проблема: Если щелкнуть по одному из элементов списка выше, это приводит к странице профиля пациента, но ни одно из полей не было заполнено.Если я обновлю ту же страницу, все данные будут загружены нормально.Вот некоторый код:

  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";



                });





           }

Я вызываю функцию "login ()" в document.ready.Я даже пытался назвать это "onLoad" тела.Понятия не имею, почему это не работает при связывании, но работает, если я просто перехожу по URL-адресу напрямую или обновляю ..

Answer 1

Ссылки в многостраничном документе Один HTML-документ может содержать один или несколько контейнеров 'page', просто сложив несколько элементов div с ролью данных "page". Это позволяет вам создать небольшой сайт или приложение в одном HTML-документе; jQuery Mobile просто отобразит первую «страницу», найденную в исходном порядке, при загрузке страницы.

Если ссылка в многостраничном документе указывает на якорь (#foo), среда будет искать упаковщик страниц с этим идентификатором (id = "foo"). Если он найдет страницу в документе HTML, он перейдет на новую страницу. Вы можете легко перемещаться между локальными, внутренними "страницами" и внешними страницами в jQuery Mobile. Оба будут выглядеть одинаково для конечного пользователя, за исключением того, что на внешних страницах будет отображаться счетчик Ajax во время загрузки. В любом случае jQuery Mobile обновляет хэш URL-адреса страницы, чтобы включить поддержку кнопки «Назад», создание глубоких ссылок и создание закладок.

Важно отметить, что если вы ссылаетесь с мобильной страницы, которая была загружена через Ajax, на страницу, содержащую несколько внутренних страниц, вам необходимо добавить rel = "external" или data-ajax = "false" к ссылка на сайт. Это говорит фреймворку о необходимости полной перезагрузки страницы, чтобы очистить хеш Ajax в URL. Это очень важно, потому что страницы Ajax используют хеш (#) для отслеживания истории Ajax, в то время как несколько внутренних страниц используют хеш для обозначения внутренних страниц, поэтому между этими двумя режимами будут конфликты.

Например, ссылка на страницу, содержащую несколько внутренних страниц, будет выглядеть следующим образом:

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