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

时间:2012-11-12 18:03:54

标签: jquery jquery-ui

我一直在努力将表单提交到动态标签中。它似乎只是突破我的标签并最终显示更新页面。

长篇大论。我在索引页面上创建了2个标签,我的搜索是内部的,第二个调用我的大表格页面:

 <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>

两个页面都很好用,创建标签允许我填写新表格并提交。提交时,验证然后在创建选项卡中显示“谢谢”。

这是提交代码的片段:

 $(document).ready(function(){                     
   $("#saCreate").validate({
        [validation stuff]
    },
    submitHandler: function(form) {
        if (confirm("Are you sure you want to submit?")) {
    form.submit();
        }

这可以按照需要运行。

搜索页面显示所有“打开”表单的列表,允许您选择一个,它将在新的动态选项卡中打开其详细信息。

例如:

 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。

这也很有效。我现在正在查看带有旧表单详细信息的新动态选项卡。它只不过是用于创建的旧形式,但是从DB中填写了表格框。

如果我需要进行更改,我会进行更改,然后点击“更新”按钮。它执行与以前相同的验证,如果好的提交。

这就是废话的全部。此表单不提交并在我的动态标签中显示谢谢。此表单提交并显示感谢您在新URL中覆盖旧表单界面。例如,blah,blah,blah / update.cfm

我是jQuery的新手,我已经做了很多测试和搜索,并尝试和修修以获得我的位置,但我担心我已经达到了我的基本能力。

我希望我的更新页面只需使用更新确认信息刷新动态标签页。

帮助!

1 个答案:

答案 0 :(得分:0)

标准POST请求确实会指示浏览器呈现新页面。您正在寻找的是ajax提交。您可以根据需要使用成功回调根据结果操作DOM。

对于表单变量,您可以使用$('form').serialize()将所有表单字段转换为json对象以进行提交。有关详细信息,请参阅http://api.jquery.com/serialize/