jquery mobile - загрузка контента в раздел

Question

Jquery Mobile «захватывает» страницу, загружает контент и внедряет его в страницу.

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

У меня есть файл index.html, а затем файл page2.html. Я настраиваю jquery mobile обычным способом, оборачивая содержимое каждой страницы в div следующим образом:

<div id="container" data-role="page">
   // my content
<a href="page2.html">go to page 2</a>
</div>

когда пользователь нажимает на страницу 2, он создает приятный эффект скольжения. URL в адресной строке выглядит следующим образом: index.html # page2.html

jquery mobile внедряет содержимое страницы с помощью якорей и применяет переход. хорошо, так что все прекрасно работает до следующей части.

На page2.html у меня есть раздел, который загружает некоторые внешние данные и вставляет их в div.

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a>
<div id="target"></div>
<script src="js/code.js"></script>
<script src="js/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.ajaxtrigger').trigger('click');
});
</script>

Проблема, с которой я столкнулся, заключается в том, что когда я включаю переходы в jquery mobile, этот скрипт не работает. Это не загрузит данные в div. облом.

Кто-нибудь знает, что мне нужно сделать, чтобы заставить его запускать и загружать содержимое в этот div?

Answer 1

Другим вариантом будет создание уникального идентификатора для элемента DOM, которым вы хотите манипулировать при каждой загрузке страницы, чтобы у вас не было проблем с дублирующимися идентификаторами, которые описывает Адам.Я сделал это в C # (с синтаксисом Razor) следующим образом:

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); }
@section header
{
    <div id="@headerAutoGenSym"></div>

    <script type="text/javascript">
        $(function () {
            $(document).bind("pageinit", function () {
                $.get(
                    '@Url.Action("myAjaxURL")',
                    function (data) {
                        $('#@headerAutoGenSym').append(data);
                    }
                );
            });
        });
    </script>
}

Answer 2

У меня похожая проблема (как упомянуто в комментарии выше), и я только что понял (по крайней мере для меня).Когда jQuery Mobile загружает следующую страницу через ajax, она сохраняет предыдущую страницу в DOM, чтобы кнопка возврата работала правильно.Теперь проблема в том, что если вы используете javascript на второй странице для ссылки на какой-либо из элементов DOM (в частности, по идентификатору), вы должны учитывать, что элементы с предыдущей страницы все еще находятся в DOM.Поскольку идентификаторы разработаны так, чтобы быть уникальными, document.getElementById() не так надежен и, следовательно, $("#myDiv") тоже не надежен.

Я только начал делать ссылки на элементы DOM по имени класса (например, $(".myDivClass")), поскольку классы CSS разработаны НЕ уникальными, и это, кажется, делает свое дело.Побочным эффектом является то, что любые изменения, которые вы вносите в javascript, будут также применяться ко всем скрытым страницам, но он выполняет свою работу.Еще одна идея, которая приходит мне в голову, когда я набираю это, состоит в том, чтобы дать каждому <div data-role="page"> уникальный идентификатор, и теперь элементы запроса используют $("#myUniquePage #myInnerDiv") вместо $("#myInnerDiv").

. Надеюсь, это поможет.

Answer 3

Попробуйте это:

$('page2.html').bind('pageshow', function() {
   $('.ajaxtrigger').trigger('click');
});

Answer 4

Вы пытаетесь использовать $(document).ready(function(){ $('.ajaxtrigger').trigger('click'); });, чтобы зафиксировать щелчок / нажатие на страницу2 в index.html, а затем вставить данные в page2.html?

Если это так, это не сработает, поскольку вы не можете таким образом передавать данные между страницами. Попробуйте присвоить основному div page2.html идентификатор #page2 и используйте метод pagebeforeshow (http://jquerymobile.com/test/#/test/docs/api/events.html)

$('div#page2').live('pagebeforeshow',function(event, ui){
  $('div#page2 div#ajax_loaded_content').load('url_to_load_from.php');
});