2

I am cloning a HTML table row and appending it to the end of the table. One of the fields is a start date. I want to add the jQuery UI datepicker to the cloned row but I am unable to make it work. After the .clone and before it's appended to the end of the table, the input and select elements id and name properties are incremented by 1. In the template row I am adding the datepicker to idStartDate and when it is cloned/appended the new id would be idStartDate_(row number). Shouldn't the $(element).datepicker() work? When I do an inspect element in chrome on the cloned row, it has the hadDatepicker class assigned but I still cannot get the picker to activate.

    $("#addRow").click(function() {

        count++;         

        $("#rowCount").val(count);

        var $clone = $("#ids tbody tr:first").clone();

        $clone.attr({
            id: "emlRow_" + count,
            name: "emlRow_" + count,
            style: "" 
        });
        $clone.find("input,select").each(function(){
            $(this).attr({                  
                id: $(this).attr("id")+"_" + count,
                name: $(this).attr("name")+"_" + count
            });           

        });
        $("#ids tbody").append($clone);

        var element = "idStartDate_"+count;         
        $(element).datepicker();
    })
Improve this question
9
  • 1
    Does the string element have the correct CSS selector in it? Such as #idStartDate_3 (with the #) to properly select the element? The other option might be that the click handler isn't binding to the new element properly on the DOM. You can inspect click attachments in Chrome's dev tools panel as well. Commented Sep 18, 2015 at 18:02
  • 1
    When you've got Inspector open, go to the Sources tab at the top. Then, on the right, you'll see Event Listener Breakpoints. Expand that, expand Mouse, and check the box next to click. Then, go click something. If there's a click handler attached to it, the javascript will pause and you'll see the relevant handling code highlighted in the Sources tab. Commented Sep 18, 2015 at 18:09
  • 1
    And this is different behavior than when you click on the "original" element with datepicker attached, right? I'm still thinking after the clone that the datepicker isn't attaching right to the new DOM element. Commented Sep 18, 2015 at 18:33
  • 1
    I have another idea. You should chain the datepicker() to the end of append(). So it'd look like $("#ids tbody").append($clone).datepicker(); Commented Sep 18, 2015 at 18:37
  • 1
    Okay wait, hang on. So at the end of that function, you set element to 'idStartDate_'+count, but that id is never assigned to the element itself. Instead, you're giving the clone the id of "emlRow_" + count. What is the actual id of the cloned element, after it's cloned? Let's make sure you're correctly attaching to that. Commented Sep 18, 2015 at 18:53

3 Answers 3

Reset to default
2

The 'hasDatepicker' class was being added to the target element because of the cloning, not the jQuery. Once I removed the class and then added the .datepicker() to the element it worked properly.

$("#addRow").click(function() {

        count++;         

        $("#rowCount").val(count);

        var $clone = $("#ids tbody tr:first").clone();

        $clone.attr({
            id: "emlRow_" + count,
            name: "emlRow_" + count,
            style: "" 
        });
        $clone.find("input,select").each(function(){
            $(this).attr({                  
                id: $(this).attr("id")+"_" + count,
                name: $(this).attr("name")+"_" + count                  
            });           

            if($(this).attr("name")=="idStartDate_"+count){
                $(this).removeClass('hasDatepicker')
                $(this).datepicker();                               
            }                   
        });

        $("#ids tbody").append($clone);
        $(".datePick").datepicker();            
})
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I think I found some answers for you, or at least somewhere to go that might help you out. THe issue might have to do with how jQuery attaches to elements like this that are created dynamically. Here's a few threads which highlight the issue and how you might solve it:

putting datepicker() on dynamically created elements - JQuery/JQueryUI

jQuery Datepicker does not work in dynamic element

Aside from those, I'm afraid I'm at a loss for any more ideas.

Improve this answer

1 Comment

You are on the right path! stackoverflow.com/questions/5788999/… This helped me out. The 'hasDateicker' class was being added by the clone and not the jQuery so it would never activate. Once I removed it then added the .datepicker to the element I was good to go.
1

The selector:

var element = "idStartDate_"+count;

is not valid selector by id try change it to:

var element = "#idStartDate_"+count;

the hasDatepicker is on the element because it's cloned.

Improve this answer

1 Comment

Please provide a fiddle to test the issue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.