JQuery click() triggers event in console but calls default from JS files - javascript

I have a form with a submit button. On manually clicking it, AJAX kicks in and prevents the default submit action. I want to trigger that behavior via JS or jQuery.
I have tried several methods:
$(document).ready(function(){
setTimeout(clicksubmitbutton(), 2000);
});
function clicksubmitbutton(){
//I tried these lines one at a time. :
$('#basketButton').click();
$('#basketButton')[0].click();
$('#basketButton').trigger('click');
$('#basketButton').triggerHandler('click');
}
The first 3 all worked fine from console (AJAX), but reloaded the page when called within js. What went wrong?

Don't invoke your function, just pass it. Observe the following...
setTimeout(clicksubmitbutton(), 2000);
=>
setTimeout(clicksubmitbutton, 2000);
JSFiddle Link - working demo
Also, .click() should work fine

Related

window.onload not working always in chrome

I have two radio button in my views. on Page load i want to trigger a click event, i used the following Jquery Code to click radio button on page load.
$(window).on("load", function () {
jQuery(function () {
jQuery('#addressID_radioButton').click();
jQuery('#personID_radioButton').click();
});
});
But in Chrome jQuery('#addressID_radioButton').click(); works or triggers click event on addressID_radioButton radio button but on jQuery('#personID_radioButton').click(); sometime it works sometimes it doesn't, i have to refresh the page to make it work.
Set checked instead if that is all you are wanting to accomplish
jQuery('#addressID_radioButton, #personID_radioButton').prop('checked', true);
Since updating to Wordpress 5.6 I've noticed $(window).on("load"... is very fickle. I installed jQuery migrate too.
Try document.ready to test and I think you'll find it will work.
I'm not sure if the $(window).on("load" bug is related to jQuery or browser.

Custom jQuery not working on Wordpress Ninja Forms plugin

I am having some problems when I want to add custom jQuery code that affects the form.
For example when someone clicks an input or radio button another input or element to be hidden or shown.I tried to get a result like console.log('trigger'); when clicked or something else but nothing in dev. console appeared.Also, I tried the following methods:
To call the click event with .on('click', function()... or to call the event with .trigger('click');, or to change the event to change
To embed the script within a file from ninja forms or to put it inside the page at the ending of body tag in footer.php
To change the opening declaration of jQuery to work inside a function like this : (function($) {$(document).ready(function(){.....
I know that I could try another plugin, I tried one and the custom jQuery works but I really like this one and don't know why this is happening ...
Thanks
Not sure if you need help with this any more as it's been some time since you posted your question, but this may help others in the future. I had the same/similar issue with not being able to run JS/jQuery on the Ninja Forms and found that it's because Ninja Forms load their forms asynchronously. So, when your document.ready function runs, the form doesn't yet exist and it's not able to bind.
Ninja Forms have their own event ready state that can be used as follows:
jQuery(document).on( 'nfFormReady', function( e, layoutView ) {
// Your code goes here...
});
The event isn't registered simply because the elements you're trying to bind the event to do not exist yet at that moment (on document load). Ninja forms loads the form contents asynchronously, so you'll have to wait until the form is fully loaded and then add your event listeners.
This works for me:
var formExists = setInterval(function() {
if ($(".nf-form-cont").length) {
// Set your event listeners here, example:
$("#nf-field-1").click(function(e) {
console.log("click!");
}
clearInterval(formExists);
}
}, 100); // check every 100ms

Event handlers not working correctly in jsfiddle

Trying to make a jsfiddle so I can post it on here and get some help with a problem; however, I'm having a problem getting jsfiddle to act as expected, so I'm having a problem trying to document my problem!
http://jsfiddle.net/eidsonator/he4Vc/#base
I'm trying to add a blur event handler to a input with id of "part". My alert fires as soon as the page loads (which it shouldn't) and doesn't fire when focus is lost. This behavior persists in chrome and in firefox (I'm coding for an internal web app, so I can ignore ie!)
$("#part").on('blur', alert('lost focus'));
I've changed the load method, and tried wrapping it in my own $(document).ready(function() {}); as well as using .blur() and different versions of javacript... any clues?
Thanks!
You are calling alert straight away, and passing the return value of it to the .on() method. Instead, you need to pass a reference to a function that can be invoked when the event is received:
$("#part").on('blur', function () {
alert('lost focus')
});
Here's an updated fiddle.
you have written a wrong syntax .see the docs for more info,and change your code to
$("#part").on('blur', function(){
//do something
});

Javascript function does not complete

I am writing a JavaScript function to close a fancybox on the submission of the form located in the fancybox. Here it is:
function closeFancyBox() {
$.fancybox.close();
$('#calendar').fullCalendar('refetchEvents');
}
It's triggered in this way inside the fancybox:
$('form').submit(function() {
parent.closeFancyBox();
});
Here's the thing: the fancybox is closing correctly, but fullcalendar is not refreshing the display. When I call closeFancyBox(); from the console, though, it works and fullCalendar refreshes. I'm stumped here.
EDIT:
Per danronmoon's suggestion, I added a breakpoint after the $.fancybox.close(); call and checked what $('#calendar') returned... it returned a div element, as expected.
You are submitting the form so obviously it will redirect to another page so unless you stop the redirect from happening you will not see all your code work.
$('form').submit(function(e) {
parent.closeFancyBox();
// run either of the following.
e.preventDefault();
return false;
});
I am still not sure what caused this, but I did manage to 'fix' it by moving the call to fullCalendar's refetchEvents to the fancybox afterClose hook.
So in short, this fixed the symptoms, but I don't know what was causing the underlying problem.

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