JQuery date picker not saved after AJAX

Question

So, I am using jQuery date picker and it works well. I use AJAX to go and get some content, obviously when this new content is applied, the connection is lost, I found out about this last week and discovered the .live() method.

But how to apply this to my date picker? Since this is not an event, therefore .live() will not be able to help ... right?

This is the code I use to bind date picker to my input:

 $(".datefield").datepicker({showAnim:'fadeIn',dateFormat:'dd/mm/yy',changeMonth:true,changeYear:true}); 

I do not want to call this method every time my AJAX fires, since I want to keep it as general as possible.

Greetings :-)

EDIT

As an @nick request below, my wrapper function got the ajax() method:

 var ajax_count = 0; function getElementContents(options) { if(options.type===null) { options.type="GET"; } if(options.data===null) { options.data={}; } if(options.url===null) { options.url='/'; } if(options.cache===null) { options.cace=false; } if(options.highlight===null || options.highlight===true) { options.highlight=true; } else { options.highlight=false; } $.ajax({ type: options.type, url: options.url, data: options.data, beforeSend: function() { /* if this is the first ajax call, block the screen */ if(++ajax_count==1) { $.blockUI({message:'Loading data, please wait'}); } }, success: function(responseText) { /* we want to perform different methods of assignment depending on the element type */ if($(options.target).is("input")) { $(options.target).val(responseText); } else { $(options.target).html(responseText); } /* fire change, fire highlight effect... only id highlight==true */ if(options.highlight===true) { $(options.target).trigger("change").effect("highlight",{},2000); } }, complete: function () { /* if all ajax requests have completed, unblock screen */ if(--ajax_count===0) { $.unblockUI(); } }, cache: options.cache, dataType: "html" }); } 

How about this solution, I have rules.js that includes all of my original bindings with elements, if I have to put them in a function, and then call that function on the ajax method callback, this way I will not repeat the code .. .

Hmmm, please think: D

Answer 1

You can do it as follows:

 function createPickers(context) { $(".datefield", context || document).datepicker({ showAnim:'fadeIn', dateFormat:'dd/mm/yy', changeMonth:true, changeYear:true }); } 

To run document.ready , if you already have a document.ready function, you can call:

 createPickers(); 

Or you can run it in your own document.ready descriptor , for example:

 $(createPickers); 

In your success callback, you call it like this:

 createPickers(responseText); 

What it is, just select .datefield in the provided context (internally it uses .find() ), so document.ready you select all the appropriate elements to create date pickers, but in your ajax request you select only the appropriate elements that just arrived In response, do not duplicate date pickers anywhere.

Answer 2

The first port of the call will read this question if you have not already done so:

jQuery live () does not work with jQuery UI datepicker

"I have a binding to the lightbox'd inputs when the lightbox first appears, but it does not work afterwards."

"When the lightbox closes, I re-add its contents to the page (so as not to lose the contents of the div), and this seems to kill the call to live ().

Answer 3

Selecting a date is a function of clicking on a text input. so you can easily go:

 $('#datepicker').live('click', function(){$(this).datepicker($.datepicker.regional['en']);})