I'm using the following code to insert extra form fields.
function addFormField() {
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>");
}
I'm dynamically sending the field values to mysql when a blur event occurs. However, when this field is inserted, it doesn't recognise and the blur event isn't picking up when any value has been entered on the new fields. Is this due to the original blur event handler being set up on document ready?
How do I get the mysql update jquery code to recognise when the extra form fields are made visible after the document ready initialisation has already been completed? I've tried various events based on the div id but to no avail.....
The reason your code is not working for the dynamically added inputs is because when you do something like:
$(selector).blur(myFunction);
jQuery goes through every element that matches selector at that point and adds an event handler that runs myFunction when the blur event is fired happens on the element. This means that any elements that match selector added after this line of code runs will not have been bound.
To get around this problem, jQuery introduced the live function in 1.3. As the documentation reads:
Binds a handler to an event (like click) for all current - and future - matched element. Can also bind custom events.
Unfortunately, as of right now jQuery does not support the blur event with the live function.
Your options then are:
A) Run the binding code everytime you add new inputs.
B) Use the livequery plugin, which is that live is based off of and does support blur.
Personally, I would go with A.
You should bind your events using the live() method:
for example:
$("input").live("blur", function() { ... });
That way, any fields added at runtime will be bound to the event handler.
EDIT: as pointed out in the comments, "blur" is not supported, but there's a plugin that does support this event: http://plugins.jquery.com/project/livequery
Related
I'm confused by this line in my project:
This id: categories-product belong to <select> and I've seen in project someone wrote this: And I'm wondering what this basically means ?
$('#categories-product').val(product.category.id).trigger('change');
Please could anyone explain me this?
Thanks
Most jQuery methods provide chaining by returning this (which is the jQuery set you called the method on). This is an absolutely key part of the jQuery API. val is one of those methods. So that code is doing this:
$('#categories-product').val(product.category.id);
$('#categories-product').trigger('change');
...but without having to look up the element a second time.
So it's setting the value of the select, and then triggering the change event on it (presumably so handlers for that event do something).
trigger('change') will actually allow the javascript runtime to execute the change event for the element. If you have associated any change event to that element then this will allow to explicitly trigger that change event.
Actually, the work of trigger() is to just execute all handlers and behaviours attached to the matched elements for the given event type. And specifying the event name as a parameter will only trigger that event. Like,
trigger('change') //triggers the change event listener only
trigger('click') //triggers the click event listener only
So, your code
('#categories-product').val(product.category.id).trigger('change');
Will set the value of the #categories-product and then this will explicitly trigger the change event so that the change action that is associated with this element is executed.
To understand it better you can break this line in 2 statements
$('#categories-product').val(product.category.id);
$('#categories-product').trigger('change');
Now, it is clear that the first line sets the value and second line triggers the change event. The above is just a shorthand way of clubbing the statements into one statement.
There must be a drop down i-e select tag in your DOM with id as categories-product.
And
$('#categories-product').val(product.category.id).trigger('change');
is setting some value as selected value and then triggering a change event so that if there is any listener added for change event on that selector, the callback should be executed
It is called Chaining in Jquery, find more details at Jquery Chaining. It is equivalent to
$('#categories-product').val(product.category.id);
$('#categories-product')..trigger('change');
I am allowing for the user to click a link, which will add a field to the page. The user can click the link to add as many fields to the page as they like. When the field is clicked, a calendar appears, because it is a date field. I am using the Any+Time calendar. The jQuery waits for a click event from the field with a specific id. Here is the code:
$('#start_date').click(
function(e) {
$('#start_date').AnyTime_noPicker().AnyTime_picker().focus();
} );
The id is start_date. The problem is that the user can click the link to add a new field called start_date and since the id is the same, the jQuery event listener cannot uniquely identify each field. Is there a known solution for this kind of a scenario?
I'm not clear: does appending the unique number not work for you? If you're OK creating the field but it's not attaching the click handlers, then try adding a class="pickerField" to the elements when you create them, and change your handler to:
$('.pickerField').click(
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
I believe that should work with jQuery 1.7.2. If for some reason it doesn't, then try the following instead:
$('.pickerField').on('click',
function(e) {
$(this).AnyTime_noPicker().AnyTime_picker().focus();
} );
If you're using an older version of jQuery, try using live instead of on.
I am writing a jQuery script that needs to work with an existing unchangeable plugin. This plugin listens for text being typed into an <input type='text'> and then processes the result. I can't alter this. My script is setting the text of the input via $('#display).val(newValue); as a jQueryUI Slider is dragged. I need the plugin to recognize this value as being typed by the user so that it processes the newValue as the slider is dragged.
Can anyone point me in the write direction for this?
You probably need to 'trigger' the keyup (or keypressed?) event so that the event handler is fired.
Here is one (slightly dirty) way to do it:
var e = jQuery.Event("keyup");
e.which = 50; // # Some key code value
$("#display").trigger(e);
Note that the plugin may be looking for particular keys, and I may have guessed the event wrong.
The more sophisticated way to do it would be to track down the plugin's event handler, and then invoke it directly. FireBug may help you find it by step-through debugging. Otherwise, you can use jquery to start inspecting the input's event handlers.
var events = $('#display').data("events");
jQuery.each(events, function(key, handlerObj) {
console.log(handlerObj); // alert(handlerObj);
});
Once you've found the relevant handler, you can invoke it directly.
HTH
You have to put an Onchange listener to the text field and trigger the necessary function to listen to onchange values of the user. eg:
function func(){.....put your logic.....}
If you are looking at reading value from a text field on changing a slider, then you have to put the necessary function on the slider control.
I'm working with an existing system set up by someone else (no longer here). In this system, clicking on the text within a special <span> will trigger a js function which will replace the text with an <input> field. The text which was there is assigned as the value of the <input> element.
An onblur event is assigned to this new <input> field. This calls a function which updates the data in the database via an AJAX call. As part of this action, the <input> field is replaced with the new value (same <span> contents), and the onclick event is re-assigned. In this way, you can click on the text, change it, click elsewhere, and it is automatically updated in the database. Then you can do it again as it sets up the original events dynamically with each update.
It is in-between the first event and the second that I want access to that <input> field. I want to add a jquery .datepicker() to it.
How would I go about calling .datepicker() on a dynamically-created element?
No, there isn't an event similar to an onCreate. The closest you can find is jQuery's .live(). This allows you to bind an event to an element now or in the future. I also think it will probably solve your problem.
http://api.jquery.com/live/
$('input').live('click', function() {
$(this).datepicker();
});
As AutoSponge handily pointed out, live is deprecated as of jQuery 1.7. They suggest using on or delegate instead.
http://api.jquery.com/on/
http://api.jquery.com/delegate/
I'm trying to determine when any of a set of named input/select/radio/checked/hidden fields in a form change.
In particular, I'd like to capture when any changes are made to fields matching jQuery's selector $("form :input"), and where that input is has a name attribute. However, the form isn't static i.e. some of the fields are dynamically added later.
My initial thought is to keep track of when new named elements matching :input are added, and then add an event handler, like this:
function on_change() {
alert("The form element with name " + $(this).attr("name") + " has changed");
}
function reg_new_e_handler(input_element) {
input_element.change(on_change);
}
However, I'm quite hopeful I can avoid this with some jQuery magic. In particular, is there a way to register an event handler in jQuery that would handle input elements that match the following:
$("form :input").filter( function () { $(this).attr("name") } ).change(on_change);
However, have this event set update whenever new input elements are added.
I've thought that it may be possible to capture keyup event on the form node with $("form").keyup(on_change), but I'm not so sure how one could capture change events.
I'd also like this to capture keyup events.
Thank you for reading.
Brian
You're looking for live events.
For example:
$(':input[name="something"]'.live('change', function(e) {
//Do things
});
Adding an event handler using .live will handle the event for all elements that match the selector, no matter when they were added.