Submit jQuery tabs back on to itself
jQuery UI is a powerful set of interaction plugins for building RIA apps that run and the look the same across multiple browsers. Below is an example of using the tabs to hold multiple forms which submit back to themselves. The code is pretty straight forward and consists of two pages, the first one can even be a HTML page but the second one in my demo is a ColdFusion page to show the passed variables.
1 <html>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>Submit jQuery tabs back on to itself</title>
6 <!-- Use Google CDN for jquery files -->
7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
8 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
9 <!-- You can use Googles CDN for the themes as well -->
10 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />
11 <script>
12 $(document).ready(function(){
13 // set the tabs
14 $("#tabs").tabs();
15 // Capture the form's submit event
16 $('.inlineForm').live('submit', function() {
17 $.ajax({ // create an AJAX call...
18 data: $(this).serialize(), // get the form data
19 type: $(this).attr('method'), // GET or POST
20 url: $(this).attr('action'), // the file to call
21 success: function(response) { // on success..
22 $('.ui-tabs-panel:visible').html(response); // update the DIV
23 }
24 });
25 return false; // cancel original event to prevent form submitting
26 })
27 }); // END (DOCUMENT).READY
28 </script>
29 </head>
30 <body>
31 <div id="tabs">
32 <ul>
33 <li><a href="#tabs-1">Form 1</a></li>
34 <li><a href="#tabs-2">Form 2</a></li>
35 </ul>
36 <div id="tabs-1">
37 <!-- This is your first form. You could call this content in from Ajax?
38 Also note the class name which is the reference point for jQuery
39 -->
40 <form action="receive.cfm" method="get" class="inlineForm">
41 <input type="text" name="val1" value="" />
42 <input type="submit" name="submit" value="Submit Form 1" />
43 </form>
44 </div>
45 <div id="tabs-2">
46 <!-- This is your second form. You could call this content in from Ajax? -->
47 <form action="receive.cfm" method="get" class="inlineForm">
48 <input type="text" name="val2" value="" />
49 <input type="submit" name="submit" value="Submit Form 1" />
50 </form>
51 </div>
52 </div>
53 </body>
54 </html>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>Submit jQuery tabs back on to itself</title>
6 <!-- Use Google CDN for jquery files -->
7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
8 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
9 <!-- You can use Googles CDN for the themes as well -->
10 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />
11 <script>
12 $(document).ready(function(){
13 // set the tabs
14 $("#tabs").tabs();
15 // Capture the form's submit event
16 $('.inlineForm').live('submit', function() {
17 $.ajax({ // create an AJAX call...
18 data: $(this).serialize(), // get the form data
19 type: $(this).attr('method'), // GET or POST
20 url: $(this).attr('action'), // the file to call
21 success: function(response) { // on success..
22 $('.ui-tabs-panel:visible').html(response); // update the DIV
23 }
24 });
25 return false; // cancel original event to prevent form submitting
26 })
27 }); // END (DOCUMENT).READY
28 </script>
29 </head>
30 <body>
31 <div id="tabs">
32 <ul>
33 <li><a href="#tabs-1">Form 1</a></li>
34 <li><a href="#tabs-2">Form 2</a></li>
35 </ul>
36 <div id="tabs-1">
37 <!-- This is your first form. You could call this content in from Ajax?
38 Also note the class name which is the reference point for jQuery
39 -->
40 <form action="receive.cfm" method="get" class="inlineForm">
41 <input type="text" name="val1" value="" />
42 <input type="submit" name="submit" value="Submit Form 1" />
43 </form>
44 </div>
45 <div id="tabs-2">
46 <!-- This is your second form. You could call this content in from Ajax? -->
47 <form action="receive.cfm" method="get" class="inlineForm">
48 <input type="text" name="val2" value="" />
49 <input type="submit" name="submit" value="Submit Form 1" />
50 </form>
51 </div>
52 </div>
53 </body>
54 </html>
The second page should be called receive.cfm
1 <!-- This would process your form information and pass back a result to the user -->
2 <cfsetting showdebugoutput="false" />
3 <script>$("#dialog").dialog( {bgiframe: true, height: 140, modal: true} );</script>
4 <div id="dialog" title="Done!">
5 <p>Form submitted in to same tab</p>
6 </div>
7 <p>
8 <cfdump var="#url#" format="text" label="Url variables">
9 </p>
2 <cfsetting showdebugoutput="false" />
3 <script>$("#dialog").dialog( {bgiframe: true, height: 140, modal: true} );</script>
4 <div id="dialog" title="Done!">
5 <p>Form submitted in to same tab</p>
6 </div>
7 <p>
8 <cfdump var="#url#" format="text" label="Url variables">
9 </p>
