将jQuery表单结果提交回动态选项卡

问题描述:

我一直在努力将表单提交到动态标签中.似乎所要做的就是突破我的标签,并最终显示更新页面.

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.