Jquery click event for horizontal menu component

[Segi]

I have a component that I deploy to multiple forms. It contains a horizontal menu control with 1 dynamic menu item that gets populated dynamically.

I want to be able to have jQuery client side code execute when the user clicks on one of the menu items that is labeled "Logoff" to confirm with the user before the server side code gets executed which will log the user out of Ebase' security model.

I went to HTML Element Properties of the Horizontal menu control (because the dynamic menu item does not have an HTML Entities property) and added a simple alert message then deployed the component to one of my forms.

When I load the page with the Horizontal menu, I went into the browser developer console and added a breakpoint on the alert message that I added above to try and figure out how to get the currently selected menu item using jQuery.

$(this) returns a div of my horizontal menu and $(this).children().find("li") will return all menu items but how do I get the text of the menu item that was clicked on ?

[Jon]

Try adding something like this to the ready event of the Horizontal Menu Control. You should see the text from the clicked item echo'ed.

Code: Select all

$("#menu1 li div div").click(function() {
    alert($(this).text()); // gets text contents of clicked li
});

Where menu1 is the id of the Horizontal Menu Control. This should work for dynamic menu items as well as regular menu items.

[Segi]

Jon,

That doesn't work quite right.

If I click on the menu bar first then select a menu item, the alert message pops up twice.

If I do not click on the menu bar first andclick on a menu item, the alert never displays

Update: Sorry I selected the wrong event type. This works for me (in case anyone wants to do something similar)

In HTML Entities, I added a ready event with this code

Code: Select all

$("#MYHORIZONTALMENU li div div").click(function() { 
    if ($(this).text().trim() == "Logoff") {
         return confirm("Are you sure that you want to log off ?");
    }
});

I had to call trim() on $(this).text() since Ebase adds extra spaces as padding before and after the menu name