Using JQuery to update Modal Toggle Label

Firstly, the site in question is https://www.flexo.nz/

So I’ve written a bit of jquery that works with a currency converter widget (see the nav item NZD) to update the menu label based on the selected currency:

As you can see, it targets a span with an ID:

I’m rebuilding the header in Pro to make use of some other features, but can’t seem to find a way to get the label to update in the same way. I’m using the content modal and am unable to just paste <span id="menu-currency">NZD</span> into the modal toggle- when I save, it strips the id off.

You can see the new pro header on this page: https://www.flexo.nz/demo-header/

It works fine if I use inspector to add id=“menu-currency”

I’ve tried a heap of things, including the below, which I thought would have worked.

Anyway, can I add an ID to the modal toggle somehow? Or perhaps target it otherwise?

Thanks in advance.

Hi there,

Yes you can certainly add an ID to the Content Area Modal element. You can do this by clicking on the customize option of the element and you should see the options there.

Once you have added the ID, the resulting ID in the fronend will be #menu-currency-anchor-toggle so you can target it by using

jQuery('#menu-currency-anchor-toggle .x-anchor-text-primary').text('Test');

Hope this helps.

Oh man, I swear I tried that and it didn’t work. Working perfectly now- thanks a bunch!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.