window.onload not working always in chrome - javascript

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.

Related

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

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

jQuery toggle() not always firing

I've been making some basic mobile navigation and am using a click event to show/hide the menu.
A reduced code sample:
jQuery('.menu-button').click(function(){
jQuery('.header-nav').toggle();
console.log('clicked');
});
I've been remotely debugging on mobile and the console.log always works, but the .header-nav toggle() seems to randomly not trigger - I can't spot a pattern to it, but it always remains in the DOM (which it should), so it being somehow removed is not the reason why it is not firing.
Any ideas?
Thanks to Kevin B's comment it seems that the click event is firing multiple times. To fix this, the following was used:
$(element).off().on('click', function() {
// function body
});
Reference: jQuery click events firing multiple times

Run Jquery Function on page load, not on image click

I'm using a jquery plugin and right now it only runs when the button is click. How can I make it run on page load? Or maybe 3 seconds after page load.
<div class="classysocial"></div>
<script>
$(document).ready(function() {
$(".classysocial").each(function() {
new ClassySocial(this);
});
});
</script>
EDIT: here is the JS for the plugin:
http://pastebin.com/Ct6asnYy
I guess Classysocial is some plugin that binds onclick event to the button.
If You can't access the plugin code, the hotfix would be to trigger onclick programatically, like:
$("your_button_selector").click()
To achieve delay, take a look at jQuery .delay() method.
Check also Javascript's native setTimeout and decide which one suits your needs.

In IE the onbeforeunload event is fired for links that don't unload the page

I am writing a plugin to a CMS (umbraco) and I wish to attach a warning dialog to various actions on the page, one such action is clicking a link (JavaScript links), in most browsers the following code works well:
$(".propertypane").delegate("a, a div", "click", function () { window.onbeforeunload = confirmNavigateAway; });
The following is an issue in IE because IE appears to trigger onbeforeunload event when any link is clicked, even though the link is not navigating away.
I've set up an example here:
http://jsfiddle.net/DETTG/8/
Note: I do not have control over the ajax controls within the propertypane, they're written by third parties.
Maybe this page will help you?
If you remove "href" then it will work. But then you would need to style it as a link element and add the attribute onclick if you want to execute a function. Here is the updated version: http://jsfiddle.net/DETTG/34/
<a onclick="alert('do some ajax');" style="color:blue; text-decoration:underline; cursor:pointer">javascript</a>

Click after removing disabled from button

Using jQuery I want to submit a button that was previously disabled. When I remove the attr of disable then do a .click() it doesn't trigger and send me to the next page. But if I do an alert("XYZ"); then .click() it sends me to the next page. I assume this has to with the time taken to disable then click(It's not disabling before the click event is fired).
Working Example Of "Broken" Behavior: http://jsfiddle.net/LmFjd/71/ - This is how I have my code setup and exactly what is not working for me. Notice that it triggers the onsubmit event, but it doesn't actually submit.
Working Example Of Expected Behavior: If you put a .show() in there it works: http://jsfiddle.net/LmFjd/70/
When there is an alert between the removeAttr and the click() it works, otherwise the click doesn't trigger.
For clarification, I'm using jquery-1.5.1.min.js. It's a JSP page, using Apache Tomcat 6.0.29. It's a spring MVC WebApp, and I'm using the section inside a jQuery UI Dialog dismiss button
Hackish Solution: Putting a .show() before the .click() makes it work.
There can be two things can be done through JQuery to do your things is Just remove the attributed disabled=disabled and on document ready use the hide and on doing some even again show you required input box, the code to do that is as under:
$(document).ready(function() {
$('#edit').hide();
"Discard changes": function() {
$( this ).dialog( "close" );
alert(actionButton);
$('#edit').show();
}
});

Categories