0

Currently working on clone and datepicker using jquery. With my current code cloning was happening perfectly. In the clone div the datepicker was working but it was not working like original.

  1. When the user click add more button it was cloning entire div perfectly with the dates but if i select the date textfield from the cloned div year and month dropdown not displaying.

  2. When the user click add more button in the original Degree date it was showing the current date but in the clone it was not showing.

I have tried with all possibilites from my side I am not getting

I have tried added destroy for the datepicker still not working

Here is my jquery code

var i = 1;
    $(document).on("click", ".edu_add_button", function() {
    var i = $('.cloned-row1').length;
    $(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({
            'id': function(_, id) {
                    return id + i
            },
            'name': function(_, name) {
                    return name + i
            }
    }).end().find('[id]').val('').attr({
            'id': function(_, id) {
                    return id + i
            }
    });
    $(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
    $(".cloned-row1:last").find(".degree_Description").attr('disabled', true).val('');
    $(".cloned-row1:last").find('.datepicker,.datepicker1').removeClass('hasDatepicker').datepicker();

    i++;

    return false;
  });

  $("#txt_Degdat").datepicker({
          dateFormat: "mm-dd-yy",
          changeMonth: true,
          changeYear: true,
          yearRange: '1900:2100'
  }).on('change', function() {
          if ($('#txt_Degdat').valid()) {
                  $('#txt_Degdat').removeClass('errRed');
          }
          // triggers the validation test on change
  }).datepicker("setDate", "0");
  $("#txt_Trsdat").datepicker({
          dateFormat: "mm-dd-yy",
          changeMonth: true,
          changeYear: true,
          yearRange: '1900:2100'
  }).on('change', function() {
          if ($('#txt_Trsdat').valid()) {
                  $('#txt_Trsdat').removeClass('errRed');
          }
          // triggers the validation test on change
  });



  $(document).on('click', ".btn_less1", function() {
          var len = $('.cloned-row1').length;
          if (len > 1) {
                  $(this).closest(".btn_less1").parent().parent().parent().remove();
          }
  });

Here is the HTML code

<div class="container-fluid cloned-row1">
<div class="row">
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label>School Name</label>
        <br/>
        <select class="slt_Field txt_schName" name="txt_schName[]">
            <option value="">Please Select</option>
            <option value="Emirates College of Technology- UAE">COL000001</option>
            <option value="Al Khawarizmi International College- UAE">COL000002</option>
            <option value="Syscoms College">COL000003</option>
            <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
            <option value="Advanced Placement">COL000005</option>
            <option value="Al Buraimi College (Uni Clge)">COL000006</option>
            <option value="Al-Ain Community College">COL000007</option>
            <option value="AMA Computer College">COL000008</option>
            <option value="Arab Academy for Bankg and Fin">COL000009</option>
            <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
            <option value="Arapahoe Community College">COL000011</option>
        </select>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <br>
        <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>High School Avg / CGPA</label>
        <br/>
        <input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>Grade Type @</label>
        <br/>
        <select class="slt_Field ipt_grd" name="ipt_grd[]">
            <option value="">Please Select</option>
            <option value="n">100</option>
            <option value="n1">4</option>
            <option value="c">CHAR</option>
        </select>
    </div>
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field txt_Degdat" name="txt_Fdob" />
</div>
<button class="btn_less1 btn_right ">Less</button>
<button class="btn_more btn_right edu_add_button">Add More</button>

Here is the weave Link

Any suggestion please what I am doing wrong here.

I have tried all possibilities nothing was working any idea please

Mr.M
  • 1,472
  • 3
  • 29
  • 76
  • you use id as selector in your datepicker. ID must be unique. Change your markup into classes and try again. – andrew Sep 15 '15 at 07:02
  • why can u try bootstrap blugin?, it's very simple just download library and call datepicker function for specific ID, that's all –  Sep 15 '15 at 07:11
  • @andrew I tried with id it was not working $(".cloned-row1:last").find('#txt_Degdat,#txt_Trsdat').removeClass('hasDatepicker').datepicker(); – Mr.M Sep 15 '15 at 07:33

2 Answers2

1

You must not clone any element having a unique ID assigned to it or its child element.

Are you trying to clone $("#txt_Degdat") and $("#txt_Trsdat") ?

Use class name as selector instead.

U K A
  • 321
  • 1
  • 7
  • actually I am cloning entire div using class name .cloned-row1 div was getting cloned with all the properties but for the calendar some of the function not working like default date dropdown year and month – Mr.M Sep 15 '15 at 07:41
  • @Mahadevan you should describe your html part as well. – U K A Sep 15 '15 at 07:45
  • i have updated code I have given weave link my code was available there also – Mr.M Sep 15 '15 at 07:57
  • @Mahadevan i think you still clone id=txt_Fdob. Also since you clone whole div contents, you clone same names, which may give unwanted results in your code. Read this one to get some ideas: http://stackoverflow.com/questions/8018132/jquery-clone-form-fields-and-increment-id – andrew Sep 15 '15 at 08:22
  • @UKA i have tried and updated the code still not working :( – Mr.M Sep 15 '15 at 09:11
  • @Mahadevan please see my new answer. – U K A Sep 15 '15 at 12:27
  • @ UKA thank you so much for your help one small query with your code default date is not showing and datepicker was not working – Mr.M Sep 15 '15 at 12:42
  • @Mahadevan Have you run the Code snippet by clicking on the blue button below that answer? – U K A Sep 15 '15 at 12:45
  • @UKA default date working when i press add morenot on the original one – Mr.M Sep 15 '15 at 12:54
  • @UKA sorry buddy I think code remains same My Initial date should have default date with calendar picker – Mr.M Sep 15 '15 at 13:05
  • @Mahadevan that's weird, it's working in my browser, please try refreshing your browser. – U K A Sep 15 '15 at 14:09
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/89734/discussion-between-mahadevan-and-u-k-a). – Mr.M Sep 15 '15 at 20:01
1

Here's I guess should be the answer,

$(document).ready(function(){
 jQuery.validator.setDefaults({
   debug: true,
   success: "valid"
 });
 var form = $( "#myform" );
 form.validate();
 $(".ipt_Field").on('change', function() {
  if ($(this).valid()) {
   $(this).removeClass('errRed');
  }
  // triggers the validation test on change
 });  
 
 bindDatePicker($("#txt_Degdat")); 
 
});

function bindDatePicker(ele) {
 ele.datepicker({
  dateFormat: "mm-dd-yy",
  changeMonth: true,
  changeYear: true,
  yearRange: '1900:2100'
 }).datepicker("setDate", "0");
}

var rowId = 'rowId';
var count = 1;
$(document).on("click", ".edu_add_button", function() {
 //var i = $('.cloned-row1').length;
 var that = $(".cloned-row1:first").clone(false);
 that.insertAfter(".cloned-row1:last").attr({'id': rowId + count}).end().find('[id]').val('').attr({
  'id': function(_, id) {
    return id + count
  }
 });

 that.find(".school_Name").attr('disabled', true).val('');
 that.find(".degree_Description").attr('disabled', true).val('');
 //that.find('.datepicker,.datepicker1').removeClass('hasDatepicker').datepicker();
 that.find("#txt_Degdat"+count).removeClass('hasDatepicker');
 bindDatePicker(that.find("#txt_Degdat"+count)); 
 count++;

 return false;
});

$(document).on('click', ".btn_less1", function() {
 var len = $('.cloned-row1').length;
 if (len > 1) {
    $(this).parent().parent().remove();
 }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<form id="myform">
<div class="container-fluid cloned-row1" id="myRow">
<div class="row well">
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label>School Name</label>
        <br/>
        <select class="slt_Field txt_schName" name="txt_schName[]">
            <option value="">Please Select</option>
            <option value="Emirates College of Technology- UAE">COL000001</option>
            <option value="Al Khawarizmi International College- UAE">COL000002</option>
            <option value="Syscoms College">COL000003</option>
            <option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
            <option value="Advanced Placement">COL000005</option>
            <option value="Al Buraimi College (Uni Clge)">COL000006</option>
            <option value="Al-Ain Community College">COL000007</option>
            <option value="AMA Computer College">COL000008</option>
            <option value="Arab Academy for Bankg and Fin">COL000009</option>
            <option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
            <option value="Arapahoe Community College">COL000011</option>
        </select>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <br>
        <input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>High School Avg / CGPA</label>
        <br/>
        <input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" />
    </div>
    <div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
        <label><span class="text-error">*</span>Grade Type @</label>
        <br/>
        <select class="slt_Field ipt_grd" name="ipt_grd[]">
            <option value="">Please Select</option>
            <option value="n">100</option>
            <option value="n1">4</option>
            <option value="c">CHAR</option>
        </select>
    </div>
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_Degdat" name="txt_Fdob" />
 <br />
 <button class="btn_less1 btn_right ">Less</button>
 <button class="btn_more btn_right edu_add_button">Add More</button> 
</div>
</div>
</form>
U K A
  • 321
  • 1
  • 7