JQuery Mobile - $.mobile.changepage, не загружающий внешние .JS файлы

Так что мне тяжело получить $.mobile.changePage для правильной работы. Я называю это следующим образом:

$.mobile.changePage( "DataformsM-AddRecord.html", { transition: "slide"} );

Но по какой-то причине, когда загружается страница HTML, в нее не входит ни один из внешних .js(файлы, которые я написал, чтобы на самом деле что-то делать). Я следую за значительными соглашениями о загрузке

-Jquery
-(CUSTOM JS)
-Jquery Mobile

Кто-нибудь знает, почему это неправильно загружается? Кроме того, функция pagehow не запускается, что странно. Это выглядит так:

$("div[data-role*='page']").live('pageshow', function(event, ui) { 

    loadFormFields();

});

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

document.location.href="DataformsM-AddRecord.html";

Он будет функционировать правильно...

Любая помощь будет принята с благодарностью.:) Спасибо

Ответы

Ответ 1

jQuery Mobile не вытягивает всю страницу в dom, он захватывает элемент first data-role="page" и его потомки и вытягивает его в текущий dom.

Таким образом, любые скрипты в <head> документа не будут включены.

Я обычно помещаю весь функциональный JavaScript для своего сайта на индексную страницу, а затем, когда внешние страницы загружаются в dom, они могут извлечь выгоду из уже загруженных скриптов.

Кроме того, вы можете поместить код JavaScript внутри элемента data-role="page", и он будет включен, когда jQuery Mobile выполнит загрузку AJAX страницы.

UPDATE

Хорошей системой для этого является включение всех ваших JS в файл include и включение его на каждую страницу сайта. Он будет игнорироваться, если страницы будут внесены в DOM AJAX, но если кто-то обновится где-то на вашем сайте, JS будет доступен.

Ответ 2

Итак, построив то, что Джаспер так мудро отметил выше, я придумал рабочее решение.

В основном я загружаю все мои файлы JS и CSS на начальную страницу индекса. Теперь, когда вы загружаете, этот метод будет запущен для pageshow

$("div[id*='page1']").live('pageshow', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    doStuffWhenPageintializes();
});

Как только я вызываю $.mobile.changePage( "someOtherPage.html", { transition: "slide"} );, метод pagehide будет запущен для объекта page1. Здесь вы можете инициировать метод для инициализации страницы, к которой вы переходите.

$("div[id*='page1']").live('pagehide', function(event, ui) { 
    setTimeout(function() { window.scrollTo(0, 1) }, 100);
    loadStuffForNewPage();
});

Теперь вы можете удалить строку document.location.href="external.html" и просто использовать собственный вызов JQM. Надеюсь, это поможет некоторым людям.

Ответ 3

Просьба повторить раздел главы со всеми скриптами на каждой странице html, так как страница смены приведет к перезагрузке страниц и создаст раздел заголовка...

тогда будет создана простая страница смены таким образом:

$.mobile.changePage('abc.html', {
    transition: 'slide'
});

Ответ 4

Кажется, что JQM не имеет "правильного" способа для загрузки внешних html файлов. Спасибо, куча Джасперу за решение.

JQM предлагает перезагрузку AJAX, если мы хотим переключиться на внешние страницы, например:

<a href="foo.html" rel="external">

или

<a href="foo.html" data-ajax="false">

Я пробовал оба, но они не работали - я программирую для родных приложений, возможно, он может работать для веб-приложений?

Ответ 5

Я решил это, разместив script в разделе заголовка последней загруженной страницы, которая помогала и работала для меня. JQM не получает головную часть недавно загруженной страницы в DOM, поэтому не приносит содержимое JS на последней странице. Помещая все script в внешний JS файл или помещая его в раздел главы первой страницы, может сделать трюк для вас.

Ответ 6

Я тоже ищу это решение для "правильного пути" для загрузки внешних страниц. Однако я соглашусь, что ваш хак действительно работает. Я сейчас взломаю:

    $(document).ready(function(){
    $("#page1").bind('ended', function(){
        $.mobile.changePage($(document.location.href="external.html"), 'fade');
  });
});