tags:

views:

300

answers:

7

Hello there,

I've got a gridview that renders as a table. I have an "Add" button and clicking on that, it will create a new row in the table. The row creation is done using "clone(true)" method in jQuery. The cloned row is a dummy row which is hidden in the gridview. I've assigned jQuery DatePicker for a TextBox. It works fine for the existing row. But when I click the DatePicker textbox for newly added row, it doesn't open. It opens for the existing row. What might be the problem?

+2  A: 

Hard to tell with out seeing your code but..

This is probably due to the jquery used to assign the datepicker to the input is called on page load. Hence when you clone the input the newly cloned input doesn't have the datepicker hooked up to it (since it didn't exist on page load).

You will need to hook up the datepicker to the new input after you call the clone method.

CeejeeB
+3  A: 

I assume you added the datepicker on document.ready to all elements that match a given selector. This does not add it to elements created in the future. To do that, you should check out jQuery live:

Binds a handler to an event (like click) for all current - and future - matched element.

Tim Büthe
Didn't work ▼. Any other idea?
engineerachu
A: 

Maybe the cloned TextBox has the same ID as the original one, thus confusing the calendar control? If not, please provide more code and possible error messages.

Pekka
Didn't not work???
engineerachu
A: 

My code is like:

$("input[name $= 'txtDateOrdered']").datepicker({

        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});
engineerachu
Even if I give .ClassName, it doesn't work for the newly added row.
engineerachu
You should add your code to the question, not as an answer. You may also post a complete working site where we could reproduce the error.
Tim Büthe
Also your formatting is screwed. Man, you have to do some basic work here. If the guys think you are lazy, nobody will put much work in helping you...
Tim Büthe
@Tim Büthe I'm new to StackOverflow, so I find difficult time formatting it.
engineerachu
@engineerachu: I see. Check out http://stackoverflow.com/editing-help for more Information. And you could use the "edit" link on your question, to add the code you provided here.
Tim Büthe
A: 

You can also add/force an event to manage the process. For an example, I have one place where I add and autocomplete to an added item. I manage the "change" event thus (inside a .change() function):

$(this).change(); // fire change event (to be used in other user controls)

Then I call a function inside a change event handler for the specific item which has an autocomplete in it to add it to that item. There are other ways, my circumstance dicated I do this manually as I am manipulating a complex newly added section, not just a table row.

/* apply autocomplete function */
function myAddAuto()
{
    $(".cptEntryArea").autocomplete("mywebservice/myService.asmx/GetMyAutocomplete", {
        dataType: 'json',
        data: {},
        type: "POST",
        contentType: "application/json; charset=utf-8",
        parse: function(data) { return myAutocompleteJSONParse(data); },
        maxRows: 100,
        formatItem: function(row) { return row["Description"] + ' (' + row["MyCode"] + ')' },
        minChars: 2,
        matchSubset: false,
        scrollHeight: 100,
        width: 300
    });
};

There are other ways, but the basic premise is the same - add the handlers to the newly added entity within the row you add to the table.

Mark Schultheiss
+1  A: 

Try this:

 $("row-you-are-cloning").clone().appendTo("your-table").datepicker({
    showButtonPanel     :   true,
    showOn              :   'button',
    buttonImageOnly     :   true,
    buttonImage         :   '../../Image/calendar.gif'
});
Majid
A: 

You have to remove the "hasDatepicker" class from the cloned element first.

$(".selector").removeClass('hasDatepicker').datepicker({
        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});
miya