jQuery UI - 在选项卡中提交表单答案

【问题标题】：jQuery UI - form submitting in tabjQuery UI - 在选项卡中提交表单
【发布时间】：2012-06-19 06:05:07
【问题描述】：

我想提交一个驻留在 jQuery UI 选项卡内的表单 - 我希望操作页面在选项卡中呈现...我能够在选项卡内“拦截”“a”标签以调用这些链接标签（感谢这里的帮助...）

使用这个

$('#tabs-community').on('click', '.ui-tabs-panel a', function(){
    var $panel=$(this).closest('.ui-tabs-panel');
    $panel.load(this.href);
    return false;
});

我认为提交事件有类似的东西......我试过了

$('#formID').on('submit', function(e){
    e.preventDefault();
    var formSrc = $(this).attr('action');
    var formMethod = $(this).attr('method');
    var formData = $(this).serialize();
    $.ajax({
      url: formSrc,
      type: formMethod,
      data: formData,
      success: function(data){
        //work with returned data from requested file
        alert(data);
      }
    });
  });

（取自form submitting in jquery tab - 但这不是我想要的）

它“工作”了它应该做的事情 - 但它会进行 AJAX 调用，并在警报中返回操作页面......不是我想要的。

更不用说它看起来好像 jQuery 正在剥离提交按钮变量......例如，我检查一个或另一个提交按钮的存在 - HTML 规范说如果单击提交按钮 - 它作为一个传递值，但我的萤火虫控制台显示了 ajax 表单提交 - 'POST' 显示按钮变量的 NO SIGN（这是一个附带问题，如果我可以让表单“正常”提交到选项卡中，我认为这个问题就会消失)...有什么建议吗？

希望这是有道理的。

【问题讨论】：

标签： jquery forms jquery-ui

【解决方案1】：

显而易见的想法是将您的结果放入<iframe>。您可以像这样提交表单：

var $form = $('form#foobar');
//replace form by iframe
$form.hide();
$form.parent().append('<iframe id="submit-target" name="submit-target"></iframe>');
//submit form to new iframe (set target to name attribute of iframe)
$form.attr('target', 'submit-target');
$form.submit();

向iframe 提交表单在an answer to another question 中有详细说明。

【讨论】：

谢谢 Stefan - 我不是 iframe 的忠实粉丝，如果可能的话尽量避免使用它们。但如果我找不到我的问题的答案，我可以考虑这个。

【解决方案2】：

我在 jqueryui 选项卡上使用，需要为要在当前页面上提交的所有表单编写一个简单的代码。

这是基于您的代码的我的工作代码：

        $('form').submit(function(e) {
            e.preventDefault();

            var currentTab = tabs.tabs('option', 'selected'),
                tabId = $("li.ui-tabs-active").attr("id"),
                formSrc = $(this).attr('action'),
                formMethod = $(this).attr('method'),
                formData = $(this).serialize();

            $('#tabs-'+tabId).html("Loading...");

            $.ajax({
                url: formSrc,
                type: formMethod,
                data: formData,
                success: function(data){
                    $('#tabs-'+tabId).html(data);
                }
            });
        });

我当前的 jqueryui 版本是 1.10.2 和 jquery 1.9.1。

【讨论】：