New Update Changed Modal Toggle

Support
#1

Since the recent UI update, I have a site that has changed its functionality.

I have some modals on the site, that I was previously using hash toggles in order to use buttons to open the modals. You used to be able to click once to activate the hash toggle, but now you have to click twice to trigger the modal.

I attempted to alter the functionality and disconnect the hash toggle form the button, and instead use JS to trigger a click on the modal toggle. I used the following code:

jQuery(document).ready(function($){
$("#teams_button").click(function(e) {
e.preventDefault();
$("#teams_modal-anchor-toggle").click();
});
})

According to other articles on the forum, this has worked for people, however my button does not activate the modal. I have verified that the button is indeed being clicked (I used a console log to check), and I can see both the toggle element and the modal element flashing in the inspector as if they were being clicked. When I made the toggle visible again (I have it sized to 0em), it animates as if it is going to toggle, and then immediately reverts.

Did something change in the recent update that would alter both the toggle has functionality, and that would negate the JS manual click of the toggle?

#2

Hello @edevita,

Thanks for writing in! The new Modal element now uses data-x-toggle-hash="teams" attribute. If you target the attribute, you may need to use [data-x-toggle-hash="teams"] in your JS code. Perhaps this old thread can help you:

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Meanwhile, please also check out this new documentation:

Best Regards.

#3

Using this method with the new data-x-toggle-hash still results in requiring two clicks for the user on the button.
The first click changes the url to the #url and the second opens the modal. Are there other methods of triggering the modal opening that don’t require the #url?

1 Like
#4

You know it does look like some of the hash things changed in V6. We’ll bring that back for the next release. I’ve also added notes on the Toggleable docs page that relate to opening a Toggleable. Let us know if any of that helps you.

#5

Based on the way the docs are written, this was my assumption of how to achieve the use of a custom button to toggle the modal:

On the custom button: Give it both an id [custom-id], and the custom attribute “data-toggle-x=1”
On the modal itself: Give it a “Toggle Custom Attribute” of “data-x-toggleable=custom-id”

This does not work for me, so I’m guessing I’m reading it wrong. Thoughts?

#6

Hi there, got the same problem. Using data-x-toggle-hash results in two clicks. No normal User will understand this. The .click function did not work for me as well. It only works if I paste the click() directly into console.

#7

Hey guys,

We just release a new version of the theme. Please try updating the theme to the latest version and let see if it fix the issue.

Let us know how it goes.

1 Like
#8

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