Мобильная страница jQuery не загружает содержимое getJSON, пока страница не будет обновлена

#javascript #jquery #jquery-mobile

#javascript #jquery #jquery-mobile

Вопрос:

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

 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 "amp;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 "amp;type=pic";



                });





           }
  

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

Комментарии:

1. К сожалению, я не могу сделать это общедоступным. По сути, если я нажимаю на ссылку, она загружает новую страницу без каких-либо данных. Если я обновлю ту же страницу, она правильно загрузит данные.

2. Вы тестируете в среде, где вы могли бы использовать firebug или что-то подобное, чтобы увидеть, когда происходит вызов getJSON?

3. Вы пробовали запускать create в div, куда вы добавили данные?

Ответ №1:

Связывание в многостраничном документе Один HTML-документ может содержать один или несколько контейнеров «страница», просто складывая несколько разделов с ролью данных «страница». Это позволяет создать небольшой сайт или приложение в рамках одного 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