shibbir ahmed shibbir ahmed - 6 months ago 6
jQuery Question

jQuery clone() issue

Here is my full html date and time table :

<div class="addmore_box_date">
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-4">
<input type='text' name="add_date[]" class="form-control" id="add_date" placeholder="Select date">
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<select class="form-control add_time" id="add_time" name="add_time[]">
<option value="">Select time</option>
<option value="12:00 Am">12:00 Am</option>
<option value="1:00 Am">1:00 Am</option>
<option value="2:00 Am">2:00 Am</option>
<option value="3:00 Am">3:00 Am</option>
<option value="4:00 Am">4:00 Am</option>
<option value="5:00 Am">5:00 Am</option>
<option value="6:00 Am">6:00 Am</option>
<option value="7:00 Am">7:00 Am</option>
<option value="8:00 Am">8:00 Am</option>
<option value="9:00 Am">9:00 Am</option>
<option value="10:00 Am">10:00 Am</option>
<option value="11:00 Am">11:00 Am</option>
<option value="12:00 Pm">12:00 Pm</option>
<option value="1:00 Pm">1:00 Pm</option>
<option value="2:00 Pm">2:00 Pm</option>
<option value="3:00 Pm">3:00 Pm</option>
<option value="4:00 Pm">4:00 Pm</option>
<option value="5:00 Pm">5:00 Pm</option>
<option value="6:00 Pm">6:00 Pm</option>
<option value="7:00 Pm">7:00 Pm</option>
<option value="8:00 Pm">8:00 Pm</option>
<option value="9:00 Pm">9:00 Pm</option>
<option value="10:00 Pm">10:00 Pm</option>
<option value="11:00 Pm">11:00 Pm</option>
</select>
</div>
</div>
<br/>
</div>
<label for=""><a id="addmoredate">Add more date & time</a></label>


Now I am going adding more date and time using
Add more date & time
link. It's perfectly adding new date and time. But here is an issue :

E.g. By default it's showing 1 date and time field. This date field calendar is coming using
add_date
id.

So when I add another date and time field I can select the date calendar

but if I delete my added date and time field by close link and then If I add another one I can't get the date calendar.

May be I can't get the correct
add_date
id.

Can you please tell me how can I solved it ?

Here is my jQuery Code :

$(document).ready(function() {

var max_fields = 30; //maximum input boxes allowed
var wrapper = $(".addmore_box_date"); //Fields wrapper
var add_button = $("#addmoredate"); //Add button ID

$('#add_date').datetimepicker({
timepicker:false,
format:'Y-m-d',
formatDate:'Y/m/d',
minDate:'-1970/01/02', // yesterday is minimum date
maxDate:'+2017/12/01', // and tommorow is maximum date calendar
});

var x = 1; //initlal text box count

$(add_button).click(function(e) { //on add input button click

e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment

var newRow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></div></span>");

newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x));
$(wrapper).append(newRow);

$('#add_date'+x).datetimepicker({
timepicker:false,
format:'Y-m-d',
formatDate:'Y/m/d',
minDate:'-1970/01/02', // yesterday is minimum date
maxDate:'+2017/12/01', // and tommorow is maximum date calendar
});

}
});

$(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text
e.preventDefault(); $('#date_time_close').remove(); x--;
})
});

Answer

I think you can solve your problem by 3 steps:

  1. add class='add_time' to your <select> tag as below:
<select class="form-control add_time" id="add_time" name="add_time[]" class='add_time'>
  1. get active add_date elements count by var count = $('.add_button').length; and use the count variable instead x in the condition.

  2. remove x--; from your code.

and then your JQuery code must be like this:

$(document).ready(function() {

    var max_fields      = 30; //maximum input boxes allowed
    var wrapper         = $(".addmore_box_date"); //Fields wrapper
    var add_button      = $("#addmoredate"); //Add button ID

    $('#add_date').datetimepicker({     
            timepicker:false,
            format:'Y-m-d',
            formatDate:'Y/m/d',
            minDate:'-1970/01/02', // yesterday is minimum date
            maxDate:'+2017/12/01', // and tommorow is maximum date calendar             
     });    

   var x = 1; //initlal text box count
   var count = $('.add_button').length;

   $(add_button).click(function(e) { //on add input button click

       e.preventDefault();
       if(count < max_fields){ //max input box allowed           
           x++; //text box increment

           var newRow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></div></span>");  

          newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x));
          $(wrapper).append(newRow);  

          $('#add_date'+x).datetimepicker({     
                    timepicker:false,
                    format:'Y-m-d',
                    formatDate:'Y/m/d',
                    minDate:'-1970/01/02', // yesterday is minimum date
                    maxDate:'+2017/12/01', // and tommorow is maximum date calendar                 
              });      

       }
    });

    $(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text
        e.preventDefault(); $('#date_time_close').remove();
    })      
});

Description: when you remove the add_date element on close button click, and decrease the x variable, the datetimepicker object of the removed element is in the memory and not removed.

when you add a new element with the name of recently removed element, you can not define another datetimepicker object with the same name.

Comments