将jQuery表单结果提交回动态选项卡 [英] Submiting jQuery form results back into dynamic tab
问题描述
我一直在努力将表单提交到动态标签中.似乎所要做的就是突破我的标签,并最终显示更新页面.
I have been struggling with form submission into a dynamic tab. All it seems to do is break out of my tabs and end up displaying the update page.
长期以来,我在索引页面上创建了2个标签,我的搜索是内部搜索,第二个调用了我的大型表单页面:
The long lead in. I create 2 tabs on my index page, my search is internal, the second calls my large form page:
<div id="tabs">
<ul>
<li><a href="create.cfm"><span>Create</span></a></li>
<li><a href="#searchtab"><span>Search</span></a></li>
</ul>
<div id="searchtab">
[search page stuff]
</div>
</div>
两个页面都很好用,创建选项卡使我可以填写新表格并提交.提交后,它会进行验证,然后在创建"选项卡中显示谢谢".
Both pages work great, the create tab allows me to fill in a new form, and submit it. When it submits, it validates then displays the "thank you" in the create tab.
这是提交代码的片段:
$(document).ready(function(){
$("#saCreate").validate({
[validation stuff]
},
submitHandler: function(form) {
if (confirm("Are you sure you want to submit?")) {
form.submit();
}
这可以按需工作.
搜索页面显示所有打开"表单的列表,允许您选择一个表单,它将在新的动态标签中打开其详细信息.
The search page shows a list of all "open" forms, allows you to select one, and it will open its details in a new dynamic tab.
例如:
gridSelect = function(satrk) {
var checkName = satrk;
var tabExists = false;
$('#tabs ul li a').each(function(i) {
if($(this).text() == checkName) {
tabExists = true;
}
});
// React to existance:
if(!tabExists){
$("#tabs").tabs("add","details.cfm?satrk="+satrk,satrk);
$("#tabs").tabs("select", satrk); // select tab by index
}else{
$("#tabs").tabs("select", satrk); // select tab by index
}
基本上,如果选项卡处于打开状态,则只需选择它即可;否则,请创建一个新选项卡,并使用传递给gridSelect的"id"作为名称.此ID实际上就是db ID.
Basically, if the tab is open, just select it, but if not, create a new one, use the "id" passed to gridSelect as the name. This id is literally the db id.
这也很好.我现在正在查看一个包含我的旧表格详细信息的新动态标签.它只不过是用于创建的相同旧表单,而是从数据库中填充了表单框.
This also works great. I am now looking at a new dynamic tab with my old form details. Its nothing more than the same old form for creation, but with the form boxes filled in from the DB.
如果我需要进行更改,请进行更改,然后单击更新"按钮.它会执行与以前相同的验证,并且是否提交成功.
If I need to make a change, I make it, then hit the "update" button. It does the same validation as before, and if good submits.
这就是一切的废话.该表格未提交,也不在我的动态标签中显示谢谢".该表单将提交一个新的URL,并在新的URL中显示谢谢",该URL会覆盖旧的表单界面.例如,blah,blah,blah/update.cfm
This is where it all falls to crap. This form does not submit and show a thank you in my nice dynamic tab. This form submits and shows a thank you in a new URL overwriting the old form interface. For example, blah,blah,blah/update.cfm
我对jQuery很陌生,我已经进行了很多测试,搜索,尝试和修补以达到自己的位置,但是我担心我已经达到了我的基本能力.
I am pretty new to jQuery, I have done a lot of testing and searching and trying and tinkering to get where I am, but I fear I have out reached my basic ability.
我希望我的更新页面仅用更新确认刷新我的动态标签.
I want my update page to simply refresh my dynamic tab with my update confirmation.
帮助!
推荐答案
标准POST请求实际上将指示浏览器呈现新页面.您正在寻找的是ajax提交.您可以根据需要使用成功回调来基于结果来操作DOM.
A standard POST request will indeed instruct the browser to render a new page. What you are looking for is an ajax submit. You can use the success callback to manipulate the DOM based on the result as needed.
对于表单变量,您可以使用$('form').serialize()
将所有表单字段转换为json对象以进行提交.有关更多信息,请参见 http://api.jquery.com/serialize/.
As for form variables, you can use $('form').serialize()
to turn all form fields into a json object for submission. See http://api.jquery.com/serialize/ for more info.
这篇关于将jQuery表单结果提交回动态选项卡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!