Jquery Mobile - $ .mobile.changepage не загружает внешние файлы .JS - PullRequest
Новая
       0

Jquery Mobile - $ .mobile.changepage не загружает внешние файлы .JS

20 голосов
/ 16 сентября 2011

Так что мне трудно заставить $.mobile.changePage нормально функционировать. Я называю это так: 

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

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

-Jquery
-(CUSTOM JS)
-Jquery Mobile

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

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

    loadFormFields();

});

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

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

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

Ответы [ 6 ]

43 голосов
/ 16 сентября 2011

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

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

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

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

ОБНОВЛЕНИЕ

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

3 голосов
/ 19 сентября 2011

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

В основном я загружаю все свои файлы 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.Надеюсь, это поможет некоторым людям.

1 голос
/ 29 апреля 2013

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

будет работать такая простая страница изменений, как эта:

$.mobile.changePage('abc.html', {
    transition: 'slide'
});
0 голосов
/ 09 января 2013

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

0 голосов
/ 11 августа 2012

Похоже, что JQM не предоставляет "правильного" способа загрузки внешних html-файлов.Большое спасибо Jasper за решение.

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

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

или 

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

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

0 голосов
/ 18 сентября 2011

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

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