'Turning onClick dispatchEvent into an Auto Click
I have a specific code that comes from Revolution Slider. Right now, if you click on this, it will popup like I need. But what I need it to do is auto popup once someone comes to the site. Essentially turning this into an auto click. How could I change this code in order to make it happen? You can see the code below.
You can also see the code working here: https://ae32d5d93a.nxcli.net/
<button id="clickMe" onclick="document.dispatchEvent(new Event('RS_OPENMODAL_slider-2')); return false">Auto Popup</button>
EDIT:
So I added it into a Magento 2 CMS Page and I am calling out the .js esstentionally. That part is working, as you can see the link grabs the javascript you sent me.
{{block class="Magento\Framework\View\Element\Template" template="Magento_Theme::popup.phtml"}}
Solution 1:[1]
You can do a couple of things to achieve this.
- You add the
onclickfunction in the bodyonloadevent. For example, something like this should work:
<body onload="document.dispatchEvent(new Event('RS_OPENMODAL_slider-2')); return false">
- You can use javascript and run this in the
window.onloadfunction. See below for an example:
window.onload = (event) => {
document.dispatchEvent(new Event('RS_OPENMODAL_slider-2'));
event.preventDefault();
};
- This is my least recommended one. You can have the button and then use javascript to click it automatically. See the code below to see how to do this:
HTML:
<button id="clickMe" onclick="document.dispatchEvent(new Event('RS_OPENMODAL_slider-2')); return false">Auto Popup</button>
Javascript:
window.onload = () => {
const button = document.getElementById('clickMe');
button.click();
};
Solution 2:[2]
HTML
<button id="clickMe">Auto Popup</button>
CSS
to hide the button
#clickMe{
position: absolute;
top: 0;
left: -9999px;
}
Javascript:
to run the code when the page loads
$(document).ready(function() {
$.when($('#clickMe').click()).done(() => {
document.dispatchEvent(new Event('RS_OPENMODAL_slider-2'));
});
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Mehmet Do?an |