Need help targeting a tab

[tryin_to_learn]

I have a site that uses nested tabs. From time to time, I need to load a page so that it opens with a tab other than the first one on top. For example, on this page, click on the Add Clients button (the "+" icon after the word "Clients"). It naturally opens with the Demographics tab on top, but what if I wanted to open it with the Insurance tab on top?

The URL for the original page (before you open the popup) is:

http://shrink-art.com/docTypes/worki...ients.php#tab1

#tab1 refers to the outer level of tabs (Clients/Sessions/Payments, Schedule, etc.).

The code to access it is like this:

<ul class="tabsetTabsMain">
			   <li class="mainTabs"><a href="
			   clients.php#tab1" class="active">Clients/Sessions/Payments</a></li>
				
			   <li class="mainTabs"><a href="
			   ../schedule/schedule.php#tab2">Schedule</a></li>
				
				<li class="mainTabs"><a href="
			   ../reports/reports.php#tab4">Reports/Statements/HCFA</a></li>
				
				<li class="mainTabs"><a href="
			   ../libraries/libraries.php#tab5">Libraries</a></li>

				
				<li class="mainTabs"><a href="
			   ../help/help.php#tab6">Help</a></li>
			</ul>

<div id="tab1" class="tabsetContent">
<h2 class="alignRightSmall">Client Information for</h2>
	<h2 class="tabset_label">Clients/Sessions/Payments</h2>
		
		<ul class="tabsetTabs">
		   <li><a href="#tabC1" class="active" onclick="return false">Active</a></li>

		   <li><a href="#tabC2" onclick="return false">Archived</a></li>
		</ul>	

		<div id="tabC1" class="tabsetContentNested">
etc.

The nested tabs (Active and Archived) are #tabC1 and #tabC2 so on the page above, what we're actually viewing is #tabC1. On the popup, the tabs are named like this:

	<ul class="tabsetTabs">
	   <li><a href="#tabAddClient1" class="active" onclick="return false">Demographics</a></li>
	   <li><a href="#tabAddClient2" onclick="return false">Insurance</a></li>
	   <li><a href="#tabAddClient3" onclick="return false">Family Info</a></li>
	   <li><a href="#tabAddClient4" onclick="return false">Medications</a></li>
	</ul>

So how do I target #tabAddClient2 from the original page (http://shrink-art.com/docTypes/worki...nts.php#tab1)?

[bosko]

You can do it by simulating onclick() on popup page. You're opening popup with:

javascript:newWin('popups.php?popupContent=addClient');

Add another parameter which will tell popup which tab to open:

javascript:newWin('popups.php?popupContent=addClient&openTab=insur');

First add an 'id' attribute to 'a' tag on popup page:

<a href="#tabAddClient2" id='insur' onclick="return false">Insurance</a>

Then (on popup page) fire the JS code to open that tab:

echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";

[tryin_to_learn]

This looks right but I'm having trouble seeing exactly how to implement it because of the way my files are set up. popups.php doesn't use the javascript:newWin thing to call this particular page because it happens on a form submission.

Here's the call:

g_goto("popups.php?popupContent=addClient"); 

And here's the function:

function g_goto($page) {
	if($_COOKIE[session_name()]) {
		$tmp = "Location: $page";
	} else {
		if(strstr($page, "?"))
			$tmp = "Location: $page&".session_name()."=".session_id();
		else
			$tmp = "Location: $page?".session_name()."=".session_id();
	}

	Header($tmp);
	exit;
}//g_goto

Then popups.php just calls include files, like this:

switch ($_GET['popupContent']) {

    case "addClient":
        $title = 'Add a New Client';
        include_once(TEMPLATE_DIR."addClient.tpl.php"); 
        break;
    case "editClient":
        $title = 'Edit an Existing Client';
        include_once(TEMPLATE_DIR."popups/editClient.tpl.php"); 
        break;
    case "archiveClient":
        $title = 'Archive One or More Existing Clients';
        include_once(TEMPLATE_DIR."popups/archiveClient.tpl.php"); 
        break;
} 

