Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Alternative to TabContainer

Posted on 2011-09-21
10
Medium Priority
?
1,157 Views
Last Modified: 2012-05-12

I was using the TabContainer but I can't get it to display.  It's visibility is always set to hidden.
I have no idea why this is happening or what I can do to get it working so I am trying to figure out a light weight alternative to the ajax tabcontainer.
I currently have made an unordered list for the tabs and then thought that instead of using a multi-view or wizard, I would use divs, setting display:none, display:block.
If this is not a good idea PLEASE tell me why.
I wrote the javascript, very new to js, and tried my idea out.  Well the divs don't hide and the tabs don't change color, in other words, nothing works.
What can I do to make this work?
Thanks



<div id="tabpanels">

  <ul id="navbartabs" enableviewstate="true">
      <li id="0" class="vTabOver" onload="javascript:DoTabClick(this)" onclick="javascript:SetBackColor(this)">Schedules</li>
      <li id="1" class="vTab" onclick="javascript:SetBackColor(this)">Services</li>
      <li id="2" class="vTab" onclick="javascript:SetBackColor(this)">Formulas</li>
      <li id="3" class="vTab" onclick="javascript:SetBackColor(this)">Before/After</li>
      <li id="4" class="vTab" onclick="javascript:SetBackColor(this)">Products</li>
      <li id="5" class="vTab" onclick="javascript:SetBackColor(this)">Totals</li>
 </ul>

<div class="formclear"></div>
  <div id="div_0">
div 0
</div>
<div id="div_1">
div 1
</div>
<div id="div_2">
div 3
</div>...
</div>

<script type="text/javascript">
   function DoTabClick(obj) {
     setbackcolor(obj)
   
   }
   function SetBackColor(obj) {

      var ul = document.getElementById("navbartabs");
      var items = ul.getElementsByTagName("li");
      for (var i = 0; i < items.length; ++i) {
         items[i].style.color = '#000000';
         items[i].style.backgroundColor = '#b9d0ff';
      }
      items(obj.id).style.color = '#FFFFFF';
      items(obj.id).style.backgroundColor = '#000000';  
            showhidedivs(obj.id)
      }
      function showhidedivs(itemindex) {
         var hi = document.getElementById('ctl00_ContentPlaceHolder1_HiTabSelected');
         hi.value = itemindex;
         var divmain = document.getElementById("tabpanels");
         var div = divmain.getElementById("div");
         for (var i = 0; i < div.length; ++i) {
            div[i].style.display = "none"
         }
         var divshow = document.getElementById("div_" + itemindex);
         for (var d = 0; i < divshow.length; ++i) {
            div[i].style.display = "block"
         }
  
      } 
</script>

Open in new window

0
Comment
Question by:Sheritlw
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36577370
A couple of things that jump out at me without diving deeper:

The id attribute must begin with a letter. See the HTML 4.01 specifications.
Javascript function names are case specific. You have a function defined as "SetBackColor" but you are referring to a function named "setbackcolor" in the function "DoTabClick". Is there also a lower case version of this function?
0
 

Author Comment

by:Sheritlw
ID: 36577509
Thank you for your response.  I corrected my mistakes, but it still doesn't work.
Any ideas?

Thanks
<script type="text/javascript">
   function DoTabClick(obj) {
     SetBackColor(obj)
   }
   function SetBackColor(obj) {

      var ul = document.getElementById("navbartabs");
      var items = ul.getElementsByTagName("li");
      for (var i = 0; i < items.length; ++i) {
         items[i].classname = "vTab";

      }
      var id = obj.id;
      obj.classname = "vTabOver";
            showhidedivs(id)
      }
      function showhidedivs(itemindex) {
         var hi = document.getElementById('ctl00_ContentPlaceHolder1_HiTabSelected');
         hi.value = itemindex;
         var divmain = document.getElementById("tabpanels");
         var div = divmain.getElementById("div");
         for (var i = 0; i < div.length; ++i) {
            div[i].style.display = "none"
         }
         var divshow = document.getElementById("div_" + itemindex);
         for (var d = 0; i < divshow.length; ++i) {
            div[i].style.display = "block"
         }
  
      } 
</script>

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36578024
You didn't say what you changed the ids to on your li elements. Since you can't have a number as the first character in an id, I changed them to "a0" through "a5". Because of the additional character in the name, I changed line 15 to:

showhidedivs(id.charAt(1) );

Open in new window


"classname" should be "className". (lines 10 and 14)

Both of the above changes were academic since most browsers would forgive these errors.

The most important error is on line 21 which should be a getElementsByTagName instead of a getElementById.

var div = divmain.getElementsByTagName("div");

