Question

I need to know how to link (via a regular href anchor on a different page) to content that is inside a tab that is not the default tab. Can this be done? My code will explain hopefully what I require:

My Code:

The following is my profile_edit.php page:

The javascript:

<script src="Javascript/jquery-1.4.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
 $(function () {
 var tabContainers = $('div.tabs > div');
 tabContainers.hide().filter(':first').show();

 $('div.tabs ul.tabNavigation a').click(function () {
   tabContainers.hide();
   tabContainers.filter(this.hash).show();
   $('div.tabs ul.tabNavigation a').removeClass('selected');
   $(this).addClass('selected');
   return false;
 }).filter(':first').click();
 }); 
 $(function () {
    var tabs = [];
    var tabContainers = [];
    $('ul.tabs a').each(function () {
      // note that this only compares the pathname, not the entire url
      // which actually may be required for a more terse solution.
        if (this.pathname == window.location.pathname) {
            tabs.push(this);
            tabContainers.push($(this.hash).get(0));
        }
    });

    // sniff for hash in url, and create filter search 
    var selected = window.location.hash ? '[hash=' + window.location.hash + ']' : ':first'; 

    $(tabs).click(function () {
        // hide all tabs
        $(tabContainers).hide().filter(this.hash).show();

        // set up the selected class
        $(tabs).removeClass('selected');
        $(this).addClass('selected');

        return false;
    }).filter(selected).click();
});
</script>

The html and PHP (a portion):

<div class="tabs">
  <ul class="tabNavigation">
     <li><a href="#account_div">Account</a></li>
     <li><a href="#change_password_div">Password</a></li>
     <li><a href="#favorites_div">Favorites</a></li>
     <li><a href="#avatar_div">Avatar</a></li>
  </ul> 
  <div id="account_div">
     <?php include("personal_info_edit.php"); ?> 
     </div>
     <div id="change_password_div">
     <?php include("change_password.php"); ?> 
     </div>
     <div id="favorites_div">
     <?php include("favorites.php"); ?> 
     </div> 
     <div id="avatar_div">
     <?php include("avatar.php"); ?> 
     </div>
   </div>

The following is contained in my change_password_submit.php page:

$update_pass= ("Password changed successfully.");
header("location:profile_edit.php?update_pass=$update_pass#change_password_div"); 
exit();

By default, whenever profile_edit.php is loaded, the personal_info_edit div is shown and the others are hidden. What do I need to change in the code so that I can reference the 2nd div (ie. change_password div and hide the rest after someone changes their password?
Any help will be greatly appreciated.

Answer 1

This is perhaps not the most elegant solution, but it should work.

You can have PHP sniff your url variables for the existence of a particular variable. I’d probably call this something like ‘selectedTabId’ or something like that. Then, if that variable exists, you can have jQuery invoke the click action on that tab. You’ll want to use switch/case for this rather than just sending through whatever happens to be in the URL, as people can put nasty things there that you don’t want your jQuery to run. I won’t do that in my example below, for expediency’s sake.

This is a notional example…

<?php
if( array_key_exists('selectedTabId',$_GET) ){
  $selectedTabId = $_GET['selectedTabId'];
  echo "<script type=\"text/javascript\">";
  echo "jQuery(document).ready(function(){'#$selectedTabId').click()});";
  echo "</script>";
}
?>

Give that a shot and see if it works for you.