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...
18data: $(this).serialize(), // get the form data
19type: $(this).attr('method'), // GET or POST
20url: $(this).attr('action'), // the file to call
21success: function(response) { // on success..
22$('.ui-tabs-panel:visible').html(response); // update the DIV
23}
24});
25return 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?
38Also 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...
18data: $(this).serialize(), // get the form data
19type: $(this).attr('method'), // GET or POST
20url: $(this).attr('action'), // the file to call
21success: function(response) { // on success..
22$('.ui-tabs-panel:visible').html(response); // update the DIV
23}
24});
25return 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?
38Also 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>
Comments
actually really helpful
thanks a lot
Mick
thanks a lot
Mick
Hello,
Is it possible to not do it inline and load it dynamically? I just have quite a bit of form information/tabs that I would not like loaded all into the page at one time... Also I'm using just one page and not two to submit the form and just using a <cfif isDefined("FORM.submit") AND FORM.submit NEQ "">...ect...
<div id="tabs">
<ul>
<li><a href="mypage.cfm"><span>Content 1</span></a></li>
<li><a href="#second-tab"><span>Content 2</span></a></li>
<li><a href="#third-tab"><span>Content 3</span></a></li>
</ul>
<div id="first-tab">
</div>
</div>
Is it possible to not do it inline and load it dynamically? I just have quite a bit of form information/tabs that I would not like loaded all into the page at one time... Also I'm using just one page and not two to submit the form and just using a <cfif isDefined("FORM.submit") AND FORM.submit NEQ "">...ect...
<div id="tabs">
<ul>
<li><a href="mypage.cfm"><span>Content 1</span></a></li>
<li><a href="#second-tab"><span>Content 2</span></a></li>
<li><a href="#third-tab"><span>Content 3</span></a></li>
</ul>
<div id="first-tab">
</div>
</div>