Open in new window


0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:Sheritlw
ID: 36578166

Hi xmediaman,

I corrected my mistakes and now it will load but all the panels will show and when I click on a tab the css is no longer applied and no panels show.
I renamed the li's to li_0, li_1, li_2 etc.
I really appreciate your help, it is hard when you are first learning something.
Any ideas?

Thanks
<ul id="navbartabs" enableviewstate="true">
      <li id="li_0" class="vTabOver" onload="javascript:DoTabClick(this)" onclick="javascript:SetBackColor(this)">Schedules</li>
      <li id="li_1" class="vTab" onclick="javascript:SetBackColor(this)">Services</li>
      <li id="li_2" class="vTab" onclick="javascript:SetBackColor(this)">Formulas</li>
      <li id="li_3" class="vTab" onclick="javascript:SetBackColor(this)">Before/After</li>
      <li id="li_4" class="vTab" onclick="javascript:SetBackColor(this)">Products</li>
      <li id="li_5" class="vTab" onclick="javascript:SetBackColor(this)">Totals</li>
 </ul>





<script type="text/javascript">
   function DoTabClick(obj) {
     SetBackColor(obj)
   }
   function SetBackColor(obj) {
      var ul = document.getElementById("navbartabs");
      var items = ul.getElementsByTagName("li");
      for (var i = 0; i < items.length; ++i) {
         items[i].className += "vTab";
      }
      obj.className += "vTabOver";
            showhidedivs(obj)
      }
      function showhidedivs(obj) {
         var hi = document.getElementById('ctl00_ContentPlaceHolder1_HiTabSelected');
         var itemindex = obj.selectedindex;
         hi.value = itemindex;
         var divmatch = 'div_' + itemindex;
         var divmain = document.getElementById("tabpanels");
         var div = divmain.getElementsByTagName("div");
         for (var i = 0; i < div.length; ++i) {
            if (i == itemindex) {
               var divshow = document.getElementById(divmatch);
               for (var d = 0; d < divshow.length; ++d) {
                  divshow[d].style.display = "block";
               }
            }
            else {
               div[i].style.display = "none";
            }
         }
         return false;
      } 
</script>

Open in new window

0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36579725
There's a lot more at play here than what you're showing me so I have to assume a lot. Since lines 22 and 24 both deal with the class name, I expect they are what's causing your current grief. Both of these lines use the += operator which means the strings are being concatenated to the end of the class name each time. I doubt that is your intention. This would cause your class name to get continuously longer each time you clicked on one of the list items and would require you to have lots of different combinations of class names in your CSS. Try changing those to simple = operators.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 36579827
Can you provide a link to the page so I can see all the elements involved at work? I especially need to see the CSS and the select object involved in the javascript function.
0
 

Author Comment

by:Sheritlw
ID: 36581855
Hi xmediaman,

I uploaded the project http://service2020.com/Stylist/Client_Services.aspx
The login is test@smsmain.com and the password is YrS2[3|B)t+K*C
I've been using the developer tools with IE trying to debug this and have made some good changes, I think.
The tab part is working now, but I still can't get the divs to show when the tab is clicked on.
The debugger shows it setting the display correctly, but it doesn't show.
The css is at http://service2020.com/CSS/main.css
Thanks again for your help. I do really appreciate it.
0
 
LVL 22

Accepted Solution

by:
Kim Walker earned 2000 total points
ID: 36584114
It may be a simple case of closing the wrong tag. Your code was difficult for me to follow; I'm sure it is doubly difficult for you if you're new at this. You need to use a system of indents with each new tag and reduce the indent with each closing tag. This will help determine when you have nesting problems.

I believe the problem in this case is that you've closed a td tag instead of closing a div. As it is, divs_1-5 are nested inside div_0 so that when div_0 is hidden, all the divs contained within it (including divs_1-5) are also hidden.

Eight lines above your div_1 is a closing div tag and a closing td tag. I believe the closing td tag was actually supposed to have been another closing div tag because I couldn't find an open td at that point:
	</div></td>

Open in new window


That may fix your current problems. The individual div_1-5 tags are getting the correct class names when the tabs are clicked, but because they're contained within the hidden div_0, they, too, are hidden.

Good luck.
0
 

Author Comment

by:Sheritlw
ID: 36584451
You are GREAT!

Usually the code is formatted, but when using the Ajax TabContainer it would scrunch my code and add in multiple spaces, &nbsp; and numerous empty lines.
After a several times of fixing the layout and then realizing that the control didn't show I switched to the list with divs.
I thank you so much for your help...

Sheri
0
 

Author Closing Comment

by:Sheritlw
ID: 36584454
Very helpful!
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question