Dynamically change the class according to the variables

[Sumer Selvaraj]

Hi,

I'm developing a Web application. As you see the picture I kept the menus as tabs in a separate file and called it to the main page using

<jsp:include page="banner.jsp"></jsp:include>

code.


there is no issue in it. I wanted to change the tabs classes according to the variables in the URL. I gave a try with javascript & jquery but it didn't work.

Banner File

<style type="text/css">
    /**************************
                    Banner
    **************************/
    .logout{
        background-color: #bd3f09;
        position:relative;
        width:75px;
        height:25px;
        margin-left:auto;
        margin-right:0px;
        margin-top:33px;
    }

    .logout a{
        width:30px;
        position:relative;
        height: 10px;
        margin-top:100px;
        color:#f7f6f0;
    }

    .logout a:hover{
        color:#FFF;
    }

</style>

<h2>Document Management & Management Information System</h2>
<div class="logout">
    <table border="0"  >
         <tr>
             <td><a >Sign Out</a></td>
         </tr>
     </table>

</div>
<%
    session.setAttribute("privilege", 'a');
%>

<div id="topmenu">
    <ul id="tabs_root">
        <li id="tabs" class="current"><a >Home</a></li>
        <li id="tabs"><a >Create Shipment</a></li>
        <li id="tabs"><a >Search</a></li>
        <li id="tabs"><a >Manage</a></li>
        <li id="tabs"><a >CMS</a></li>
        <li id="tabs"><a >Statistics</a></li>
        <%
            try {
                if (session.getAttribute("privilege").toString().charAt(0) == 'a') {
                    out.print("<li><a href=\"#\">User Management</a></li>");
                }
            } catch (Exception e) {
            }
        %>
        <li><a >Settings</a></li>
    </ul>
</div>

Javascript File

// JavaScript Document

//this is the script to check which tab has been opened, so then it'll add the css class for the tab
$(document).ready(function(e) {
    var page_head = getUrlVars()["page_head"];
	
	$('#tabs_root').each(function(index, element) {
        	element.removeClass('current');
		if(element==page_head){
			element.addClass('current');
		}
    });
});

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}

I want to change add the current class the tabs which selected. Can some one help on this???

[Bear Bibeault]

At what point is it going wrong? Are the "parts" as you expected after the regex? Why are you using the replace() method?

Open the debugging console in your browser and set breakpoints in the code. That way you can look at the value of variables and find out at what point it is going wrong. Why guess when you can actually inspect the variable at run time?

[Sumer Selvaraj]

Bear Bibeault wrote:At what point is it going wrong? Are the "parts" as you expected after the regex? Why are you using the replace() method?

Open the debugging console in your browser and set breakpoints in the code. That way you can look at the value of variables and find out at what point it is going wrong. Why guess when you can actually inspect the variable at run time?

There is no issue in getUrlVars() method. It returns the URL variables. I'm quite sure there is something wrong with the

$('#tabs_root').each(function(index, element) {  
            element.removeClass('current');  
        if(element==page_head){  
            element.addClass('current');  
        }  
    }); 

code

[Bear Bibeault]

Please make sure that the code you post is properly indented.

Did you open the debugging console? What error messages did you get?

[Sumer Selvaraj]

Bear Bibeault wrote:Please make sure that the code you post is properly indented.

Did you open the debugging console? What error messages did you get?

I've got the following error message on the console

Uncaught TypeError: Object #<HTMLUListElement> has no method 'removeClass' common_javascript.js:8
Got message from bg page - https://mail.google.com/mail/?view=cm&fs=1&tf=1 mailto.js:51
Starting to rewrite mailtos

[Sumer Selvaraj]

Bear Bibeault wrote:Please make sure that the code you post is properly indented.

Did you open the debugging console? What error messages did you get?

Further I have changed the script as follows

$(document).ready(function(e) {
    var page_head = getUrlVars()["page_head"];
	element.removeClass('current');
	$('#tabs').each(function(index, element) {
		if(element==page_head){
			element.addClass('current');
		}
    });
});

And now I am getting error as : "Uncaught ReferenceError: element is not defined"

[Bear Bibeault]

Elements do not have an addClass method. You need to wrap the element with jQuery to use jQuery methods. E.g. $(element).addClass()

[Sumer Selvaraj]

Bear Bibeault wrote:Elements do not have an addClass method. You need to wrap the element with jQuery to use jQuery methods. E.g. $(element).addClass()

Thank you. I worked

[Sumer Selvaraj]

Found a solution for this problem. I was coming around the bush. Now I've hit the bush. The following code helped me to overcome this issue

//this is the script to check which tab has been opened, so then it'll add the css class for the tab
$(document).ready(function(e) {
    var page_head = getUrlVars()["page_head"];
	try{
		$('#tabs').removeClass('current');
		$('#tabs_root > li:nth-child('+page_head+')').addClass('current');

	}catch(err){
	}
});