And I want to add JavaScript in the "ChangeUser" Item (the first item), so when users click on this page, it won't post back to the server and it
will execute my function.
function bindWorkingSpinnerMenuDashabordAlert()
{
var navigationMenu = $('.NavigationMenu_1');
if (navigationMenu != null)
{
if (navigationMenu.length != null)
{
for (var i = 0; i < navigationMenu.length; i++)
{
if (i == 0 || i > 2)
{
var item = navigationMenu[i];
item.onclick = function MenuDashabordAlert()
{
var message = "You are leaving the application without saving.\n\n If you would like to save the application,\n Click 'Cancel', and then Click 'Save' button below \nor Click 'Ok' to proceed.";
if (confirm(message) == false)
{
event.returnValue = false;
}
else
{
return true;
};
}
}
}
}
}
var mainMenuItem = $('.MainMenu_MainMenu_FormView2_ctl01___SectionApplicationStatus_Menu_1');
if (mainMenuItem != null) {
if (mainMenuItem.length != null) {
for (var i = 0; i < mainMenuItem.length; i++) {
var item = mainMenuItem[i];
if (!item.disabled) {
item.onclick = showModalPnlWorkingViaClient;
}
}
}
}
}
The first loop structure adds a confirm() to the first menu. We are skipping Item #1 and #2
The second loop structure binds the onclick event to the function showModalPnlworkingViaClient (adapted from the Ajaxtoolkit).
In this case we are blocking any other navigation until the postback.
The !item.disabled check adds the onclick only to non-disabled menu items.
ureyes84
Member
115 Points
86 Posts
Adding JavaScript to a Menu Item in a Menu Control
Dec 20, 2006 07:17 PM|LINK
Hi world,
I have this menu
<
asp:Menu ID="MenuMain" runat="server" BackColor="#F7F6F3" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#7C6F57" StaticSubMenuIndent="10px" Orientation ="Horizontal" OnMenuItemClick="MenuMain_MenuItemClick" >
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <DynamicHoverStyle BackColor="#7C6F57" ForeColor="White" /> <DynamicMenuStyle BackColor="#F7F6F3" /> <StaticSelectedStyle BackColor="#5D7B9D" ForeColor="White" /> <DynamicSelectedStyle BackColor="#5D7B9D" /> <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" /> <StaticHoverStyle BackColor="#7C6F57" ForeColor="White" /> <Items> <asp:MenuItem Text="Change User" Value="ChangeUser" ></asp:MenuItem> <asp:MenuItem Text="User Manual" Value="UserManual" NavigateUrl="~/Documents/FastTrackReadme.pdf" ></asp:MenuItem> <asp:MenuItem Text="Links" Selectable="False" Value="Links"> <asp:MenuItem Text="WAWF" NavigateUrl="http://wawf.eb.mil" Value="WAWF"></asp:MenuItem> <asp:MenuItem Text="AFCEE Web" NavigateUrl="http://www.afcee.brooks.af.mil" Value="AFCEE Web"></asp:MenuItem> <asp:MenuItem Text="Outlook" Value="Outlook"></asp:MenuItem> </asp:MenuItem> </Items> </asp:Menu>And I want to add JavaScript in the "ChangeUser" Item (the first item), so when users click on this page, it won't post back to the server and it will execute my function.
Example:
<asp:MenuItem Text="Change User" Value="ChangeUser" onclick="MyFunction();"></asp:MenuItem>
But it won't let me add the onclick attribute, nor do something like:
MenuMain.items[0].Attributes.Add("onclick", "myfunction();");
Any ideas how I can attach my function to this menu item?
Thanks world.
Ask and it will be given to you; seek and you will find; knock and the door will be opened to you. Luke 11:9
ureyes84
Member
115 Points
86 Posts
Re: Adding JavaScript to a Menu Item in a Menu Control
Dec 20, 2006 08:08 PM|LINK
Ok world...
this time you blew me off, so I came up with a quick fix, I know it's ugly but it works :)
<asp:MenuItem Text="<span style='cursor:pointer;' onclick='javascript:MyVeryCoolFunction();'>Change User<span>" Selectable="False" Value="ChangeUser" ></asp:MenuItem>
Thanks again, I would appreciate if you could suggest a better solution, if not, you just learned how to trick the menu control.
Ask and it will be given to you; seek and you will find; knock and the door will be opened to you. Luke 11:9
AndreDio
Member
2 Points
1 Post
Re: Adding JavaScript to a Menu Item in a Menu Control
Jun 26, 2012 02:53 PM|LINK
Great! thanks
PS: </span>
cyber_cne
Member
17 Points
4 Posts
Re: Adding JavaScript to a Menu Item in a Menu Control
Dec 20, 2012 08:09 PM|LINK
This problem drove me and my group batty.
We have two menus, One for general navigation and one for navigation with in a wizardish maintenance form.
In the first menu we wanted a confirm() Warning message to keep people from accidently leaving with out saving their work.
In the second menu, We wanted to add an Ajaxtoolkit Modal panel call via a onclick event to the wizard navigatin menu items.
We used jQuery to find our Menu objects and a little custom javasript.
You need to know the id of your menus. In our case NavigationMenu_1 and MainMenu_MainMenu_FormView2_ctl01___SectionApplicationStatus_Menu_1
First we created an onload event. Find one, roll your own or use this one.
In a javascript library file or inside javascript tags...
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != "function") { window.onload = func; } else { window.onload = function () { oldonload(); func(); } } }This code invokes the function that binds my onclick events to the menu at runtime.
Again inside a javscript file that your app loads or inside javascript tags.
addLoadEvent(function () { bindWorkingSpinnerMenuDashabordAlert(); });Here is where the magic happens...
function bindWorkingSpinnerMenuDashabordAlert() { var navigationMenu = $('.NavigationMenu_1'); if (navigationMenu != null) { if (navigationMenu.length != null) { for (var i = 0; i < navigationMenu.length; i++) { if (i == 0 || i > 2) { var item = navigationMenu[i]; item.onclick = function MenuDashabordAlert() { var message = "You are leaving the application without saving.\n\n If you would like to save the application,\n Click 'Cancel', and then Click 'Save' button below \nor Click 'Ok' to proceed."; if (confirm(message) == false) { event.returnValue = false; } else { return true; }; } } } } } var mainMenuItem = $('.MainMenu_MainMenu_FormView2_ctl01___SectionApplicationStatus_Menu_1'); if (mainMenuItem != null) { if (mainMenuItem.length != null) { for (var i = 0; i < mainMenuItem.length; i++) { var item = mainMenuItem[i]; if (!item.disabled) { item.onclick = showModalPnlWorkingViaClient; } } } } }The first loop structure adds a confirm() to the first menu. We are skipping Item #1 and #2
The second loop structure binds the onclick event to the function showModalPnlworkingViaClient (adapted from the Ajaxtoolkit).
In this case we are blocking any other navigation until the postback.
The !item.disabled check adds the onclick only to non-disabled menu items.
I hope this helps someone.
DMC (:-{)>>
David M. Carpenter