Question

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.

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.

This is a snippet of the submit code:

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

and this works as desired.

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.

For example:

 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
}

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.

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

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.

Help!

Answer 1

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.

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.