JQuery вкладки и формы

Question

это может быть странной проблемой, но я не уверен, что лучший способ это сделать ..

Я использую вкладки JQuery ajax. Раздел вкладок является динамическим, поэтому можно добавлять несколько вкладок, так как контент загружается через Ajax, один и тот же контент может загружаться в разные вкладки. Другой важной деталью является то, что я использую опцию Cache, чтобы вкладки сохраняли состояние.

Теперь проблемы возникают, когда загружено более одной вкладки. Похоже, что элементы HTML, такие как формы и div, теперь имеют дублированные идентификаторы в DOM, поэтому запросы Ajax больше не могут различать элементы. В результате любой JavaScript / Ajax разрывается.

У кого-нибудь есть предложения по решению этой проблемы?

Заранее спасибо ..

Answer 1

Когда выполняется вызов ajax и он возвращается, вы можете получить HTML-код и изменить идентификаторы содержимого новой вкладки перед загрузкой на вкладку. Это позволит вам иметь идентификаторы, такие как:

tab1input1

tab1input2

tab2input1

tab2input2

1012 * Отредактированный *

В демоверсии на сайте Jquerys http://jqueryui.com/demos/tabs/#ajax исходный код здесь отображает следующее

    <script type="text/javascript">
     $(function() {
      $("#tabs").tabs({
       ajaxOptions: {
        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.");
        }
       }
      });
     });
   </script>

Вы должны заметить, что вы можете установить определенные параметры ajax с помощью элемента управления tab. Обратитесь к документации по $ .ajax в документации jquery. Другой вариант - это успех, который позволяет вам запускать функцию после успешного вызова ajax.

Используя опцию успеха, вы можете

success: function (data) {
  $("input", data).each( function () {
    $(this).id(yourtabid + this.id);  
    $(this).name(yourtabid + this.name);
  });
}

это должно занять ajax-вызов, который возвращает HTML, изменяет идентификаторы ввода и имена в html и добавляет tabid к вашим новым данным.