jQuery UI Widgets Forums Navigation Menu, Context Menu dynamically change menu item text

This topic contains 7 replies, has 2 voices, and was last updated by  svetoslav_borislavov 4 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • dynamically change menu item text #121993

    jqwidgetsdev
    Participant

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

    Thanks.

    dynamically change menu item text #121994

    jqwidgetsdev
    Participant

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

    Thanks.

    • This reply was modified 4 months, 3 weeks ago by  jqwidgetsdev. Reason: detail
    dynamically change menu item text #122006

    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

    dynamically change menu item text #122011

    jqwidgetsdev
    Participant

    Hi,

    Thanks for response but the example doesn’t work

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

    dynamically change menu item text #122012

    jqwidgetsdev
    Participant

    My desired behaviour is

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

    dynamically change menu item text #122014

    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

    dynamically change menu item text #122035

    jqwidgetsdev
    Participant

    Thanks for the example, it’s very clear!

    dynamically change menu item text #122094

    Hi,

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

    Best regards,
    Svetoslav Borislavov

    jQWidgets Team

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.