CODEWITHSUNDEEP
jquery
Bucks
Bucks

Reputation: 687

Hiding li tag in jquery

i bulid a drop down menu using li and ul html tag but now i want to hide some menu depends on user level

CODE:

<li id="20"><a href="#">File Generation<br /></a>
                        <ul class="subload"> 
                            <li id="21" ><a href="#">Generate Files<br/></a></li>
                            <li id="22" ><a href="#">Reprocess<br/></a></li>
                            <li id="23" ><a href="#">File Regenerate<br/></a></li>
                            <li id="24" ><a href="#">File Status<br/></a></li>
                        </ul></li>

I tried 

$(document).ready(function() {
                $("li #20").hide();

                $("body").on({
                    ajaxStart: function() {
                        $(this).addClass("loading");
                    },
                    ajaxStop: function() {
                        $(this).removeClass("loading");
                    }
                });

                var theForm = $("form[name=MenuBean]");
                var params = theForm.serialize();
                var actionURL = theForm.attr("action");
                $.ajax({
                    type: "POST",
                    url: actionURL + "?name='Anand'",
                    data: params,
                    success: function(data, textStatus, XMLHttpRequest) {
                        alert("Success : " + data);
                        var tmp = data.split("|");
                        for (i = 0; i < tmp.length; i++) {
                            $("li #"+tmp[i]).show();
                        }
                        if (data == "success") {
                        } else {
                            $("#ajaxresult").show().html(data).fadeIn(1000);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, data) {
                        alert("Error : " + data);
                    }
                });
                //event.preventDefault();
            });

but its not working properly..

Upvotes: 0

Views: 76

Answers (3)

Somnath Kharat
Somnath Kharat

Reputation: 3610

Remove space:

Change from:

$("li #"+tmp[i]).show();

TO

$("li#"+tmp[i]).show();

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Remove the spaces in your selectors. <li id="20"> would be selected with $("li#20"), not $("li #20").

$("li #20") is looking for an element with an ID of 20 inside an li.

Realistically though, you don't need li in the selector if you're using an ID, as there should only be 1 element with that ID.

Also, CSS doesn't like IDs that begin with numbers, so you won't be able to reference any of these elements by ID in a stylesheet. If that's an issue then you should change them to something more descriptive.

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

Your selector $("li #"+tmp[i]).show(); is wrong. Your selector is looking for an element with id x which is a decedent of a li element.

Since you have the element id there is no need to use element selector and id selector.

it should be

$("#"+tmp[i]).show();

Upvotes: 0

Related Questions