I need to disable a button between the duration when it is clicked and the response arrival. My goal is to stop the onclick function getting executed if someone clicks the button again before the response has arrived.
Which is the correct function to use in this case.
$('#mybutton').unbind('click');
$('#mybutton').attr('disabled', true);
Disable button should be a must for a better user experience (optionally button text can be changed along with a different style), removing only onclick event can't provide good user experience as user can still click on the button which doesn't have any impact. Not necessarily to be followed but it can be an approach: remove onclick (extra cautious) and then disable the button.
$('#mybutton').unbind('click');
unbind() function removes onClick event handler from the selected element.
$('#mybutton').attr('disabled', true);
This code sets a disabled attribute to the selected element. A disabled button cannot be clicked and is usually styled differently.
A preferred way to disallow user to click a button is to make it disabled. If some conditions change and you want to make it clickable, you can remove this attribute and don't need to attach onClick event again.
$(".myButton").prop("disabled", true);
$(".myCheckbox").click(function() {
$(".myButton").prop("disabled", false);
});
It is more appropriate to remove onclick. Disabling the field is not equivalent: browsers may add styling to it and/or not include it in the form submission, should it be submitted.
You may also find that the onclick event fires even when the button is disabled.
Related
I am trying to simulate an onclick event on a drop down.
I have an IE object that is going to a page and I need to change a dropdown which has an onchange event:
$('select[name="blah"]').val(3).trigger('change');
$('select[name="blah"]').change(function(){
alert('changed');
});
When I try this, I would expect the alert to fire as it's technically an onchange.
http://jsfiddle.net/3y5hmyf0/
Is there a way to acomplish this?
More Details
My tool is controlling another IE page through an object. It navigates to the page and finds the select drop down on the page. From there, if you did it manually it has an onchange event when making a selection.
I am trying to get jQuery to simulate as if it was being clicked by a person to it triggers that on change event.
I have tried .trigger and .change and couldnt get either of them to work.
The only reason your code does not work is the order you are executing it. You need to connect the handler before triggering it:
JSFiddle: http://jsfiddle.net/3y5hmyf0/1/
// Wire up event handler
$('select[name="blah"]').change(function(){
alert('changed');
});
// Now generate the event
$('select[name="blah"]').val(3).trigger('change');
Note: Your manual change trigger is still required as a change event must normally be triggered by user interaction. Setting the value is not enough.
$('select[name="blah"]').change(function(){
NotifyChanged();
});
function NotifyChanged() {
alert('changed');
}
If you want to test the logic in the changed function, just call it.
I have a button named check amount and some select fields. If I choose something in a select field another select field appears (select.select_operator). I want to make a script which disables the click action on the check amount button until select.select_operator field appears. I tried to add setInterval function but I have some alertifies and it is shown too many times. I also tried to unbind the off click event in the first if statement, but it doesn't work. The code looks like this:
$("a#checkAmount").one("mouseover",function(){
if($("select.select_operator").length){
}
else {
$("a#checkAmount").off("click");
alertify.error("Please select a condition first");
$("select.select_condition").effect( "highlight",
{color:"#ffff87"}, 2250 );
}
});
What can I do to unbind off(click) from the check amount button when select.select_operator appears?
I hope I got your problem right this time. :)
Enabling the button should go in the same place where you set the condition for it to be clickable again.
I made a small JSFiddle to demonstrate what I mean.
If you're having trouble with the click event of the button firing too often, make sure you detach other handlers first:
$('#clickme').off('click');
$('#clickme').on('click',function(){alert('You selected something, good boy');});
Before I click reset button I choose "Company" in Chosen (dropdown list). The event occurs normally after I click reset. I choose "Company" again but event change in dropdownlist doesn't occur.
Could anyone tell me how to trigger the change event for dropdownlist after clicking reset button and then the same element?
The code I have so far:
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
Code for the reset button:
$("#btn_reset").click(function() {
CKEDITOR.instances.ckeditor.setData('');
$('.mchosen').each(function() {
$(this).val('').trigger('liszt:updated');
$('#submenu').attr('disabled', 'disabled').html('');
$('#secondsubmenu').attr('disabled', 'disabled').html('');
$('#s-menu').removeClass('required').html('');
$('#secondsubmenu').removeClass('validate[required]');
$('#tabmenu').attr('disabled', 'disabled').html('');
$('#tab').removeClass('required').html('');
});
});
This is what i figured out:
$('#my-select').val(5).trigger("liszt:updated")
liszt:updated is no longer working in new version of chosen instead use below as Alexandru Cojan's answer suggesting
trigger("chosen:updated");
for newer version of chosen the event is "chosen:updated"
$(selector).trigger("chosen:updated")
If i need just to refresh value in chosen select - .trigger('chosen:updated') is enough. But if I have change handler and want it to be called - i need to do .trigger('chosen:updated').change()
I don't know if this is your case or not, but your code above should work,
$("#mainMenu").change(function(e){
e.preventDefault();
loadFirstManu(true);
});
but please notice that "change" event occurs on most browsers when you unfocus the select input
So when you click reset, just before executing the reset action the onchange is triggered.
Now try clicking outside the select input after changing the selection and see if it still works or not
Maybe you should try using .on, as your $('#mainMenu') may have changed somewhere (Can't say without an example). Try doing this:
$("body").on('change','#mainMenu',function(){
...
});
or any parent selector instead of "heavy" body
If I am not wrong to understand you then you want to trigger the event change after click on the reset button.
you can do this by simply adding one line to your code
//code
$("#btn_reset").click(function(){
// your code here
$("#mainMenu").trigger('change');
//you can write this as per your requirements ie. at start or end.
});
In JavaScript (not jQuery), is there a way of preventing a link from triggering an event more than once?
I'm iterating through some anchors and attaching an onclick event to each link, which then reveals some page content relevant to that link from a json file. The only problem is that a double click or repeated clicks outputs the same content again and again.
What's the best approach to prevent this, or should I re-write the script and change the anchors to submit buttons in order to add a disabled state?
Remove the event listener after it is clicked first.
var element = document.getElementById("id_name");
element.addEventListener("click", onClickHandeler, false);
function onClickHandeler(e) {
// Do here what your code have to do
element.removeEventListener("click", onClickHandeler, false);
}
Hope this helps you
I've got an onsubmit handler added to a form like so:
$('#content_form').bind('submit',function(e) {
source = $(e.target).attr('name');
alert(source);
return false;
});
so e.target = the form element. I'm using several submit buttons, and need to determine which one was actually clicked (in modern browsers, that clicked button is the only one that submits, I'm doing this for IE6 compat - it submits the values of all the buttons).
My only thought it to kill any onsubmit events, and then tie click events to the buttons themselves. This would kill the form functionality entirely if javascript wasn't enabled, so I'd like to avoid this.
An easy (but possibly naive) implementation would be to have the onclick handler for each button set a field indicating which one was the last one clicked. In your submit handler, you could then check the value of this field.
$('#content_form input:submit').bind('click', function(e) {
$('#content_form').submit();
// you can now reference this or $(this),
// which should contain a reference to your button
});
Have you checked out the jQuery Form Plugin? It handles submitting forms via ajax very nicely and will handle this problem (along with many others) for you.
Something else you could do is use preventDefault(); instead of return false