jQuery UI Widgets › Forums › Navigation › Menu, Context Menu › dynamically change menu item text
Tagged: jqxmenu change text
This topic contains 7 replies, has 2 voices, and was last updated by svetoslav_borislavov 1 year, 2 months ago.
-
Author
-
What is the preferred way to change the text of a menu item?
Thanks.
How do I change the text of a *different* menu item based on the menu item’s id.
Thanks.
- This reply was modified 1 year, 2 months ago by jqwidgetsdev. Reason: detail
Hi,
I did not fully understand you, can you please explain to me.
Here is an example of changing a menu item`s text on every menu item click:http://jsfiddle.net/tx1ukyhw/1/
Best regards,
Svetoslav BorislavovjQWidgets Team
Hi,
Thanks for response but the example doesn’t work
“Running fiddle”
“58:37 Uncaught TypeError: $(…).jqxMenu is not a function”My desired behaviour is
1) user clicks on a menu item
2) the code changes the text of another menu item.Hi,
The following example demonstrates: When clicking on a menu item the text of another menu item is changed depending on the clicked menu item.
The fiddle completely works, but here is a link for a new fiddle with the same functionality:https://jsfiddle.net/v50aowxh/
Here is the code:
HTML
<div id='jqxWidget' style='vertical-align: middle; text-align: center; background: #eee; height: 400px; width: 400px;'> <div id='jqxMenu'> <ul> <li>Home</li> <li id="menuItem2">Services</li> <li>About Us</li> <li>Something cool</li> </ul> </div> <span style='font-size: 14px; position: relative; top: 180px; font-family: Verdana Arial;'> Right-Click here to Open the Menu </span> </div>
JS:
$(document).ready(function () { // Create a jqxMenu var contextMenu = $("#jqxMenu").jqxMenu({ width: '120px', autoOpenPopup: false, mode: 'popup' }); // open the context menu when the user presses the mouse right button. $("#jqxWidget").on('mousedown', function (event) { var rightClick = isRightClick(event) || $.jqx.mobile.isTouchDevice(); if (rightClick) { var scrollTop = $(window).scrollTop(); var scrollLeft = $(window).scrollLeft(); contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop); return false; } }); // disable the default browser's context menu. $(document).on('contextmenu', function (e) { return false; }); function isRightClick(event) { var rightclick; if (!event) var event = window.event; if (event.which) rightclick = (event.which == 3); else if (event.button) rightclick = (event.button == 2); return rightclick; } $("#jqxMenu li").on('click', (e) => { const text = e.currentTarget.textContent; let menuItemText = 'Unknown'; if (text == 'Home') { menuItemText = text; } else if (text == 'About Us') { menuItemText = text; } $("#menuItem2").text(menuItemText); }) });
If you have any additional questions, please feel free to ask!
Best regards,
Svetoslav BorislavovjQWidgets Team
- This reply was modified 1 year, 2 months ago by svetoslav_borislavov.
- This reply was modified 1 year, 2 months ago by svetoslav_borislavov.
Thanks for the example, it’s very clear!
Hi,
Happy to hear that, if you have any additional questions, please feel free to ask!
Best regards,
Svetoslav BorislavovjQWidgets Team
-
AuthorPosts
You must be logged in to reply to this topic.