загрузка div с помощью jquery mobile

#jquery #jquery-mobile

#jquery #jquery-mobile

Вопрос:

У меня проблема при загрузке содержимого с

 $('#next').click(function(){
        $('#boundary').load('options.html #pagecontent').page();


    });
  

Проблема в том, что div #pagecontent находится в options.html загружается, но не в предназначенные элементы jquery mobile.

в options.html с идентификатором = содержимое страницы отображается нормально, если вы предварительно просматриваете эту страницу. только когда я пытаюсь загрузить его на другую страницу div с id =»boundary», весь рендеринг jquery mobile завершается неудачей, и элементы вместо этого просто загружаются как собственные HTML-элементы.

в options.html : стандартный div, содержащий некоторые элементы пользовательского интерфейса.

 <div id="pagecontent">
     // Jquery mobile button 
      <a href="results.php" data-transition="fade" id="result" data-role="button" data-theme="e" rel="external">View results</a>
</div>
  

Спасибо

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

1. Да (вы должны показать некоторый код, чтобы получить более подробный ответ)

2. исходный вопрос был отредактирован @naugtur.

3. является ли пробел между options.html а #pagecontent правильный? разве это не должно быть options.html#pagecontent

4. да, @ phil пробел правильный.

Ответ №1:

Это всего лишь предположение, но зачем вы пишете код для загрузки div страницы из html-файла, если jQuery Mobile делает это по умолчанию, когда пользователь нажимает на ссылку на страницу?

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

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

1. Я подумал о том, что вы сказали, и это очень верный момент. Идея состояла в том, чтобы загружать страницы частями, которые будут меняться, т.Е. без обязательной отправки каких-либо данных, но я подумал, что этот метод поможет оптимизировать переходы между различными частями приложения. Имеет ли это смысл?

2. Да, это рекомендуемый способ. И вы также должны выполнить разбивку на страницы старым способом, например. some.php?page=3 или [при использовании хороших ссылок] some/3 НЕ с помощью каких-либо способов, не основанных на URL, таких как сохранение его в сеансах (этот пример может быть не лучшим, потому что такое разбиение на страницы, как правило, плохо ;))

Ответ №2:

Попробуйте добавить .page()

 $('#boundary').load('options.html#pagecontent').page();
  

Может быть, связано с функцией click

 $('#next').click(function(){
    $('#boundary').load('options.html#pagecontent');
}).page();
  

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

1. это не сработало, Фил. Я заново отредактировал вопрос, чтобы включить больше.

2. можете ли вы также сказать мне, что делает page ()?

3. .page () перезагружает / обновляет элементы управления jQM, насколько я понимаю

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

Ответ №3:

У меня была похожая проблема, и я нашел решение для принудительного рендеринга загруженных divs в jquery mobile. Я знаю, что этот ответ пришел к вам очень поздно, но, возможно, он поможет другим с подобными вопросами:

 $('#next').click(function(){
    $('#boundary').load('options.html #pagecontent');
    $('#boundary').trigger("pagecreate").trigger("refresh");
});
  

У меня это работает с использованием jquery mobile 1.1.0 (я не тестировал со старыми версиями)