Jquery 选项卡和表单

发布于 2024-08-30 15:36:29 字数 315 浏览 4 评论 0原文

这可能是一个奇怪的问题,但我不确定解决这个问题的最佳方法..

我正在使用 JQuery ajax 选项卡。选项卡部分是动态的,因此可以添加多个选项卡,因为内容是通过 Ajax 加载的,因此可以将相同的内容加载到不同的选项卡中。另一个重要的细节是我正在使用“缓存”选项,以便选项卡保持状态。

现在,当加载多个选项卡时就会出现问题。看起来 HTML 项目(例如表单和 div)现在在 DOM 中具有重复的 id,因此 Ajax 查询无法再区分元素。结果是任何 JavaScript/Ajax 都会中断。

有人对解决此类问题的方法有什么建议吗?

提前致谢..

this may be a weird problem but I’m not sure the best way to go about it..

I am using JQuery ajax tabs. The tab section is dynamic so multiple tabs can be added, as the content is loaded via Ajax the same content can be loaded into different tabs. The other important detail is that i am using the Cache option so the tabs maintain state.

Now problems arise when more than one tab has been loaded. It looks like HTML items such as forms and divs now have duplicated id's within the DOM, so Ajax queries can no longer distinguish between the elements.. The result is that any JavaScript/Ajax breaks.

Does anyone have any suggestions for way to tackle such a problem?

Thanks in advance..

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

对你而言 2024-09-06 15:36:29

当 ajax 调用发出并返回时,您可以在加载到选项卡之前获取 HTML 并修改新选项卡内容的 id。这将允许您拥有如下 ID:

tab1input1

tab1input2

tab2input1

tab2input2

已编辑

在 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选项。请参阅 jquery 文档中有关 $.ajax 的文档。另一个选项是 success,它允许您在 ajax 调用成功后运行函数。

使用 success 选项,您可以

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

进行 ajax 调用,返回 HTML 并修改 html 中的输入 ID 和名称,并将 tabid 附加到新数据中。

When the ajax call is made and returns, you can get the HTML and modify the id's of the new tab contents before you load into the tab. This would allow you to have IDs like:

tab1input1

tab1input2

tab2input1

tab2input2

Edited

In the demo on Jquerys Site http://jqueryui.com/demos/tabs/#ajax the source code here displays the following

    <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>

you should notiec that you can set specific ajax options with the tab control. Refer to documentation on $.ajax in jquery's documentation. Another option is success which allows you to run a function after the ajax call was successful.

Using the success option you can

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

this should take an ajax call that returns HTML and modify the input ids and names in the html and append the tabid to your new data.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文