dynamically change menu item text

[jqwidgetsdevParticipant]

What is the preferred way to change the text of a menu item?

Thanks.

[jqwidgetsdevParticipant]

How do I change the text of a *different* menu item based on the menu item’s id.

Thanks.

• This reply was modified 8 months, 2 weeks ago by  jqwidgetsdev. Reason: detail

[svetoslav_borislavovParticipant]

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 Borislavov

jQWidgets Team

[jqwidgetsdevParticipant]

Hi,

Thanks for response but the example doesn’t work

“Running fiddle”
“58:37 Uncaught TypeError: $(…).jqxMenu is not a function”

[jqwidgetsdevParticipant]

My desired behaviour is

1) user clicks on a menu item
2) the code changes the text of another menu item.

[svetoslav_borislavovParticipant]

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 Borislavov

jQWidgets Team

• This reply was modified 8 months, 2 weeks ago by  svetoslav_borislavov.
• This reply was modified 8 months, 2 weeks ago by  svetoslav_borislavov.

[jqwidgetsdevParticipant]

Thanks for the example, it’s very clear!

[svetoslav_borislavovParticipant]

Hi,

Happy to hear that, if you have any additional questions, please feel free to ask!

Best regards,
Svetoslav Borislavov

jQWidgets Team

[Author]

Posts