Вкладки пользовательского интерфейса jQuery: загрузка вкладок из отдельных файлов / страниц без использования Ajax или iframe - PullRequest
Новая
       15

Вкладки пользовательского интерфейса jQuery: загрузка вкладок из отдельных файлов / страниц без использования Ajax или iframe

1 голос
/ 28 апреля 2011

Привет! Я использую вкладки jQuery UI как форму.

Из-за этого я не могу использовать Ajax, потому что все вкладки / содержимое должны присутствовать при отправке формы. Форма состоит из 9 различных вкладок, каждая с большим количеством кода.

Теперь я хочу передать содержимое этих вкладок каждому отдельному файлу (tab1.php, tab2.php, ...).

Мое решение до сих пор:

  1. Я мог бы включить все файлы (tab1.php, ...) в <head> и затем загрузить каждый контент в качестве переменной. Мне это не нравится, потому что код выглядит грязным из-за всего, что уходит.

  2. Я использую фреймы. Кадры загружаются только при нажатии. 

    <div id="tab-1">
    <iframe src="..."></iframe>
</div>

Есть ли лучший подход? Может быть, с помощью Ajax load-OnceAll или что-то в этом роде? ... может быть, что-то, чтобы предотвратить перезагрузку iframe ... Не знаю.

Ответы [ 2 ]

1 голос
/ 28 апреля 2011

Вы можете передать код отдельным файлам, а затем извлечь их содержимое с помощью вызова Ajax jQuery при загрузке страницы: 

var tabs = [
   {
      url: 'tab1.php',
      $ctrl: $('div#tab1')
   },
   {
      url: 'tabN.php',
      $ctrl: $('div#tabN')
   }
];

for(var i = 0; i < tabs.length; ++i)
{
  var data = $.ajax({
    url: tabs[i].url,
    async: false
  }).responseText;
  tabs[i].$ctrl.html(data);
}

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

0 голосов
/ 28 апреля 2011

Вы уже пытались динамически добавлять содержимое вкладок с помощью jQuery?Я имею в виду, что вы используете div с идентификатором "tab1_div", а затем добавляете HTML, используя 

$("#tab1_div").html("my html content for the tab-page");

. Если это работает, вы можете получить HTML для вкладок с помощью Ajax, используя $.get(...).

...