Вкладки jquery с ajaxOptions - PullRequest
Новая
       8

Вкладки jquery с ajaxOptions

3 голосов
/ 24 ноября 2010

Почесывая голову на этом. На вкладках jQuery я пытаюсь использовать ajaxOptions для публикации данных на странице перед ее загрузкой.

Итак, у меня есть форма на странице перед моими вкладками с некоторыми полями ввода. т.е. 

<form id="myform" method="post">
<!-- inputs etc -->
</form>

Тогда мои вкладки 

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Preloaded</a></li>
    <li><a href="ajax/content1.html">Tab 1</a></li>
  </ul>

  <div id="tabs-1">
    <p>Initital content</p>
  </div>
</div>

Хорошо, теперь я могу сериализовать мою форму, поэтому при нажатии на вкладку это должен быть пост-запрос, т.е. 

$( "#tabs" ).tabs({
    ajaxOptions: {
        type: 'post',
        data: $("#myform").serialize(),
        error: function( xhr, status, index, anchor ) {
            $( anchor.hash ).html(
            "Couldn't load this tab. We'll try to fix this as soon as possible. " +
            "If this wouldn't be a demo." );
        }
    }
});

Он выполняет почтовый запрос, но данные формы всегда пусты.

Есть идеи, почему?

Спасибо

Lee

1 Ответ

6 голосов
/ 28 ноября 2010

Поскольку он запускается при первом создании вкладок: 

data: $("#myform").serialize(),

Данные, какими бы они ни были , тогда , никогда не обновляются. Самое простое решение здесь - просто обновить эти данные, когда это необходимо, используя вкладку select событие , например: 

$( "#tabs" ).tabs({
  select: function() {
    $(this).tabs("option", { ajaxOptions: { data: $("#myform").serialize() } });
  },
  ajaxOptions: {
    type: 'post',
    error: function( xhr, status, index, anchor ) {
      $( anchor.hash ).html(
        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
        "If this wouldn't be a demo." );
    }
  }
});

Вы можете проверить это здесь , просто загляните в Firebug и т. Д., Чтобы увидеть, что данные формы обновляются и отправляются с каждой вкладкой AJAX-запроса.

...