We help IT Professionals succeed at work.

JQuery open another TAB with form button

Tony Pearce
Tony Pearce used Ask the Experts™
on
Hi I have two TABs defined as:

                  <ul>
                        <li><a href="#tabs-1">Select Category</a></li>
                        <li><a href="#tabs-2">Now Select Sub Category</a></li>
            
                  </ul>

In #tabs-1 I have a form that submits to #tabs-2, When the form button in tab-1 is clicked I would like tab-2 to become active, the closest code is below:

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});


Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Shinesh PremrajanEngineering Manager

Commented:
var ntabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    ntabs.tabs('select', 2); // switch to third tab
    return false;
});

$tabs is a PHP variable definitions

Hope this helps
Top Expert 2010

Commented:
Can you post Your complete code? It will be easier to understand what You use, how do You reference it, etc.

Regards

Author

Commented:
Where does the :
var ntabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    ntabs.tabs('select', 2); // switch to third tab
    return false;
});

code go?
		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Select Category</a></li>
				<li><a href="#tabs-2">Now Select Sub Category</a></li>
		
			</ul>
			<div id="tabs-1">



<form id="form1" name="form1" method="post" action="index.php">
  <select name="catar" size="5" id="catar">
    <?php
do {  
?>
    <option value="<?php echo $row_listcats['nSectionID']?>"><?php echo $row_listcats['Section text']?></option>
    <?php
} while ($row_listcats = mysql_fetch_assoc($listcats));
  $rows = mysql_num_rows($listcats);
  if($rows > 0) {
      mysql_data_seek($listcats, 0);
	  $row_listcats = mysql_fetch_assoc($listcats);
  }
?>
  </select>
  <input type="submit" name="getsubs" id="getsubs" value="Submit" />
</form></div>
			
<?php if ($totalRows_getsubcats > 0) { // Show if recordset not empty ?>
<div id="tabs-2">
  <form id="form2" name="form2" method="post" action="index.php">
    <select name="catar2" size="5" id="catar2">
      <?php
do {  
?>
      <option value="<?php echo $row_getsubcats['searchtext']?>"><?php echo $row_getsubcats['Section text']?></option>
      <?php
} while ($row_getsubcats = mysql_fetch_assoc($getsubcats));
  $rows = mysql_num_rows($getsubcats);
  if($rows > 0) {
      mysql_data_seek($getsubcats, 0);
	  $row_getsubcats = mysql_fetch_assoc($getsubcats);
  }
?>
    </select>
    <input type="submit" name="getproducts" id="getproducts" value="Submit" />
  </form></div>
		
			
  <?php } // Show if recordset not empty ?>
</div>

Open in new window

Shinesh PremrajanEngineering Manager

Commented:
it can be placed any where in the page no issue, best is at the bottom of the page.



		<div id="tabs">
			<ul>
				<li><a href="#tabs-1">Select Category</a></li>
				<li><a href="#tabs-2">Now Select Sub Category</a></li>
		
			</ul>
			<div id="tabs-1">



<form id="form1" name="form1" method="post" action="index.php">
  <select name="catar" size="5" id="catar">
    <?php
do {  
?>
    <option value="<?php echo $row_listcats['nSectionID']?>"><?php echo $row_listcats['Section text']?></option>
    <?php
} while ($row_listcats = mysql_fetch_assoc($listcats));
  $rows = mysql_num_rows($listcats);
  if($rows > 0) {
      mysql_data_seek($listcats, 0);
	  $row_listcats = mysql_fetch_assoc($listcats);
  }
?>
  </select>
  <input type="submit" name="getsubs" id="getsubs" value="Submit" />
</form></div>
			
<?php if ($totalRows_getsubcats > 0) { // Show if recordset not empty ?>
<div id="tabs-2">
  <form id="form2" name="form2" method="post" action="index.php">
    <select name="catar2" size="5" id="catar2">
      <?php
do {  
?>
      <option value="<?php echo $row_getsubcats['searchtext']?>"><?php echo $row_getsubcats['Section text']?></option>
      <?php
} while ($row_getsubcats = mysql_fetch_assoc($getsubcats));
  $rows = mysql_num_rows($getsubcats);
  if($rows > 0) {
      mysql_data_seek($getsubcats, 0);
	  $row_getsubcats = mysql_fetch_assoc($getsubcats);
  }
?>
    </select>
    <input type="submit" name="getproducts" id="getproducts" value="Submit" />
  </form></div>
		
			
  <?php } // Show if recordset not empty ?>
</div>

<script>
var ntabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    ntabs.tabs('select', 2); // switch to third tab
    return false;
});
</script/>

Open in new window

Author

Commented:
Hi,

I the code :

var ntabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
    ntabs.tabs('select', 2); // switch to third tab
    return false;
});

Where do I place the tabs-1 abd tabs-2 , also how do I fire this from the form,

Sorry this is way above my at the mo and it's a steep learning curve...
Shinesh PremrajanEngineering Manager

Commented:
Its already there,

Hope this helps
<div id="tabs">
<ul>
<li><a href="#tabs-1">Select Category</a></li>
<li><a href="#tabs-2">Now Select Sub Category</a></li>	
</ul>
<div id="tabs-1"> your first page contents here</div>
<div id="tabs-2"> your second page contents here</div>

Open in new window

Engineering Manager
Commented:
</div>
sorry you need to add the closing tag as well in the end of the page, else this wont work for you.

Author

Commented:
Thanks for a great lesson...