Develop Reference

JQuery datepicker only works if I put an alert() in the script

I'm coding a jQuery datatable with some input fields (on each row). One of the fields needs to be a date and so I'm trying to use jQuery datepicker to accomplish the input for that field.
The field in question is rendered for each row using a template:
var invoiceDateInputTemplate = '<input class="datepicker" id="InvoiceDate_{0}" name="InvoiceDate_{0}" type="text" />';
During the datatable build, I render the template and replace the {0} with the appropriate Id so the id & name parameters are unique for each row.
At the end of my $(document).ready() function, after the table has been built, I run the following code to make each of my 'date' fields into a datepicker enabled field using the class selection option. For some reason, this doesn't seem to want to cause the fields to become datepicker enabled:
$(function() {
$(".datepicker").datepicker();
});
If I add an alert() call prior to the $(".datepicker").datepicker(), it works like a champ... an alert() call after the datepicker initialization does NOT work.
This causes the DatePicker to render:
$(function() {
alert();
$(".datepicker").datepicker();
});
This causes the DatePicker to NOT render (included to provide an example):
$(function() {
$(".datepicker").datepicker();
alert();
});
Why is this happening? Am I missing something that would be causing the DatePicker to not initialize the fields as expected? I'm pretty sure that it isn't standard operating procedure to have to fire an alert to get DatePicker to work correctly. Also, just to clarify, I don't believe that I have any fields being focused upon after the datatable builds.

I get the feeling that you've got an async problem!
The easiest solution is to bind the call to datepicker() on a custom event, then trigger the event after the datatable is built. Like so:
$(function() {
// Create data table here
$(window).trigger('datatable.built');
});
$(window).on('datatable.built', function() {
$(".datepicker").datepicker();
});

What are you using for datatable? Most probably it renders after you attach event, in that case it should have an event like draw or somethingwhich indicates that data is rendered

Try use this:
$(function() {
$(document).on("focusin",".datepicker",function(){
$(this).datepicker();
});
});
if it works, you can improve for not "recreate" datepicker everytime the element get focus

As it turns out, #Guy had the solution... I set the function up within a setTimeout and it started working as it should:
setTimeout(function() {
$(".datepicker").datepicker();
},1000);
I should have thought of that earlier... Thanks #Guy!

Autosize jQuery plugin, trigger a autosize.update

I'm using Autosize to automatically resize textboxes (height). The plugin is JS but can be used as a jQuery plugin (explained in the site). The author explains how to trigger a manual "update" event (JS) when you change the text using JavaScript. I need to do the same, but using jQuery "mode", because I'm creating textboxes dynamically using Ajax. Tried trigger() with no success.
autosize(ta); /*Pure JS*/
ta.value = "Something really long";
var evt = document.createEvent('Event');
evt.initEvent('autosize.update', true, false);
ta.dispatchEvent(evt);
Here is a piece of my source code: http://pastebin.com/049UfkGv - after $(this).autosize(); I need to trigger "autosize.update" event to redim the textbox to its new contents.
jQuery Code:
$(document).ready(function(){
window.jQuery.fn.autosize=function(){ return autosize(this); };
});
$('.edit4').each(function(){
$(this).keypress(function(event) { if (event.keyCode==13) { event.preventDefault(); };
$(this).autosize();
});
Thank you!

you can use it as follows:
autosize.update($('textarea'));

In my case the Autosize jQuery plugin could not calculate the right height, because the textarea was hidden on pageload.
The following tigger helped me out:
function showMyTextarea(){
// do your stuff here
// trigger autosize
$('textarea').trigger('autosize.resize');
}

In my case I had to update the size of textarea not only based on changed content (this is handled by "autosize" plugin itself nicely) but based on CSS properties change as well, e.g. when user is using a slider to change the font-size of the textarea.
This worked for me:
// ... slider ui init bla bla
slide: function(){
var $textarea = $('.your.selector.for.textarea.or.cached.jQuery.object.with.target.textarea');
// .. changing the actual css property
// triggering the .autosize
$textarea.trigger('autosize.resizeIncludeStyle');
// ... etc etc
}
// ...
This is not properly described in the Autosize Documentation but the event does exist and is handled in the jQuery version of the plugin.

Autosize creates a custom event, that can be triggered manually like this:
$("thextarea").trigger("autosize");

jQuery "Chosen" on-filter event?

I want to run a function whenever the search input box is changed in chosen (jquery dropdown plugin).
But unable to find such event neither in their documentation nor on the net. Does anyone have experienced or have idea how to call some code whenever search is done in Chosen?
I tried placing the jquery .on('change' event on the textbox but it didn't work.
I wrote
$(".chosen-search input").on("change", function(e) {
//console.log($(this));
});

I had to "double" wrap the on to get the input event to fire on the Chosen text field search box:
$('#my-chosen-input').on('chosen:showing_dropdown', function() {
$('.chosen-search input').on('input', function() {
// The text has changed, do something...
});
});

$(".chosen-search").change(function(){
console.log("changinn");
});
This should work

Chosen js filters dropdown list onkeyup event. This snippet would work better:
$(document).on('keyup', '.chosen-search input', function() {
console.log('filtered');
})

Unable to attach a live event to anchor within div in asp.net

I'm trying to use a simple modification for XOXCO's tagging input jquery plugin that allows you to limit the number of tags entered.
Everything is working correctly except for this part
$('.tag a').live('click', function () {
if ($('.tag').length == 4) {
$('#MainContent_postcontrol_step2_txtKeywords_tag').attr('disabled','false').show();
$('#MainContent_postcontrol_step2_txtKeywords_tag').focus();
$('.warning').remove();
}
});
No matter what I do, the click event is never assigned to a .tag's anchor. If I change it to simply .tag, the event fires when clicking on the div itself. Am I doing this part wrong?
EDIT:
Here is the plugin im using: http://xoxco.com/clickable/jquery-tags-input
And the modification: http://jsfiddle.net/bozdoz/mJdvu/1/

It looks like (= sign typo aside) that
$('#tags_tag').attr('disabled','false').show();
needs to be
$('#tags_tag').show()[0].removeAttribute("disabled");
in the fiddle

Listen for change events in forms: JQuery

I have a form with an id of "wizard" - I only have select elements in this form. This form is in a lightbox using the JQuery plugin fancybox:
I want to know when any of these have been changed using JQuery. How can I do this? I currently have:
$('form#wizard select[name=servers], form#wizard select[name=cores]').change(function() {
var channels = parseInt($('form#wizard select[name=servers]').val(), 10) * parseInt($('form#wizard select[name=cores]').val(), 10);
$('#yellow').val(channels);
});
EDIT - I have the above wrapped in $(document).ready(function() {...}
However, it does not work, it does not even get run. I have put alerts in there and they never show up. The above only works when the above is a div that I have removed the display:none from, strange! So I am looking for a different implementation to get around this as I need that lightbox as it is.
I really need help on this.
Thanks all

The jQuery change function only binds those elements that are present when the domready event fires. If the lightbox plugin you are using is dynamically creating elements, you should be using jQuery's live function to "bind your handler to all current - and future matched elements".
Change this:
$('your selector').change(function() { /* code ... */ });
with this:
$('your selector').live('change', function() { /* code ... */ });