I am using javascript to hide some list Items based on the user role.

I am getting the role from a list item's text(). When I am comparing the $("#activeUser").text() value against a string, it is not working.

HTML Block that I am using in my javascript to get the text() value of a list item.

<ul class="pull-right breadcrumb">
    <li><a href="index.php">Home</a>  <span class="divider">/</span> </li>
    <li id="activeUser" class="active"> <?php echo ucfirst($_SESSION['sewafs_user_role']);  ?> </li>
</ul>

Javascript

$(document).ready(function () {
    var testRole = $("#activeUser").text();

    //This block of code works
    role = 'Guest';
    if (role == 'Guest') {
        alert("Inside if");
        $("#request_history_li").hide();
        $("#assign_role_li").hide();
        $("#volunteer_li").hide();
        $("#profile_li").show();
        $("#change_password_li").show();

    }

    //This doesn't work why?
    if (testRole == 'Guest') {
        alert("Inside if");
        $("#request_history_li").hide();
        $("#assign_role_li").hide();
        $("#volunteer_li").hide();
        $("#profile_li").show();
        $("#change_password_li").show();

    }

});

But if I see the value of the var testRole using alert it prints Guest.

I tried converting the testRole value into string using testRole.toString() / string(testRole) method, but nothing helped.

Please let me know, where I am going wrong. Thanks.

I am using javascript to hide some list Items based on the user role.

I am getting the role from a list item's text(). When I am comparing the $("#activeUser").text() value against a string, it is not working.

HTML Block that I am using in my javascript to get the text() value of a list item.

<ul class="pull-right breadcrumb">
    <li><a href="index.php">Home</a>  <span class="divider">/</span> </li>
    <li id="activeUser" class="active"> <?php echo ucfirst($_SESSION['sewafs_user_role']);  ?> </li>
</ul>

Javascript

$(document).ready(function () {
    var testRole = $("#activeUser").text();

    //This block of code works
    role = 'Guest';
    if (role == 'Guest') {
        alert("Inside if");
        $("#request_history_li").hide();
        $("#assign_role_li").hide();
        $("#volunteer_li").hide();
        $("#profile_li").show();
        $("#change_password_li").show();

    }

    //This doesn't work why?
    if (testRole == 'Guest') {
        alert("Inside if");
        $("#request_history_li").hide();
        $("#assign_role_li").hide();
        $("#volunteer_li").hide();
        $("#profile_li").show();
        $("#change_password_li").show();

    }

});

But if I see the value of the var testRole using alert it prints Guest.

I tried converting the testRole value into string using testRole.toString() / string(testRole) method, but nothing helped.

Please let me know, where I am going wrong. Thanks.

• javascript
• jquery

5 Answers 5

The problem seems to be extra white-spaces in the value that you receive from $("#activeUser").text()

Solution: You must trim the value and then use it for comparison as:

var testRole = $("#activeUser").text().trim();

OR

var testRole = $.trim($("#activeUser").text());

OR

var testRole = $("#activeUser").text();
testRole = $.trim(testRole);

Any of the above will work.

More info on jQuery trim at this link.

Whitespace test:
If you want to test if you are getting extra white spaces, then try below javascript code:

alert("-" + $("#activeUser").text() + "-");

If you get "" then you dont have whitespaces in your received value. But if you get spaces after < or before >, then these are white spaces, that are spoiling your party.

Try trimming the string, with $.trim($("#activeUser").text()); There seem to be whitespaces in your element.

You need to trim white spaces at start and end of the string:

var testRole = $("#activeUser").text().replace(/^\s+|\s+$/g,'');

You can see why here: http://jsfiddle.net/AfUZR/1/

Demo

$(document).ready(function () {
        var testRole = $("#activeUser").text().trim();    
        //This doesn't work why?
        if (testRole == "Guest") {
            alert("Inside if");
            $("#request_history_li").hide();
            $("#assign_role_li").hide();
            $("#volunteer_li").hide();
            $("#profile_li").show();
            $("#change_password_li").show();

        }

    });

Man, first what do you must do it, it's write correct selector.

$("#request_history_li").hide();
$("#assign_role_li").hide();

you can write

$("#request_history_li, #assign_role_li").hide();

or you can add the same classes of these Elements, that is correct

<ul>
    <li class="same_class 1"></li>
    <li class="same_class 2"></li>
</ul>

and

$(".same_class").hide();

ok? next:

As concerns your problem, js loaded earlier than you determine the role of, use

$(document).ready(function(){
  ......
});