Javascript API click functionality

Tyler

I'm working on implementing a separate link on my page that can open a Buttonizer group remotely using the Javascript API described here. I've gotten everything working for the most part, but am stuck on the click functionality.

Notably, the example code offered at the bottom of the page does not work. If you change the behavior from "click" to "mouseover" (or any other event handler) it works fine. But the default click behavior never triggers.

I've tried several ways to implement the code, and it always works fine for everything except the onclick behavior. I suspect that something is up with the default Buttonizer event listener. But I also am a major coding noob and may be missing something important.

Any suggestions?

James

Hi Tyler,

Thanks for reaching out to us!
We're glad to see a question regarding the Buttonizer API. 😄

Do you perhaps have an example of the code that you are using? And perhaps a link to the page of the separate link so that we can see why it's not working?

Thanks in advanced!

Tyler

Sure -- thanks for the help!

Here's the script that is inserted into the page header using the Insert Headers and Footers plugin. It is a lightly modified version of the code suggested at the very bottom of the Buttonizer Javascript API page.

And here's an example of the button that isn't working:
<button id="open_click">Click</button>

But change the id to "open_mouseover" or "open_mousedown" and it works fine.

You can see it all in action here: Buttonizer Test Code

James

Hi Tyler,

Thanks for the code and the very informative test page.

It also puzzled us as to why it was not working but after testing around a bit we found out what was the cause of the issue.

It was the "Close on click" outside feature. 😅

Your code was great and it was actually opening the group.
But since the close on click outside setting was being triggered by clicking on a button outside the group, it is immediately closing the group again.

We are going to make an update so that the API will be seen as the highest priority and ignore the close on click outside setting.
But to fix this issue for now, you can disable close on click outside and perhaps try out the open/close on hover feature.

We'll let you know once we've fixed the issue! 😁

Tyler

Good catch! Yes, disabling the "Close on button click" worked like a charm. It's good to know I'm not crazy -- for a while there I was starting to wonder. 😅

For now, I'll just leave that off and use the toggle version of the button.

BTW, while you're updating the code be sure to check out some of the other events like Mousedown. It also behaves differently now, where it keeps the button open (just like click) rather than acting like a momentary switch. But perhaps that's how it's supposed to operate in the first place without the extra closing click.

Thanks again!

Tyler

OK -- new issue.

Everything worked perfectly until I followed the new Buttonizer prompt to migrate to the standalone version. Now none of the javascript buttons are working at all.

Any ideas for that one?

UPDATE: I think I found the problem. It works fine when controlling all groups but it's not finding the group IDs when I include them in the (). And when I run this code...

window.Buttonizer.groups().forEach((obj, key) => { console.log(Button ${obj.id} is ${obj.isOpened() ? 'opened' : 'closed'}!); });

...it now shows new group IDs every time I load the page! So it appears that either the standalone version needs to offer static group IDs, or I need a new way to recognize groups on my side.

UPDATE2: It's not clear what happened (the only thing I did was disconnect/reconnect to Buttonizer) but now everything is functioning correctly again. If that was one of you guys, nice work!

Jasper

Hey Tyler!

Thanks for your replies, we're glad you manage to get it working!

Sorry about the trouble when migrating to the standalone! My guessing is that it might have been the cache on your website, loading the standalone script and the WordPress mixing together.

I can ensure that the standalone IDs are static saved in the database and don't change or rotate, so it could be that the IDs were mixing up/switching between with the cached WP Buttonizer data and the standalone (which actually would be weird as the IDs should have stayed the same on migrating).

Hope it doesn't happen again. If it does, let us know, then we can investigate on this further!

UPDATE2: It's not clear what happened (the only thing I did was disconnect/reconnect to Buttonizer) but now everything is functioning correctly again. If that was one of you guys, nice work!

We actually did not do any updates yesterday 😅 Next update will probably be on next Monday or Thuesday 🙂

BTW, while you're updating the code be sure to check out some of the other events like Mousedown. It also behaves differently now, where it keeps the button open (just like click) rather than acting like a momentary switch. But perhaps that's how it's supposed to operate in the first place without the extra closing click.

Can you elaborate on this issue a little bit more? Does it behave different as soon you disable that setting in your code or in our code?

It's good to know I'm not crazy -- for a while there I was starting to wonder. 😅

Haha sorry about that! We were also debugging and staring at our code and felt the same! When testing the code via console it works like a charm, until we were using the custom click on the page itself... Fortunately we got our own little eureka! moment and found the cause of it. Sometimes we even forget about some features we build that might collide 😛

We'll update you as soon we've updated the code and deployed it to live. In the meantime, if there's anything else we can do for you, let us know! 🙂

Tyler

Jasper I can ensure that the standalone IDs are static saved in the database and don't change or rotate, so it could be that the IDs were mixing up/switching between with the cached WP Buttonizer data and the standalone (which actually would be weird as the IDs should have stayed the same on migrating).

The IDs were definitely changing for a while there. I ran the "loop through group IDs" script multiple times on one page and it showed the same IDs. But as soon as I refreshed the page the IDs were randomized again. It was clearly why the open function wasn't working, as the console would give me an error that is could no longer find the ID the script was referencing. But for whatever reason it's fixed now and the original IDs still work fine.

Jasper Can you elaborate on this issue a little bit more? Does it behave different as soon you disable that setting in your code or in our code?

When you have "close on button click" turned on, the mousedown function acts like a momentary switch that opens the Buttonizer group only while you hold the mouse button down (it closes the moment you release the button). But with "close on button click" turned off, mousedown acts just like click (it only closes when you click on it a second time). Again, maybe that's actually normal. But it's an interesting difference.

Jasper

Hey Tyler , thanks for waiting!

Today we've deployed a new version of our frontend which fixes the JavaScript API issue you were experiencing.

Could you let me know if the issue has been resolved?

Tyler When you have "close on button click" turned on, the mousedown function (...)

I've checked this for your and discussed it with my colleague, we think it works like intended. However, you can replicate this behaviour if this option is turned off by using the mouseup event listener and use window.Buttonizer.close().

Let me know if this resolves all your issues! 🙂

Tyler

Nice!

Yes, I think I'm good to go. I have a new unrelated issue I'm wrestling with, but I'll save that for a new topic and consider this one solved.

Thanks for the great support!

Jasper

Tyler Hey Tyler, great to hear the issue has been resolved 🎉

I'll mark this issue as resolved and will probably see you in another topic 🙂