jQuery only ignoring a click trigger during a trigger chain - javascript

I have the following code:
$( "#check-button" ).on( "click", function() {
$("#button_cart").click();
$('.checkout-button').click();
});
I have this jQuery click event. What I want to do is, on clicking the check-button, the first line inside the function is updating the cart (which reloads the page) and then the second line inside the function is the checkout button, which takes me to the next (checkout) page.
But here only the first event is firing. Is this because the page is reloaded on "button-cart" clicking? How do I solve it?

That's correct. The second click actually could be working but in some kind of limbo between the click and the load and you wont see it.
The solution is to "handle" the reload event, I put it between "" because this event can't be handled ( as far as I know) but you can make some hacks.
First, why is reloading the page? Are you adding new content?
In this case just call the click in the content added with a load handler like $(document).ready();

Here is how i did it: Using localstorage.
Just saved the value of someVariable on check-button click ( along with button-cart click) and on page reload i checked if the value is set. If it is set, i unset it and clicked the next button.
Here is the link
This was really great help from SO. Thank u SO

Related

Stop Woocommerce redirect if apply discount button on checkout clicked with jquery

To explain the scenario, When I manually/in person click "apply discount" button on the checkout page it applies the discount and stays on the checkout page. But if I click "apply discount" button with jquery on the checkout page ,it applies the discount but it redirects me to the cart page if clicked with jquery. How can I click the button on checkout page with jquery and not get redirected to another page?
jquery I am using to click button :
if (location.search === '?477236546456456465465') {
jQuery(".wc_points_rewards_apply_discount").click()
}
})
First, you are missing a ; (semicolon) after the click() method. This may throw an error. I am not entirely sure if you are looking for something to simulate a click (a user does not actually click on the button) or use an event listener to wait for a click on the button, I'll go with the first from how your code looks.
As far as I know, jQuery's .click() method is a shortcut for the method .on('click', handler) - which is essentially an event listener that is waiting for a physical click on an element.
According to jQuery's .click() documentation here, "The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released."
With all of that being said, here is some code that may work using a jQuery method preventDefault(). This will prevent the default action of the clicking the element from occurring. However, the click() method will not simulate a click. Good Luck!
jQuery(document).ready(function() {
if (location.search === '?477236546456456465465') {
jQuery(".wc_points_rewards_apply_discount").click(function(e) {
e.preventDefault();
//do some cool stuff
});
}
});
Edit: My original answer will wait until all DOM content has loaded. However,
to wait until all Window content has loaded (included images, etc.), you can try putting your code in the following:
jQuery(window).on('load', function() {
//do stuff after the window has fully loaded
});
In order to wait until all ajax processes have stopped, you can try adding code to the following:
jQuery(document).ajaxStop(function() {
/*do stuff after all ajax has stopped. This will be called even if
an ajax event occurs after the page loaded */
});

JavaScript code not waiting til page loads after button click

I am trying to fill out a form and click submit and then I need to wait until the next page loads and continue working with elements. It seems like the code after the button click happens before the next page appears and the DOM has loaded. I've tried to use a while loop to check the readyState but that doesn't seem to work either. Any suggestions? Here is an example of what I'm trying to do assuming I have the submit button element in variable submitButton.
I've tried to use a while loop to check the readyState but that doesn't seem to work either. Any suggestions? Here is an example of what I'm trying to do assuming I have the submit button element in variable submitButton.
submitButton.click();
var errors = document.getElementsByClassName('error'); // Should be done after new page load
if (errors.length > 0)
{
console.log("There are some errors");
}
Assuming there will be some errors on the next page, there should be a message printed out, but this doesn't happen.
You can use window.onload()
Just pass a function thaz does what your script is currently meant to be doing
The function will be called when the page is loaded so you can use it to implement the functionality you want
encapsulate the whole code inside function i write but for this you would need the jquery
$( document ).ready(function() {
//Your code here
});
For refrence
Document Ready function jquery

JavaScript HTML DOM click() not working on input

I am trying to execute a click() on a certain input and the click() method doesn't do anything. Here is my code :
document.getElementsByName("op")[1].click()
I worked with the chrome console and in a AHK script I have been working with and both don't do anything. I have tried with : getElementsByName, getElementById, getElementsByClassName... They all don't do anything.
The website is : https://etudier.uqam.ca/cours?sigle=MET5201
Here are the steps you need to do before clicking the button (input):
Step 1
Step 2
From what I have seen in the HTML code of the page and from some research, I think it does not work because the input is AJAX controlled.
When you click the button, it is supposed to load and tell, for every group, if there is places available.
If you click slowly on the button, you'll notice it does not react on click, but on mousedown. To trigger this event, you can use dispatchEvent:
// Create a mousedown event and dispatch it
document.getElementsByName("op")[1].dispatchEvent( new Event('mousedown') );

Timeout for javascript execution

jQuery(document).click(function () {
jQuery('.close-news').css('display', function(){return jQuery('#colorbox').css('display');});
});
I have this script, which make my link appear\dissappear depends on state of #colorbox block. But somewhy link appear\dissappear not immediatelly, but after 2 click.
Basically i have to click one more time in random area to make my script work
I guess its because my html code isnt update fast enought to make . So how do i add some timeout for this script?
It seems you are using Colorbox in Drupal.
There can be a callback function that gets executed once the Colorbox is shown up.
After Debugging your site, seems that there is a cbox_complete custom event firing up.
If thats the case, you can attach a function to this event.
In the function, you can toggle the display of your .close-news li element, similar to what you are doing on document click in the question

jquery ajax calls are causing a page refresh

I have a button in my HTML page which is not part of any form.
<input type='button' id='submitter' value='add'/>
I have a click handler on it:
$('#submitter').click(function(e) {
e.preventDefault();
e.stopPropagation();
var args={}
$.get('notexists.php', args, function() {alert('what?');}, 'json')
.error(function(){ alert('error'); });
return false;
}
Now, notexists.php does not exist, so the click should alert error. But for some reason, The page refreshes with I click the button!
Some experiments I've tried to identify the problem:
removed everything from the handler (no return false, no prevent default, no stop prop, no jquery post call - nothing) - the page did not refresh on click, and it should not. the button is not a submit button, and it dont belong to no form.
removed teh $.post call - no refresh
enabled the firebug's "break on error" feature and tried clicking - refreshed again. so there is no error.
changed the post URL to something that exists and works - still refreshing
added an "alert" after the $.post call - it did not get called. Seems like the execution breaks at $.post, but there's no error (experiment 3).
changed the input to a "div" with the same id. Same results - page gets refreshed.
Can anyone help?
PS: I'm using $.post in MANY other parts of this app, and its working as expected everywhere.
Have you checked $('#submitter').length when you attempt to bind the event? Maybe you have duplicate id's in the dom? Have you got your script running before the closing body tag or inside a jquery doc ready block?
Posting a fuller code sample would help to eliminate the questions I pose.
I believe your selector isn't selecting the button, so the event handler is not being applied.
Test your selector by doing something like:
$("#submitter").val('Test');

Categories