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.
});
Related
Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.
We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();
While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here
The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt
You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');
try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/
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');});
I have a form that when the user hits edit, it changes the field from text to a textbox with a class of cat_name_edit.
The following code does not trigger when pressing any key in the textbox. Could it have something to do with the fact that I've already changed the text into a textbox?
$(".cat_name_edit").keypress(function() {
alert("hi");
});
I've also tried .click() and .keydown() with no luck. Any ideas?
Ok, apparently I had to use .live()
I think the elements are not present on page load so the events are not attached. Try using jQuery live.
$(".cat_name_edit").live('keypress', (function() {
alert("hi");
});
I put this into a fiddle keypress() works fine:
$(".cat_name_edit").keypress(function(e) {
$(this).replaceWith("<textarea class=\"cat_name_edit\"></textarea>");
$("textarea.cat_name_edit").focus();
});
keyup() would have worked too.
I've also gone to the liberty of making the function that replaces the input with a textarea.
or you could also use EventDelegation. Attach your click event to the parent which contains these textboxes, and in the function check if the target that was clicked has the class cat_name_edit and then perform your operation.
Here's what I want to do. I want to trigger an event every time a select element changes. I have a multiline select and when I make changes (click on elements), it does not change until the select box loses focus. So I'm trying to force a blur every time the select box is clicked. That way if it changes, it will trigger the changed event. If it doesn't change, nothing will happen.
How do I do this? Am I even approaching this the right way? Jquery answers are okay as well.
In addition to Ender the full code could be something like this.
$('#mySelectBox').change(function() {
$('#thingToBlur').blur();
})
Reference: http://api.jquery.com/blur/
This will find the element with the focus and trigger the blur event.
function blur(){
document.querySelectorAll('input,textarea').forEach(function(element){
if(element === document.activeElement) {
return element.blur();
}
});
}
Using jQuery do:
$('#mySelectBox').change(function() {
//do things here
});
According to the documentation at http://api.jquery.com/change/, the event is triggered immediately when the user makes a selection.
Check out this demo to verify that this works: http://jsfiddle.net/AHM8j/
You could attach an onclick handler to the select and the individual options. basically onclick="this.blur();". I've always found that click events on <select> elements to be a pain, as nothing happens at the point you expect it to.
Okay, Here's what was going on. I was including the -vsdoc version of JQuery instead of the actual JQuery library. This also fixes some issues I was having with some plugins such as blockUI.