Submit jQuery tabs back on to itself

Posted At : January 26, 2010 9:16 AM | Posted By : Andy Jarrett
Related Categories: ColdFusion, jQuery

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.

view plain print about

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Submit jQuery tabs back on to itself</title>
<!-- Use Google CDN for jquery files -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
<!-- You can use Googles CDN for the themes as well -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" type="text/css" />
<script>
$(document).ready(function(){
// set the tabs
$("#tabs").tabs();
// Capture the form's submit event
$('.inlineForm').live('submit', function() {
$.ajax({ // create an AJAX call...
data: $(this).serialize(), // get the form data
type: $(this).attr('method'), // GET or POST
url: $(this).attr('action'), // the file to call
success: function(response) { // on success..
$('.ui-tabs-panel:visible').html(response); // update the DIV
}
});
return false; // cancel original event to prevent form submitting
})
}); // END (DOCUMENT).READY
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Form 1</a></li>
<li><a href="#tabs-2">Form 2</a></li>
</ul>
<div id="tabs-1">
<!-- This is your first form. You could call this content in from Ajax?
Also note the class name which is the reference point for jQuery
-->
<form action="receive.cfm" method="get" class="inlineForm">
<input type="text" name="val1" value="" />
<input type="submit" name="submit" value="Submit Form 1" />
</form>
</div>
<div id="tabs-2">
<!-- This is your second form. You could call this content in from Ajax? -->
<form action="receive.cfm" method="get" class="inlineForm">
<input type="text" name="val2" value="" />
<input type="submit" name="submit" value="Submit Form 1" />
</form>
</div>
</div>
</body>
</html>

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

view plain print about

<!-- This would process your form information and pass back a result to the user -->
<cfsetting showdebugoutput="false" />
<script>$("#dialog").dialog( {bgiframe: true, height: 140, modal: true} );</script>
<div id="dialog" title="Done!">
<p>Form submitted in to same tab</p>
</div>
<p>
<cfdump var="#url#" format="text" label="Url variables">
</p>

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