Question

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

But how do I apply that to my date picker? Because this isn’t an event therefore .live() won’t be able to help… right?

This is the code I’m using to bind the date picker to my input:

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

I do not want to call this metho everytime my AJAX fires, as I want to keep that as generic as possible.

Cheers 🙂

EDIT

As @nick requested, below is 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"
    });
}

What about this solution, I have a rules.js which include all my initial bindings with the elements, if I were to put these in a function, then call that function on the success callback of the ajax method, that way I wouldn’t be repeating code…

Hmmm, thoughts please 😀

Answer 1

You can do it like this:

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

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

createPickers();

Or you can run it in it’s own document.ready handle, like this:

$(createPickers);

In your success callback you call it like this:

createPickers(responseText);

What this does is only select .datefield in the provided context (internally this uses .find()), so on document.ready you’re selecting all matching elements to create date pickers, but in your ajax request, you’re selecting only the matching elements that just arrived in the response, not creating duplicate date pickers anywhere.