使用jQuery的DIV表单提交 [英] Form submit in DIV using jQuery

问题描述

我指的是类似于<一的问题href="http://stackoverflow.com/questions/1218245/jquery-submit-form-and-then-show-results-in-an-existing-div">the人在这个帖子，因为该解决方案中所述有没有为我工作。

I'm referring to a problem similar to the one in this post, because the solution described there doesn't work for me.

在起点是一个HTML页面（称为配置文件）使用jQuery UI选项卡：

The starting point is a HTML page (called profile) with jQuery UI tabs:

<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脚本（根据引进链接后）：

In addition, I use the following JS script (based on the post linked in the introduction):

$('#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
});

该记录被提交，但该行为是根据不同的浏览器：

The record is submitted, but the behavior is different depending on the browser:

• IE，火狐，歌剧：正确的内容到DIV，优秀的

• IE, Firefox, Opera: correct content into DIV, excellent!

Safari浏览器，Chrome浏览器：正确的内容，但在整个页面被刷新的结果

Safari, Chrome: correct content, but the entire page is refreshed with the results

请让我知道我做错了。很多很多的感谢！

Please let me know what I'm doing wrong. Many many thanks!

更新1：的DIV命名为PWD-设置仅由选项卡界面创建。请注意，该行为是相同的，即使我把它添加到HTML（用＆LT; D​​IV ID =PWD-设置＆GT;＆LT; / DIV＆GT; ）

UPDATE 1: The DIV named pwd-settings is created by the tab interface only. Please note that the behavior is the same, even if I add it to the HTML (with <div id ="pwd-settings"></div>).

更新2：我​​也删除了JavaScript的上面和所有浏览器都成了正确的内容，但整个页面被刷新=旧的URL，新的内容。当我加入的JavaScript的DIV中呈现的HTML页面，它开始在上述浏览器的工作。因此，我看到两个可能的错误原因：

UPDATE 2: I also removed the JavaScript above and all browsers became "correct content, but the entire page is refreshed" = "old URL, new content". As soon as I added the JavaScript to the HTML page rendered within the DIV, it started working in the browser described above. Hence I see two possible error reasons:

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

1) The JS is simply not executed in the browsers having errors or

2）的DIV中的JS不起作用，因为它解决了一个DIV仅存外面

2) The JS within the DIV doesn't work because it addresses a DIV which only exists outside

推荐答案

我终于找到了原因：某些浏览器（即那些有问题）的行为不同，当JS在问题中所述加载由于这一事实的形式因为标签的内容是通过Ajax加载以后并不存在。

I finally found out the reason: some browsers (namely the ones having issues) behave differently when the JS described in the question is loaded due to the fact the form does not exist yet because the content of the tab is loaded later on via Ajax.

因此​​，解决方案是创建一个JS函数代替code以上，并调整按钮（提交变成按钮，引进的onClick）：

Hence the solution is to create a JS function instead of the code above and adapt the button (submit becomes button, introducing onClick):

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

这是由Safari和Chrome正确的处理，然后了。

This is handled correctly by Safari and Chrome then too.

非常感谢所有的参与者！

Many thanks to all participants!

这篇关于使用jQuery的DIV表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！