addClient.tpl.php has the HTML header and footer then has includes for the templates for the 4 tabs (the second tab is what I'm trying to access to access):

<ul class="tabsetTabs">
	   <li><a href="#tabAddClient1" class="active" onclick="return false">Demographics</a></li>
	   <li><a href="#tabAddClient2" id="insur" onclick="return false">Insurance</a></li>
	   <li><a href="#tabAddClient3" onclick="return false">Family Info</a></li>
	   <li><a href="#tabAddClient4" onclick="return false">Medications</a></li>
	</ul>
		
	<div id="tabAddClient1" class="tabsetContentNestedPopup">
		<h2 class="tabset_label">Demographics</h2>
		<?php include_once("addClientDemo.tpl.php"); ?>		
	</div> <!-- end tabAddClient1 -->
			
	<div id="tabAddClient2" class="tabsetContentNestedPopup">
		<h2 class="tabset_label">Insurance</h2>			
		<?php include_once("addClientInsurance.tpl.php"); ?>										
	</div> <!-- end tabAddClient2 -->
	
	<div id="tabAddClient3" class="tabsetContentNestedPopup">
		<h2 class="tabset_label">Family Info</h2>
		<?php include_once("addClientFamily.tpl.php"); ?>										
	</div> <!-- end tabAddClient3 -->		
	
	<div id="tabAddClient4" class="tabsetContentNestedPopup">								
		<h2 class="tabset_label">Medication</h2>		
		<?php include_once("addClientMeds.tpl.php"); ?>
	</div> <!-- end tabAddClient4 -->

I thought maybe I should change the function call like this:

g_goto("popups.php?popupContent=addClient&openTab=insur"); 

But then I wasn't sure what to do when I got to popups.php. I'm not sure where to put the getElementById part. Help?

[bosko]

Put it below your php switch block:

switch ($_GET['openTab']) {
    case "insur":
    echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";
    break;
....

Working?

And yes, you should change your function call because otherwise page popups.php wont get needed parameter to switch tab onload.

[tryin_to_learn]

So have 2 switch statements in popups.php? One for the popupContent variable and another for the openTab variable? Like this?

switch ($_GET['popupContent']) {
    case "addClient":
        $title = 'Add a New Client';
        include_once(TEMPLATE_DIR."addClient.tpl.php"); 
        break;
etc.
}

switch ($_GET['openTab']) {
    case "insur":
    echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";
    break;
    } 

How will popups.php know to check both of the switch statements?

I tried it that way and it didn't work. I also tried putting the getElementById part in with the first switch statement, but it still didn't do anything. Could the problem be with the function call? I tried it this way but somehow it doesn't look right:

g_goto("popups.php?popupContent=addClient&openTab=insur"); 

I'm wondering if we need to use popups.php to set a variable - like maybe:

switch ($_GET['popupContent']) {
    case "addClient":
        $title = 'Add a New Client';
        include_once(TEMPLATE_DIR."addClient.tpl.php"); 
        $openTab="insur";
        break; 

Then maybe do something on addClient.tpl.php like:

<?php 
    if ($openTab=="insur") {
    echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";
    }
?>

I tried it like that, though, and that didn't work either so obviously I'm doing something wrong.

I really appreciate your help, btw.

[bosko]

How will popups.php know to check both of the switch statements?

Why not? In first Switch it's looking for a match. When finds it, it goes out of switch block(break) and continue to second Switch...
This is a simplified version of your problem:
On first page you have a link(in your case a + sign):

<a href='second_page.php?a=1&b=2'>+</a>

which will open a popup window with desired tab opened.
I'm sending 2 parameters a=1 and b=2 to page 'second_page.php'.
On 'second_page.php' I have this code:

switch($_GET['a']){
  case'1':
  include'mytabs.php';
  break;
.....
}
switch($_GET['b']){
  case'2':
  echo"<script>document.getElementById('test').onclick();</script>";
  break;
.....
}

I'm testing arrived parameters. First Switch finds match and include a page 'mytabs.php' to current page (second_page.php). After that we're testing second Switch and also find match which is executing a JS code. This code finds tag with an id 'test' and fire onclick() on it.
Page 'mytabs.php' has this code:

<a href='#' id='test' onclick="alert('tab changed')">TABS</a>

It just alerts a message. In your case it will change to desired tab.
Hope this will help....

[tryin_to_learn]

This is helpful. I'm really learning a lot, which I like. I still can't get it to work, though. I tried simplifying it by removing the function and just going straight from the page with the "+" on it, like in your example.

So that page is clients.php (includes from that page) and it now has:

<a href="javascript:newWin('popups.php?popupContent=addClient&openTab=insur');" title="Add Client"><img src="<?php echo URL;?>_images/addIcon.gif" alt="Add Client" /></a>

popups.php has:

switch ($_GET['popupContent']) {
    case "addClient":
        $title = 'Add a New Client';
        include_once(TEMPLATE_DIR."addClient.tpl.php"); 
        $openTab="insur";
        break;
etc.
}

switch ($_GET['openTab']) {
    case "insur":
    echo"<script type='text/javascript'>document.getElementById('".$_GET['insur']."').onclick();</script>";
    break;
    } 

addClient.tpl.php codes the tabs like this:

<ul class="tabsetTabs">
       <li><a href="#tabAddClient1" class="active" onclick="return false">Demographics</a></li>
       <li><a href="#tabAddClient2" id="insur" onclick="return false">Insurance</a></li>
       <li><a href="#tabAddClient3" onclick="return false">Family Info</a></li>
       <li><a href="#tabAddClient4" onclick="return false">Medications</a></li>
    </ul> 

Do I have something wrong? The other thing I wondered about is that the tabs have their own .js files to make them work. Is it possible that something in there is overwriting or nullifying your code?

[bosko]

This looks ok, except the line with js. It should be:

echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";

The name of parameter should be $_GET['openTab'] not $_GET['insur'].

The other thing I wondered about is that the tabs have their own .js files to make them work. Is it possible that something in there is overwriting or nullifying your code?

Well, I don't know. Maybe it's possible.
I'm sending you as attachment a source codes, 3 pages with your problem simplified. Just put it in same directory and start with first_page.htm

[tryin_to_learn]

I changed the $_GET[] variable -- still didn't work. The attachment hasn't been cleared yet so I'll check back tomorrow. Thanks again for the help.

[bosko]

Did you tried ti debug it somehow? Try to make sure that parameter openTab came to popups.php. Use somewhere on popups.php echo $_GET['openTab'] to see if it's there. Can you download attachment?

[tryin_to_learn]

Did you tried ti debug it somehow? Try to make sure that parameter openTab came to popups.php. Use somewhere on popups.php echo $_GET['openTab'] to see if it's there. Can you download attachment?

Yes, it's getting to both popupContent and openTab, so that part's working. I got your attachment earlier this morning and have been playing with it. I added the scripts for my tabs in case that's what's messing things up. It does trigger the alert, but doesn't actually fire the tab even after you dismiss the alert. Are we missing something to tell it to actually open the second tab once it finds it?

I've attached what you sent me with the extra js scripts and the styles so you can see what's happening. I really do appreciate the help. This is beyond me.

[bosko]

Ok, here's the solution. Put this function below your included js script on popups.php:

function switchTabs(tID, anch){
  var loc = document.getElementById(tID);
  loc.onclick = function(){location.hash = anch; return false;};
  loc.onclick();
}

Then the second switch block should look like this:

switch($_GET['openTab']){
  case'insur':
  echo"<script type='text/javascript'>switchTabs('".$_GET['openTab']."', 'tabAddClient2');</script>";
  break;
here more to check....
}

and anchor tab should look look like this:

<a href="#tabAddClient2" id="insur" onclick="return false">Insurance</a>

Don't forget to put id's for rest of the anchor tabs.
Works?

[tryin_to_learn]

YES! This works like a charm bosko! Thank you so much for your help. I was really about to throw in the towel over this one.

Thanks again.