JQuery Mobile: новый контент на внутренней странице перехода - PullRequest
Новая
       4

JQuery Mobile: новый контент на внутренней странице перехода

5 голосов
/ 18 марта 2012

Я пытаюсь написать простое приложение, которое имеет несколько внутренних страниц. С #page2 я хочу вернуться к #page1 и перезагрузить его, чтобы содержимое, сгенерированное javascript, обновилось. 

<body>
<div id="page1" data-role="page">
    <script type="text/javascript">
    //Javascript spits out something new every time
    </script>
</div>

<div id="page2" data-role="page">
    <a id="page1button" href="page1" data-role="button">go to page1</a>
</div>
</body>

Единственный способ сделать эту работу - добавить rel="external" к #page1button. Обновление контента, НО происходит внезапная перезагрузка страницы, которая не выглядит сексуально. Есть ли способ достичь тех же результатов, но все еще использовать переходы jqm?

Я знаю, что это популярный вопрос, и я провел много исследований, включая документацию jqm по изменению страниц , но, похоже, ничего из того, что я пробовал, не работает. У $.mobile.changePage(), кажется, есть опция: reloadPage:true, которая утверждает, что делает именно то, что мне нужно, но она не работает. Я даже пытался $.mobile.loadPage() ДО .changePage() и до сих пор не повезло. Помогите!

UPDATE:

Я почти уверен, что это не проблема с кэшированием, потому что вот как выглядит мой элемент страницы, и он ПОСТОЯННО показывает одну и ту же вещь * $ #% и каждый раз, когда я возвращаюсь на страницу: 

<div id="page2" data-role="page" data-cache="never" data-dom-cache="false"> ...

Я думаю, что блок javascript вызывается только один раз при загрузке html-страницы, а не каждый раз, когда я возвращаюсь в этот div с помощью jqm. Возможно, способ решить эту проблему - найти способ заставить этот блок кода работать снова. Есть идеи?

UPDATE:

Хорошая новость: я нашел страницу, которая говорит об этой ТОЧНОЙ проблеме: http://jquerymobile.com/test/docs/pages/page-scripting.html

Плохие новости: то, что, как он утверждает, сработает ...

$( document ).delegate("#page1", "pageinit", function() { alert('RE-RUN JAVASCRIPT'); });

... НЕ !! Я поместил эту функцию в начало моего HTML-файла, и она запускается только один раз.

UPDATE:

Все еще борется с этим. Я поместил здесь немного кода: http://dl.dropbox.com/u/28286159/index.html

Для простоты, я просто сделал две страницы, на одной из которых было напечатано <script>: document.write(Math.random());

Вы увидите, что число не меняется.

Ответы [ 4 ]

3 голосов
/ 21 марта 2012

Вот решение.Ваша страница #predict все еще находится в домене, так как все ее страницы.Так что да, ваш математический код выполняется только один раз.Просто привяжите случайное число к нажатию кнопки «Скажите мне» и обновите #prediction новым случайным числом, сгенерированным щелчком. 

<script>
    $(function(){   
        $('#tellme').click(function(){       
            randomNumber = Math.random();
            $('#prediction').html(randomNumber);
            $.mobile.changePage('#predict', {transition:'pop'});
        });
    }); 
</script>
<section id="home" data-role="page">
    <div data-role="header">
        <h1 class="">HOME</h1>
    </div><!-- /header -->

    <div data-role="content">
        <div id="iknow">Here's a random number...</div>

        <a href="#" data-role="button" id="tellme">TELL ME!</a>

    </div><!-- /content -->
</section><!--#home-->
<section id="predict" data-role="page">
    <div data-role="header">
        <h1 class="">PREDICT</h1>
    </div><!-- /header -->

    <div data-role="content">

        <div id="prediction"></div>

        <a id="tryagain" href="#home" data-role="button" data-transition="pop">Try again.</a>

     </div><!-- #content -->
</section><!-- #predict -->
0 голосов
/ 19 февраля 2013

используйте pageshow (или лучше, pagebeforeshow) вместо pageinit.

pageinit вызывается только один раз, чтобы избежать ненужного повторного применения мобильного интерфейса jQuery. Хотя pageshow и pagebeforeshow вызывается каждый раз, когда отображается страница, это то, что вам нужно, чтобы имитировать обновление страницы в вашем случае.

Далее читайте здесь: http://api.jquerymobile.com/category/events/

и вот модификация вашего индекса для быстрой визуализации: http://jsfiddle.net/tSYUK/

0 голосов
/ 27 марта 2012

В этом случае обе страницы: «домашняя» и «прогнозируемая» будут изначально загружаться в DOM.

Чтобы сохранить минимальный размер DOM браузера, jQuery Mobile автоматически удаляет все динамически загружаемыемобильная страница из DOM, как только она была переведена из поля зрения. Это относится только к мобильным страницам, загружаемым динамически через Ajax;страницы, уже находящиеся в разметке многостраничного документа, не удаляются.

Таким образом, ваша страница прогноза будет постоянно доступна в DOM.Чтобы обновить этот контент на странице, обновите его и вызовите соответствующий метод обновления, чтобы jquery mobile улучшил DOM.

0 голосов
/ 18 марта 2012

Если вы хотите, чтобы переход страницы работал, вам нужно предварительно выбрать внешнюю страницу. 

<a href="prefetchThisPage.html" data-prefetch> ... </a>

В документации сказано точно:

Управление размерами DOM

Чтобы анимационные переходы страниц работали, страницы, с которых вы переходите, и на обе страницы должны быть в DOM.Однако сохранение старых страниц в DOM быстро заполняет память браузера и может привести к замедлению работы некоторых браузеров или даже к сбою.

Документация: http://jquerymobile.com/test/docs/pages/page-cache.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...