SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: Need help targeting a tab
-
Jul 20, 2007, 18:49 #1
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Need help targeting a tab
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:
HTML Code:<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:
HTML Code:<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>
-
Jul 21, 2007, 03:34 #2
- Join Date
- Nov 2006
- Posts
- 99
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can do it by simulating onclick() on popup page. You're opening popup with:
Code JavaScript:javascript:newWin('popups.php?popupContent=addClient');
Code JavaScript:javascript:newWin('popups.php?popupContent=addClient&openTab=insur');
Code HTML4Strict:<a href="#tabAddClient2" id='insur' onclick="return false">Insurance</a>
Code PHP:echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";
-
Jul 21, 2007, 13:13 #3
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
PHP Code:g_goto("popups.php?popupContent=addClient");
Code: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:
PHP Code: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;
}
HTML Code:<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 -->
PHP Code:g_goto("popups.php?popupContent=addClient&openTab=insur");
-
Jul 21, 2007, 13:33 #4
- Join Date
- Nov 2006
- Posts
- 99
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Put it below your php switch block:
Code PHP: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.Last edited by bosko; Jul 21, 2007 at 13:35. Reason: added for function call
-
Jul 21, 2007, 15:00 #5
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
So have 2 switch statements in popups.php? One for the popupContent variable and another for the openTab variable? Like this?
PHP Code: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;
}
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:
PHP Code:g_goto("popups.php?popupContent=addClient&openTab=insur");
PHP Code:switch ($_GET['popupContent']) {
case "addClient":
$title = 'Add a New Client';
include_once(TEMPLATE_DIR."addClient.tpl.php");
$openTab="insur";
break;
PHP Code:<?php
if ($openTab=="insur") {
echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";
}
?>
I really appreciate your help, btw.
-
Jul 21, 2007, 16:52 #6
- Join Date
- Nov 2006
- Posts
- 99
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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):
Code HTML4Strict:<a href='second_page.php?a=1&b=2'>+</a>
I'm sending 2 parameters a=1 and b=2 to page 'second_page.php'.
On 'second_page.php' I have this code:
Code PHP:switch($_GET['a']){ case'1': include'mytabs.php'; break; ..... } switch($_GET['b']){ case'2': echo"<script>document.getElementById('test').onclick();</script>"; break; ..... }
Page 'mytabs.php' has this code:
Code HTML4Strict:<a href='#' id='test' onclick="alert('tab changed')">TABS</a>
Hope this will help....
-
Jul 22, 2007, 08:20 #7
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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:
PHP Code:<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>
PHP Code: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;
}
PHP Code:<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>
-
Jul 22, 2007, 09:48 #8
- Join Date
- Nov 2006
- Posts
- 99
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This looks ok, except the line with js. It should be:
Code PHP:echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";
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?
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
-
Jul 22, 2007, 19:07 #9
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 22, 2007, 23:53 #10
- Join Date
- Nov 2006
- Posts
- 99
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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?
-
Jul 23, 2007, 13:09 #11
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jul 25, 2007, 00:14 #12
- Join Date
- Nov 2006
- Posts
- 99
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, here's the solution. Put this function below your included js script on popups.php:
Code JavaScript:function switchTabs(tID, anch){ var loc = document.getElementById(tID); loc.onclick = function(){location.hash = anch; return false;}; loc.onclick(); }
Code PHP:switch($_GET['openTab']){ case'insur': echo"<script type='text/javascript'>switchTabs('".$_GET['openTab']."', 'tabAddClient2');</script>"; break; here more to check.... }
Code HTML4Strict:<a href="#tabAddClient2" id="insur" onclick="return false">Insurance</a>
Works?
-
Jul 27, 2007, 07:13 #13
- Join Date
- Aug 2005
- Posts
- 574
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
Bookmarks