SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Evangelist
    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>
    So how do I target #tabAddClient2 from the original page (http://shrink-art.com/docTypes/worki...nts.php#tab1)?

  2. #2
    SitePoint Enthusiast
    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');
    Add another parameter which will tell popup which tab to open:
    Code JavaScript:
    javascript:newWin('popups.php?popupContent=addClient&openTab=insur');
    First add an 'id' attribute to 'a' tag on popup page:
    Code HTML4Strict:
    <a href="#tabAddClient2" id='insur' onclick="return false">Insurance</a>
    Then (on popup page) fire the JS code to open that tab:
    Code PHP:
    echo"<script type='text/javascript'>document.getElementById('".$_GET['openTab']."').onclick();</script>";

  3. #3
    SitePoint Evangelist
    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"); 
    And here's the function:

    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;

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

    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 -->
    I thought maybe I should change the function call like this:

    PHP Code:
    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?

  4. #4
    SitePoint Enthusiast
    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 12:35. Reason: added for function call

  5. #5
    SitePoint Evangelist
    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;
        } 
    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:

    PHP Code:
    g_goto("popups.php?popupContent=addClient&openTab=insur"); 
    I'm wondering if we need to use popups.php to set a variable - like maybe:

    PHP Code:
    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 Code:
    <?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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tryin_to_learn View Post
    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):
    Code HTML4Strict:
    <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:
    Code PHP:
    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:
    Code HTML4Strict:
    <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....

  7. #7
    SitePoint Evangelist
    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>
    popups.php has:
    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;
        } 
    addClient.tpl.php codes the tabs like this:
    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
    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?

  8. #8
    SitePoint Enthusiast
    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 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
    Attached Files Attached Files

  9. #9
    SitePoint Evangelist
    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.

  10. #10
    SitePoint Enthusiast
    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?

  11. #11
    SitePoint Evangelist
    Join Date
    Aug 2005
    Posts
    574
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bosko View Post
    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.
    Attached Files Attached Files

  12. #12
    SitePoint Enthusiast
    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();
    }
    Then the second switch block should look like this:
    Code PHP:
    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:
    Code HTML4Strict:
    <a href="#tabAddClient2" id="insur" onclick="return false">Insurance</a>
    Don't forget to put id's for rest of the anchor tabs.
    Works?

  13. #13
    SitePoint Evangelist
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •