Click after removing disabled from button - javascript

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();
}
});

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.

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 */
});

How to get xpages modal to fire a close event

I have an xpage (viewed via web browser) which has many <xe:dialog...> controls on it, resulting in bootstrap modal dialogue boxes.
I want to run some client-side script when any dialogue is closed.
So I tried ..
$('.modal').on('hide.bs.modal', function() { ...}
However this didn't work, I suspect because when the xpage is loaded there aren't actually any elements with class 'modal', until one is opened. Then a partial refresh injects the relevant HTML.
So I tried running that line above in the event when the modal opens (in the xpages onShow event), but that didn't fire either. I guess the event might be 'when the modal opens but before it's displayed' meaning the elements aren't ont he screen then either.
So I also tried (hack, hack) a setTimeout of 2 seconds to allow the modal to show first, but still no luck.
So .. question is ..
Using xpages bootstrap modals, via the standard xe:dialog control, how can I attach a client-side javascript event whcih will run when the modal is closed / hidden ?
You can use Event Delegation to bind the listener to a parent element of the (non-existing) modals and trigger a function when a click happens on elements matching the .modal selector in that parent element:
$(document).on("hide.bs.modal", ".modal", function () {...});
I do something similar to this, where a button selection on one modal, closes said modal, and then depending on the button that was clicked, opens the next modal. Instead of doing that, could you not run your script in the same way?
var
currentModal = $(this);
//click next
currentModal.find('.btn-close').click(function(){
currentModal.modal('hide');
OTHER STUFF?
EDIT - My full code:
<script type="text/javascript">
$("div[id^='myModal1']").each(function(){
var
currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal3']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal2']").first().modal('show');
});
});
$(window).on('load',function(){
$('#myModal1').modal('show');
});
</script>

Where to write Script which fires immidiately on changing DropDown Value

I've a web application on asp.net using vb.net. On one of the UI Screens, there's a drop down having a post back on onSelectedIndexChange.
The problem is I want to block the entire UI as soon as there's a onSelectedIndexChange and wish to unblock it after the event is completed.
I tried experimenting putting an alert() in Page.Init but it's not firing as soon as I change the Value in DropDown. I even tried putting the alert() in the start on the onSelectedIndexChange method but it didn't work too.
Where should I write the script which fires as soon as I change the DropDown?
Try blockUI with jQuery
$( ".target" ).change(function() {
$.blockUI({ message: '<h1>Just a moment...</h1>' });
});

Jquery toggle, if javascript is disabled take user to a page

I have a div that appears and disappears through the use of a jquery toggle. When yuo click a link the div appears or disappears.
Is there a way to make it so if javascript is disabled and a user clicks the link they are taken to a page instead?
Is there anything I should do when using a toggle to ensure it doesn't encounter problems?
Make the link take the user where you want them to go if js is disabled by default. Then use jQuery's preventDefault() on the click event (where you are probably defining your toggling behavior).
So the link should work on its own:
<a id="functioning-link" href="/js_disabled_page">Toggle my div</a>
Your jQuery should grab the click event to toggle your div, which will only work if jQuery/js is enabled:
$(function(){
$("#functioning-link").click(function(e){
e.preventDefault();
$("div").toggle();
});
});
You can use both href and onClick for this.
If the javascript is disabled, href fires up
else onClick!
For example:
Click to toggle
Javascript:
toggle = function() {
// Your code here
return false;
}

Categories