CODEWITHSUNDEEP
jquerytwitter-bootstrapgrails
Sumon Bappi
Sumon Bappi

Reputation: 2019

Bootstrap datepicker is not showing calender after cloning in jquery

I am using grails 2.1.1 and jquery. I have a table where there is three fields in each row like auditor, designation and audit date. So I declare a function where it will clone the last row of table and add it as the last row. Now it is doing it but the problem is that select box and text field is ok with the cloning except the date picker. it clone the date picker also but when I click on it, it doesn't show the calender to select but at first row it does. I have searched over goggle and try so many things but no results. Can anyone please help me on this please ?!!! Here are my code below ::

my table and action button >>>

<table id="auditors" class="auditors">
        <tr><th>Auditor Name</th><th>Designation</th><th>Audit Date</th></tr>
        <tr>
            <td><g:select id="auditor0" name="auditor0" from="${audit.Auditor.list()}" optionKey="id" optionValue="AUDITOR_NAME" noSelection="['':'নির্বাচন করুন']" required="" value="${upManagementLetterInstance?.upRepresentative?.auditor?.id}" class="form-control"/></td>
            <td><g:textField name="auditorDesignation0" id="auditorDesignation0" readonly="" class="form-control"/> </td>
            <td><div class="bfh-datepicker" id="auditDate0" data-date="${formatDate(format:'MM/dd/yyyy',date:upManagementLetterInstance?.upRepresentative?.auditDate)}" data-close="true" data-name="auditDate0"></div></td>                
        </tr>
    </table>

    <input type="button"  value="Add Another Auditor" onclick="addAnotherAuditor()"/>

my function >>>

    <script>
var initialCounter = 0,addedCounter = 1;
function addAnotherAuditor(){
        var row = $(".auditors > tbody > tr:last").clone();
        row.find('select').each(function(){
            this.id= this.name.replace(initialCounter, addedCounter);
            this.name= this.name.replace(initialCounter, addedCounter);
        })
        $(".auditors > tbody > tr:last").after(rows);

        initialCounter++;
        addedCounter++;
    }
</script>

Upvotes: 0

Views: 819

Answers (1)

rmlan
rmlan

Reputation: 4657

I don't see anywhere in the code where you then initialize the new date picker that you have cloned. While the DOM and relevant styles will be copied, none of the event handlers that have been attached to the original date picker will carry over to the new one. You can do one of two things:

  1. Use .clone(true) which tells JQuery to bring over all associated event handlers (this may have some unwelcome side effects)
  2. Initialize the clone as a datepicker just as you did the first one, each time a clone is made.

2 is the far better option in my opinion.

Upvotes: 2

Related Questions