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();
    })
Steve Salowitz
  • 1,283
  • 1
  • 14
  • 28
  • 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. – Jake Bathman Sep 18 '15 at 18:02
  • The style for the template and cloned rows are the same. How do I inspect eh click attachments in Chrome? – Steve Salowitz Sep 18 '15 at 18:07
  • 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. – Jake Bathman Sep 18 '15 at 18:09
  • The click event is not triggered when the datepicker displays the calendar in the template row, just when a date is selected. I couldn't find another event that fires when the calendar is activated either – Steve Salowitz Sep 18 '15 at 18:29
  • 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. – Jake Bathman Sep 18 '15 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();` – Jake Bathman Sep 18 '15 at 18:37
  • When I click on the original element with a date picker attached, the click event is not called but the datepicker activates and displays a calendar. I tried your second idea and that did not work either. – Steve Salowitz Sep 18 '15 at 18:44
  • 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. – Jake Bathman Sep 18 '15 at 18:53
  • Let me back up a bit. I am cloning an entire row in the table, one of the input elements (original name is 'idStartDate] has the datepicker attached to it. After it is cloned the name is the same but adds a '_(rownumber)'. If its the second row in the table it would be 'idStartDate_2' etc. That is why I am trying to add the datepicker in the last two lines of the code – Steve Salowitz Sep 18 '15 at 19:03

3 Answers3

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();            
})
Steve Salowitz
  • 1,283
  • 1
  • 14
  • 28
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.

Community
  • 1
  • 1
Jake Bathman
  • 1,268
  • 3
  • 18
  • 25
  • You are on the right path! http://stackoverflow.com/questions/5788999/jquery-datepicker-on-cloned-elements 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. – Steve Salowitz Sep 18 '15 at 20:26
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.

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111