how to manipulate, on document.ready, elements which were created on document.ready

Question

Here's the scenario: I have a menubar.js script, which, when the page loads, queries the server for user's permissions, and then creates a menubar based on them. code snippet:

$(function () {
    //initialize the header buttons according to user's permissions
    InitializeCurrentUser();
});

function InitializeCurrentUser() {
    //get current user
    $.ajax(
            {
                url: "../Login/LoginService.asmx/GetCurrentUser",
                success: function (result) {
                    var currentUserRoles = result.d;
                    output = '<ul class="Header">   ';
                    if ($.inArray("reports", currentUserRoles) > -1) {
                    output += '<a href="../Reports/Reports.aspx" ><li id="lnkReports">Reports </li></a>';
                    }
                    //etc...
                    console.log('generating menu');
                    $("#HeaderMenu").html(output);
                }
            });
}

This script is included in all my pages.
Now, i'd like to mark the <li> representing the current page with a 'current' class.
I've added var currentPage to my menubar.js script, and on each page (for example, in reportsPage.js):

$(function() {

    //set this page as the current page; 
    currentPage = Enum.Page.Reports;
});

and in menubar.js: a function which is called on document.ready:

function SetCurrentPage() {
    $("#HeaderMenu li").removeClass('current');
    var liElement = null;
    switch (currentPage) {

        case Enum.Page.Reports:
            liElement = $("#lnkReports");
            break;
    }

    console.log('adding a class to: ');
    console.log(liElement);
    liElement.addClass('current');
}

the log that i get is:

> generating menu
> adding a class to: 
> []

so it appears that the element i'm looking for hasn't been added to the DOM yet.
I think there should be some solution using live(), but when I try live('load',...) it never gets called...

creating the menubar with javascript based on permissions doesn't seem very secure to me — ianbarker, Jul 14 '11 at 09:16
because it makes it easy for somebody to see the urls of things that they are not allowed to access, by looking in the js source — ianbarker, Jul 14 '11 at 12:09

score 0 · Answer 1 · answered Jul 14 '11 at 09:17

0

you forgot var before currentPage

$(function() {

    //set this page as the current page; 
   var  currentPage = Enum.Page.Reports;
});

make sure that your function SetCurrentPage is being called after dom.ready event

answered Jul 14 '11 at 09:17

genesis

50,477
20
96
125

i don't think that's the problem; `currentPage` is defined in menubar.js, and is only referenced in other scripts. – J. Ed Jul 14 '11 at 09:32
and is that closed in function for example? – genesis Jul 14 '11 at 09:42
of course not, otherwise it wouldn't be recognized by other scripts. the problem isn't the value of this variable- the value is set fine. the problem is that the selector returns empty – J. Ed Jul 14 '11 at 09:51

score 0 · Accepted Answer · answered Jul 14 '11 at 09:39

My solution for the problem was to generate JavaScript which reads:

 var BASE_URL = 'http://server/app/...'

All my URLs are either absolute or relative to BASE_URL. That way, I can simply look for all links which go to the current page and add the class "current" to them (take the URL for the current page, cut BASE_URL away and use the resulting string to query for a[href="..."]

For your solution, I think the problem is that you run SetCurrentPage() after the page has loaded when you should call it after the "load menu" AJAX call has come back.

Move the calls to the two methods to the end of the success callback in InitializeCurrentUser() and it should work.

how silly of me. I moved `SetCurrentPage()` to the end of the success callback. of course. — J. Ed, Jul 14 '11 at 10:05

how to manipulate, on document.ready, elements which were created on document.ready

2 Answers2

Linked