Question

我指的是与the one in this post类似的问题，因为那里描述的解决方案对我不起作用。

起点是一个带有jQuery UI标签的HTML页面（称为配置文件）：

<div id="tabs"> 
    <ul> 
        <li><a href="#realtab">Foo Bar</a></li> 
        <li><a href="?cmd=changePassword" title="pwd-settings">
                        <span> Dynamic tab </span>
            </a></li>
    </ul>
</div>

在DIV中呈现的HTML 是：

<form method="post" id="subform" action="http://myhost.com/example.php">
    <input type="hidden" name="cmd" value="submitChangedPassword">

    <dl>
        <dt>PWD1</dt>
        <dd><input type="password" name="password" /></dd>

        <dt>PWD CHK</dt>
        <dd><input type="password" name="passwordChk" /></dd>

        <dt>&nbsp;</dt>
        <dd><input type="submit" value=" Apply " /></dd>
    </dl>
</form>

另外，我使用以下 JS脚本（基于介绍中链接的帖子）：

$('#subform').submit(function() { // catch the form's submit event - should I use the form id?
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
        }
});
return false; // cancel original event to prevent form submitting
});

记录已提交，但行为因浏览器而异：

IE，Firefox，Opera：将内容改为DIV，非常好！
Safari，Chrome：正确的内容，但整个页面已刷新并带有结果

请让我知道我做错了什么。非常感谢！

更新1：名为pwd-settings的DIV仅由选项卡界面创建。请注意，即使我将其添加到HTML（使用<div id ="pwd-settings"></div>），行为也是相同的。

更新2：我还删除了上面的JavaScript，所有浏览器都变成了“正确的内容，但整个页面都刷新了”=“旧网址，新内容”。一旦我将JavaScript添加到DIV中呈现的HTML页面，它就开始在上述浏览器中工作。因此，我看到两个可能的错误原因：

1）JS根本没有在有错误的浏览器中执行或

2）DIV中的JS不起作用，因为它解决了仅存在于

之外的DIV

Answer 1

jQuery的serialize()函数只获取<input>个元素。链接元素不是输入。调用$(this).serialize()不会将<a>元素的值添加到您的数据中。

您需要添加<input>元素来保存该数据。也许试试

<input type="hidden" value="changePassword" name="cmd" />

编辑：你可以发布完整的HTML吗？从它的外观来看，您的选择器不会选择表单，因为它甚至没有id属性....

Answer 2

这是我的猜测 -

首先，您的表单上没有'action'属性。所以$（this）.attr（'action'）的JS行不会返回任何内容。我不确定jQuery Ajax如何处理它。

但我认为真正的问题是example.php脚本以及它如何处理你的调用。我不是Ajax专家，但这根本不是我做的方式。如果你拿出showFile（）的东西，只是回显$ _REQUEST ['cmd']，它有用吗？

除此之外，我没有想法。但这不是浏览器的怪癖，这是你的代码的一个问题，我可以说很多。

Answer 3

我终于找到了原因：一些浏览器（即有问题的浏览器）在加载问题中描述的JS时表现不同，因为表单不存在，因为选项卡的内容稍后加载通过Ajax。

因此解决方案是创建一个JS函数而不是上面的代码并调整按钮（提交成为按钮，引入onClick）：

<input type="button" value=" Apply " onClick="callMyFunction()" />

这也由Safari和Chrome正确处理。

非常感谢所有参与者！

Answer 4

解决此问题的最简单方法是在表单中添加隐藏的输入：

<input type="hidden" name="cmd" value="checkPassword" id="cmd-field" />

如果此值需要根据显示的选项卡而改变（虽然听起来不是这样），您可以在切换选项卡时动态更改它：

$("#invent-an-id-for-the-link-that-switches-to-this-tab").click(function() {
    $("#cmd-field").value("checkPassword");
});

Answer 5

看起来你的处理程序没有为后面的浏览器加载...由于表单的内容是动态的，你必须确保在设置表单的处理程序之前加载到DOM中。

您有两种可能的解决方案。

首先，加载选项卡内容后，加载您发布的脚本（检查jquery doc for tab event load：http://docs.jquery.com/UI/Tabs#event-load）。

其次，在按钮点击时使用jquery live event（目前不支持事件提交）。查看：http://docs.jquery.com/Events/live

第二个解决方案的代码：

$('#subform input:submit').live('click', function() { // catch the form's submit event - should I use the form id?
$.ajax({ // create an AJAX call...
    data: $(this).serialize(), // get the form data
    type: $(this).attr('method'), // GET or POST
    url: $(this).attr('action'), // the file to call
    success: function(response) { // on success..
        $('#pwd-settings').html(response); // update the DIV - should I use the DIV id?
    }

}）; 返回false; //取消原始活动以防止表单提交 }）;

第一个解决方案

这些是我为使其发挥作用所做的更改：

从tpl_overview.tpl
更改代码（@ tpl_overview.tpl）：

$（function（）{$（'＃tabs'）。tabs（）}）;

使用此代码：

 $(function() {
     $("#tabs").tabs( {
        load: function(event, ui) {
           // load specific script to handle form submission
           if ($(ui.tab).attr('href') == '#pwd-settings') {
              $.getScript('generic.js');
           }
        }
     } );
  });

这将在加载选项卡的内容后加载并执行generic.js脚本。

如果您发现自己这样做太多次，也许您可以在标签链接名称后命名您的脚本......

告诉我们是否有效！

Answer 6

Safari拥有出色的网络开发工具。如果您运行的是Windows版本，则必须在“首选项”中启用它 - ＆gt;高级。打开Web Inspector并检查您的请求/响应标头。

这不会直接指向解决方案，但现在没有太多可继续的。获取这些标题并让我们更新！

使用jQuery在DIV中提交表单

6 个答案: