RTL dont change to False after set True

[lucasmelocvlParticipant]

Hello,

On my applicattion I have four small menus (using jqxMenu) on same page. Two menu on left side, and others two on right side.
The menus on left side, I need to open the sub-menus to right, therefore rtl is set up False. And the menu on right side, I need to open the sub-menus to left side, therefore rtl is set up True.

Well, the problem is: When I firstly open the menus on left side, rtl is set up False, and is openned normally with submenu to right. But when I open the menus of right side (where the rtl is set up to True) and after close the last menu of right side, I open other menu on left side, the rtl on left menu stay set up as True, and submenus are open to left side, even I set to false. Maybe the value of rtl when setted as True, stay save on cache, but I cant modify his value.

This code is for left Menu

$("#jqxMenu").jqxMenu({
            rtl: false,
            autoCloseOnClick: false,
            source: source,
            width: '180px',
            height: '180px',
            mode: 'vertical',
        });

And this code is for rightMenu

$("#jqxMenu").jqxMenu({
            rtl: true,
            autoCloseOnClick: false,
            source: source,
            width: '180px',
            height: '180px',
            mode: 'vertical',
        });

They need use the same ID, but it is rendered on differents location.

It’s a bug? Anyone have suggestions?
Since now, thank you.

[DimitarParticipant]

Hello lucasmelocvl,

Different instances of the same widget have to have different ids when they are on the same page. This is also a general HTML rule: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute. Please try changing the id of the second menu and share if the issue still occurs.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[lucasmelocvlParticipant]

Thank you so much, it’s worked.

I will detail the problem and the resolution:
I was trying build the page dynamically, with html and js, having same differents instances of same id, they never be render on same time, because of this I think that could work. I had just one div with ‘nav-small’ id on index.html.
<div id='nav-small-a'></div>
And one js that render ‘nav-small’, of menu positions different and elements different when necessary.

function exameple_menu_a(){
...
        nav_small.style.top = topPosition;
        nav_small.style.left = leftPosition;
        nav_small.style.right = rightPosition;
        $("#nav-small-a").jqxMenu({
            rtl: false,
            autoCloseOnClick: false,
            source: source,
            width: '180px',
            height: '180px',
            mode: 'vertical',
        });
...
}

funtion exameple_menu_b(){
...
        $("#nav-small-a").jqxMenu({
            rtl: true,
            ...
        });
}

...

To resolve:
But now, I created four div on index.html like ‘name-small-a’, ‘name-small-b’, ‘name-small-c’, ‘name-small-d’.

   <div id='nav-small-a'></div>
    <div id='nav-small-b'></div>
    <div id='nav-small-c'></div>
    <div id='nav-small-d'></div>

And I created the menu for especific div.

function exameple_menu_a(){
...
        nav_small.style.top = topPosition;
        nav_small.style.left = leftPosition;
        nav_small.style.right = rightPosition;
        $("#nav-small-a").jqxMenu({
            rtl: false,
            autoCloseOnClick: false,
            source: source,
            width: '180px',
            height: '180px',
            mode: 'vertical',
        });
...
}

funtion exameple_menu_b(){
...
        $("#nav-small-b").jqxMenu({
            rtl: true,
            ...
        });
}

...

And now, it’s worked correctly with four id.

I tried to shorten the code , but I ended up getting worse.
Thank you for your help.

[Author]

Posts