jQuery datepicker not working inside a loop

Question

I have a jquery event which creates dynamic HTML input texts. And inside that loop, I need to show a calender. So my js codes are as below:

$('.nof').keyup(function(){
    $('.myfld').empty();
    var html = '';
    nof = $('.nof').val();
    html = html + '<div class="partners">';
    for(var x = 1;  x <= nof; x++) {
        html = html + '<div class="form_box_2">';  
        html = html + '<div class="applicantform_row"><label>Name : </label><input type="text" name="partner_name_'+x+'" /></div>';
        html = html + '<div class="applicantform_row"><label>Sex : </label><input type="text" name="partner_sex_'+x+'" /></div>';
        html = html + '<div class="applicantform_row"><label>Date of Birth: </label><input type="text" class="appdate" id="dob_'+x+'" name="partner_dob_'+x+'" onchange="getAge();" /></div>';
        html = html + '<div class="applicantform_row appage"><label>Age : </label><div id="age_'+x+'"></div> </div>';
        html = html + '<div class="applicantform_row"><label>PAN : </label><input type="text" name="partner_pan_'+x+'" /></div>';
        html = html + '</div>';
        $('.myfld').html(html);
        $(function() {
            $( "#dob_"+x ).datepicker({ /*dateFormat: 'dd/mm/yy', */defaultDate : '1/1/1980',changeYear : true,changeMonth : true });
        });
   }    
   var html_end = '</div>';
   $('.myfld').append(html_end);
});

I am able to produce the HTML textfields nuber entered in the box, but the jquery calender works for the last input field only ! Whats the reason ? Do I need to put the calender code somewhere else ?

DEMO

nathan hayfield · Accepted Answer · 2013-12-19 16:46:17Z

1

$('.myfld').html(html);

is the problem. You are looping and replacing the Html every time. So on the last time your replace all the html. But you only set the datepicker for the last element. Either wait till after the loop to add the html to '.myfld' . Or you can add a class="dob" to your dob elements. Then assign the datepicker to them all at once using the class like:

 $( ".dob" ).datepicker({ /*dateFormat: 'dd/mm/yy', */defaultDate : '1/1/1980',changeYear : true,changeMonth : true });

answered Dec 19, 2013 at 16:46

nathan hayfield

2,7051 gold badge20 silver badges29 bronze badges

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

2 Comments

Nitish Over a year ago

Well its working and not working ! The calender is pop up without clicking on the dob text field ! See my updated fiddle

Nitish Over a year ago

I appended the html $('.myfld').append(html); after the loop and also create a loop for the datepicker function too. And is working now !

tilda · Accepted Answer · 2013-12-19 17:17:08Z

0

Here the fiddle where the calendar pops out of the textbox:

fiddle

You have to add dob class to every texbox and then add datepicker function to every dob class.

 $( ".dob" ).datepicker({});

edited Dec 19, 2013 at 17:17

answered Dec 19, 2013 at 17:07

tilda

6725 silver badges8 bronze badges

2 Comments

Nitish Over a year ago

Hi @tilda . well $( ".dob" ).datepicker({}); makes the calendar pop out without clicking on the text field. This is certainly not what I am looking for !

tilda Over a year ago

I'm not sure that I understand where do you want calendar to pop up, but can you check my fiddle again? I've accidentally c/p yours instead of mine..

Collectives™ on Stack Overflow

jQuery datepicker not working inside a loop

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related