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/
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 have a table and when I click in a row the data of this row is copy to some input text. I have an empty select combobox and this will fill with one thing or another depend the content of the input. I'm ussing the event onchange for do this but it doesn't work because I'm not writing in the input. I put here the relevant code.
<td><input type="text" id="club" value="" onchange="load()"/></td>
function load()
{
var club=document.getElementById("club").value;
alert(club);
}
Pretty and straight forward way of doing this is to use bindings as in some reactive libraries like knockoutjs.
A quick hack is to call your load function in the click handler for a row after all your processing. ( copying text n all).
Firstly, the script in question has to be withing tags if you're defining it inline with html (which I don't recommend)
secondly, you'll need to prepend your function call with javascript: e.g.
onchange="javascript:load()"
I would recommend looking into event listeners or jquery instead, however.
document.getElementById("club").onchange();
Should do the trick. You can fire these events manually!
I want to know how to trigger the onClick event of any select(html combobox element).
I tried to do $('#MySelect').click(); using jQuery and tried document.getElementById('MySelect').click(); using pure javascript.
But the two don't fire the dropdown event that have the options of the select.
Ps: i have sure that selector $('#MySelect') exists.
are you looking for this
document.getElementById("MySelect").selectedIndex=3;
Programatically triggering a click event will only run the defined click handler for that element. As you say in the comments, you have no such method defined, therefore no action will take place.
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'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