I have an AjaxDropDown and I am calling the onchange event whenever the dropdown value changes. In the ajaxstop function I am binding data to the drop-down and selecting some value. So the focus is currently on dropdown as I am using select. Afterwards, whenever I click anywhere on the page the onchange event is called. Is there any way to set the focus of that dropdown to false after using select?
Here is my code:
$(document).ajaxstop(function(){
var dropDown=$('#ddlDropDown').data('tDropDownList');
dropDown.select(0);
});
Why not set the focus to something else, preferably something useful:
$('#other').click(function() {
$('#target').focus();
});
Related
I've just created a simple textbox where inside I binded the .click event to show the Datepicker, anyway, seems that at first click the Datepicker can't show, but if I click outside the control and then click again over the textbox I can see the Datepicker, I wonder why happen this?
Check out my code here:
<input type="text" id="calendar" placeholder="calendar">
$(function()
{
$('#calendar').click(function()
{
$(this).datepicker();
});
});
FIDDLE.
You are initializing Date picker on your text box click. You have to initialize on document ready method if you want to Open date picker immediate after page load
Change your initializing code to
$(function()
{
$('#calendar').datepicker();
});
For your reference fiddler updated
You don't have to use the click event to start the date picker.
All you have to do is remove the click event and it will work!
The date picker is already attached to your input box and will handle the events by itself.
Calling datepicker() does not invoke the calendar display. What datepicker() did was to attach a 'show calendar' event on input-focus. That's the reason why you see the calendar only when you put the focus back on the input field (not on every click of #calendar element).
If you want to trigger the display of calendar due to some other event (like button click), you can call $('#calendar').datepicker('show').
I wanting to get the currentTarget to pass to a function, once I have changed the value of a select programmatically.
Is this possible? Something like,
$('input[name="client_id"]').val(model.get('id')) //Change the value of select
this.doSave( $('input[name="client_id"]')); //Do save expects event(e) as parameter
function doSave(event){
console.log($(event.currentTarget);
}
I have simplified this down massively, basically I am changing a select programmatically, and then want to fire my save event, which normally gets triggered on a change event, and as a result takes an event as a parameter, but all I have is the DOM element? Is there a way to send it an event?
Use the change event handler as below :
$('input[name="client_id"]').on('change', function(event) {
console.log($(event.currentTarget);
});
or
$('input[name="client_id"]').on('change', doSave);
function doSave(event){
console.log($(event.currentTarget);
}
First of all,
This
$('input[name="client_id"]')
apparently, changes the value of an input and not select.
This
$('select[name="client_id"]').val(model.get('id'))
changes the selected option in a select.
You can bind the change event on a select like
$('select').change(function(event){
//use event here
//or pass to doSave(event)
});
and it will be fired when call
$('input[name="client_id"]').change();
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 wrote this snippet of javascript/jQuery to change a check box.
http://jsfiddle.net/johnhoffman/crF93/
Javascript
$(function() {
$("a").click(function() {
if ($("input[type='checkbox']").attr('checked') == "checked")
$("input[type='checkbox']").removeAttr('checked');
else
$("input[type='checkbox']").attr('checked', 'checked');
return false;
});
$("input[type='checkbox']").change(function(){
console.log("Checkbox changed.");
});
});
HTML
<input type="checkbox" />
Change CheckBox
Interestingly, clicking the link alters the text box, but does not trigger the form change event that calls the function that logs a message in Chrome Web Developer Console. Why? How do I make it do that?
You need to trigger the change event, .trigger('change'), so that event knows that a change took place.
From http://api.jquery.com/change/:
Description: Bind an event handler to the "change" JavaScript event, or trigger that event on an element.
This method is a shortcut for .on( "change", handler ) in the first two variations, and .trigger( "change" ) in the third.
The change event is sent to an element when its value changes. This event is limited to <input> elements, <textarea> boxes and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
Demo:
http://jsfiddle.net/nPkPw/3/
Using chaining: http://jsfiddle.net/nPkPw/5/
i.e. $("input[type='checkbox']").trigger('change').attr('checked', 'checked');
This isn't surprising, but I guess you could as this to the list of non-effect in the msdn.
"This event is fired when the contents are committed and not while
the value is changing."
"The onchange event does not fire when the
selected option of the select object is changed programmatically."
You could always just .click() it jsFiddle
My OnChange event does not work properly - I want to trigger a function when user changes a textbox's value. But in my tests I have seen that the function triggers when textbox's value changes and textbox loses focus. Something wrong with my browser? Or is it about the ability of JavaScript? If the last one is true how can I can do that? Thanks in advance.
onchange event will trigger when an input field loses focus or when an option is selected from a dropdown menu, that's normal behavior.
If you want an event that will be triggered as the user types in an input field, you can use onkeypress, onkeydown or onkeyup events.
You could do with jquery:
$("textbox_id").keyup(function(){
//do something here
});
write the jquery code on keyup event and blur event also, because if user paste some copied data into textbox by using mouse only in that case only blur event called by jquery.