dynamic menu with Ajax

Question

I am creating a dynamic menu of users from the database. When the user clicks on the profile I need that profile highlighted. Here is the menu of the profiles. My menu works great, I need help on how to get the elements of the menu highlighted. Thanks for the help.

function childMenu(profileId){

var path = location.pathname;

    $.ajax({
    type: 'POST',
    url: '',                  //the script to call to get data          
    data: "method=getChildProfile&profileId="+profileId,  //requirements 
    dataType: 'xml',                        //data format      
    success: function(xml)     
    {  
    $(xml).find('Child').each(function()
    {   
    var proId = $(this).attr('profileId');
    var lName = $(this).find('lName').text();
    var fName = $(this).find('fName').text();

    $("#childMenu").append("<li><a href='"+path+"?child="+proId+"&fName="+fName+"&lName="+lName+"'></a></li>");

    });
    }
    });

}

how are you "highlighting" the menu? By adding a class? If so, you can use the class as a selector $('li.highlight'). It would help if you could post the html of whole menu. — vdeantoni
– vdeantoni, Commented Feb 27, 2012 at 14:43
my html: <div id="side_nav"> <ul name="childMenu" id="childMenu"> </ul> </div> I am a newbie, so I have no Idea where to start to get the profile selected to highlight. — Dawn
– Dawn, Commented Feb 27, 2012 at 14:55

Ofir Baruch · Accepted Answer · 2012-02-27 15:07:11Z

1

If I'm getting you right: (If it's not what you're looking for comment and I'll edit my answer)

Edit the append line:

$("#childMenu").append("<li><a href='"+path+"?child="+proId+"&fName="+fName+"&lName="+lName+"' onClick='javascript:doHighlight(this)'>???</a></li>");

Add a new function to your JS:

function doHighlight(elem)
{
 if(elem.className == "highlighted")
   elem.className = "";
 else
   elem.className = "highlighted";
}

And add a class to your css:

.highlighted{
 background-color:yellow;
}

answered Feb 27, 2012 at 15:07

Ofir Baruch

10.3k2 gold badges29 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dawn Over a year ago

Thanks for the suggestions, and I tried both. Both highlight the selected menu item, BUT it is not staying highlighted. when the page loads the highlight goes away. any suggestions to make it stay, until a new profile is selected?

Ofir Baruch Over a year ago

Oh, now I got you. You should use sessions or adding a new parameter to your link so you'll know which profile was highlighted before.

Dawn Over a year ago

How would I go about that? like I said I am new to Ajax.

Ofir Baruch Over a year ago

Try this tutorial: quirksmode.org/js/cookies.html The idea is to create a cookie in the doHightlight function with the id of the element. Add in your script another function that will check for that cookie and highlight the desired element.

vdeantoni · Accepted Answer · 2012-02-27 15:10:17Z

1

After you have your menu built, you need to add a click event handler which will highlight your <li>

$('#childMenu li').click(function() {
    $('#childMenu li.selected').removeClass('selected');
    $(this).addClass('selected');
});

then you can get your selected <li> with

$('#childMenu li.selected')

you can also edit your .select css class to change the background color and whatever else you need.

answered Feb 27, 2012 at 15:10

vdeantoni

1,96814 silver badges19 bronze badges

Collectives™ on Stack Overflow

dynamic menu with Ajax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related