jquery ui datepicker not working with dynamic html

Question

I have successfully attached jquery UI datePicker to a dynamically created textbox, Al works fine excepts when I select a date it is not coming in corresponding textbox, But it comes in my first textbox which is not dynamically created. My code is like this

 $(".add-more").click(function () {
        $this = $(this);
        $section = $($("." + $this.attr("data-section"))[0]).html();// This is a section in my HTML with multiple textboxes
        $this.parent().append('<div class=' + $this.attr("data-section") + '>' + $section + '</div>').fadeIn(); 

        $(".datepicker").removeClass('hasDatepicker').datepicker();

    });

HTML

<div id="Div1" class="section-container">
    <div class="education-item" style="display: none">
        <p>Institute:<input type="text" name="txtInstitute"   /></p>
        <p>Start Year:<input type="text" name="txtStartYear" class="datepicker" /></p>
        <p>End Year:<input type="text" name="txtEndYear"  class="datepicker"/></p>
    </div>
</div>

JSFiddle Here

Try jsfiddle.net/xUYM2 ( i just use more accurate indication of elements to create datepicker ) — Vasiliy vvscode Vanchuk
– Vasiliy vvscode Vanchuk, Commented Mar 15, 2014 at 11:33
Ahhh..That work like a charm. You can add this as answer here :) — None
– None, Commented Mar 15, 2014 at 11:38

Vasiliy vvscode Vanchuk · Accepted Answer · 2014-03-15 11:42:06Z

5

Try to use more accurate indication of elements to create datepicker. Like here http://jsfiddle.net/xUYM2/

$(".add-more").click(function() {
    $this = $(this);
    $section = $($("." + $this.attr("data-section"))[0]).html();
    var block = $('<div class=' + $this.attr("data-section") + '>' + $section + '</div>')
    $this.parent().append(block).fadeIn();

    block.find(".datepicker").removeClass('hasDatepicker').datepicker();
    showHideRemove($(this).parents(".section-container").find(".remove-item"), 1);
});

P.S> it will be better to use local variables in you script like

    var $this = $(this); // without var keyword your variable will be global
    var $section = $($("." + $this.attr("data-section"))[0]).html();

answered Mar 15, 2014 at 11:42

Vasiliy vvscode Vanchuk

7,1992 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

None Over a year ago

I have found some issues in your code now, like if i remove the display:none section in the first html, I can't initialise datepicker there. fiddle here jsfiddle.net/xUYM2/1

None Over a year ago

Can you please look in to that one

Irvin Dominin Over a year ago

@Athul add this line at the script start, $(".datepicker").removeClass('hasDatepicker').datepicker(); demo: jsfiddle.net/xUYM2/2

Vasiliy vvscode Vanchuk Over a year ago

Oh, sorry. that's cause i remove $(".datepicker").datepicker(); from ini-function. But than you will get problem.Because datepicker add id to element in wich he laced ( like dp1394890273025 ) - to identify input. And if you will create datepicker object and then duplicate html block - you will copy element id too. And you will get two elements with similar id (dp1394890273025 in my case ). So - this is invalid html and search by id would not work. that is why when you edit new input you have new value at first input like here jsfiddle.net/37wj5

Vasiliy vvscode Vanchuk Over a year ago

You must clear id ( or , better, to have clear block of code at template block ) Check possible answer here jsfiddle.net/N9eSN

|

gsamaras · Accepted Answer · 2015-04-16 21:01:30Z

1

Add this line in the add-more function

$(".datepicker").removeClass('hasDatepicker').datepicker();

edited Apr 16, 2015 at 21:01

gsamaras

73.7k50 gold badges210 silver badges330 bronze badges

answered Apr 16, 2015 at 20:41

user3805033

1571 silver badge3 bronze badges

Collectives™ on Stack Overflow

jquery ui datepicker not working with dynamic html

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related