title: Datepicker not working in jquery loaded ajax modal window on codeigniter
body: <p>I am trying to edit my database table using jquery loaded ajax modal. and when i trigger the edit form using ajax, the bootstrap datepicker and selct2 plugin is not working but the same datepicker and select2 plugin is working fine inside the page. and i am also trying to bind the jquery inside the modal but its not working too. here is my code for the ajax loaded popup form. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;?php 
  $edit_data      =   $this-&gt;db-&gt;get_where('staff' , array('staff_id' =&gt; $param2) )-&gt;result_array();
  foreach ( $edit_data as $row):
  ?&gt;
      
      &lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="panel panel-primary"&gt;
              &lt;div class="panel-heading"&gt;
                  &lt;div class="panel-title" &gt;
                      &lt;i class="fa fa-plus-circle"&gt;&lt;/i&gt;
                      &lt;?php echo get_phrase('edit_staff');?&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  
                  &lt;?php echo form_open(base_url() . 'index.php?admin/staffs/do_update/'.$row['staff_id'] , array('autocomplete'=&gt;'off','target'=&gt;'_top'));?&gt;
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('staff_name');?&gt;&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;div class="inputer"&gt;
                                  &lt;div class="input-wrapper"&gt;
                                      &lt;input type="text" class="form-control" name="program_name" value="&lt;?php echo $row['name']; ?&gt;"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('date_of_birth_');?&gt; &lt;i class="ion-android-calendar"&gt;&lt;/i&gt;&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;div class="inputer"&gt;
                                  &lt;div class="input-wrapper"&gt;
                                      &lt;input type="text" class="form-control bootstrap-daterangepicker-basic" id="datepicker" name="dob" value="&lt;?php echo $row['dob']; ?&gt;"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('address');?&gt; &lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;div class="inputer"&gt;
                                  &lt;div class="input-wrapper"&gt;
                                      &lt;input type="text" class="form-control" name="address" value="&lt;?php echo $row['address']; ?&gt; "&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('phone');?&gt; &lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;div class="inputer"&gt;
                                  &lt;div class="input-wrapper"&gt;
                                      &lt;input type="text" class="form-control" name="phone" value="&lt;?php echo $row['phone']; ?&gt;"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('email');?&gt; &lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;div class="inputer"&gt;
                                  &lt;div class="input-wrapper"&gt;
                                      &lt;input type="text" class="form-control" name="email" value="&lt;?php echo $row['email']; ?&gt;"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('sex');?&gt;&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;select name="sex" style="width:100%;"&gt;
                                  &lt;option value="1" &lt;?php if($row['sex'] == '1')echo 'selected';?&gt;&gt;
                                      &lt;?php echo get_phrase('male');?&gt;
                                  &lt;/option&gt;
                                  &lt;option value="2" &lt;?php if($row['sex'] == '2')echo 'selected';?&gt;&gt;
                                      &lt;?php echo get_phrase('female');?&gt;
                                  &lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('department');?&gt;&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;select name="department_id" class="chosen-select"&gt;
                                  &lt;?php 
                                          $departments = $this-&gt;db-&gt;get('department')-&gt;result_array();
                                          foreach($departments as $row2):
                                      ?&gt;
                                          &lt;option value="&lt;?php echo $row2['department_id'];?&gt;"
                                              &lt;?php if($row['department_id'] == $row2['department_id'])echo 'selected';?&gt;&gt;
                                                  &lt;?php echo $row2['name'];?&gt;
                                          &lt;/option&gt;
                                      &lt;?php
                                      endforeach;
                                      ?&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('designation');?&gt; &lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;div class="inputer"&gt;
                                  &lt;div class="input-wrapper"&gt;
                                      &lt;input type="text" class="form-control" name="post" value="&lt;?php echo $row['post']; ?&gt;"&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
  
                      &lt;div class="form-group row"&gt;
                          &lt;label class="col-sm-4 control-label"&gt;&lt;?php echo get_phrase('is_teacher');?&gt;&lt;/label&gt;
                          &lt;div class="col-sm-8"&gt;
                              &lt;select name="is_teacher" style="width:100%;"&gt;
                                  &lt;option value="1" &lt;?php if($row['is_teacher'] == '1')echo 'selected';?&gt;&gt;
                                      &lt;?php echo get_phrase('Yes');?&gt;
                                  &lt;/option&gt;
                                  &lt;option value="2" &lt;?php if($row['is_teacher'] == '0')echo 'selected';?&gt;&gt;
                                      &lt;?php echo get_phrase('No');?&gt;
                                  &lt;/option&gt;
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;&lt;!--.form-group--&gt;
                      &lt;br/&gt;&lt;br/&gt;
                      &lt;div class="form-group row"&gt;
                          &lt;div class="col-sm-offset-3 col-sm-5"&gt;
                              &lt;button type="submit" class="btn btn-info"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt; &lt;?php echo get_phrase('edit_staff');?&gt;&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;?php
  endforeach;
  ?&gt;
  
  &lt;script type="text/javascript"&gt;
     $("#datepicker").FormsPickers.init();
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and below is my code for generating ajax loaded popup .. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
   function showAjaxModal(url)
   {
    // SHOWING AJAX PRELOADER IMAGE
    jQuery('#modal_ajax .modal-body').html('&lt;div style="text-align:center;margin-top:200px;"&gt;&lt;img src="assets/images/preloader.gif" /&gt;&lt;/div&gt;');
    
    // LOADING THE AJAX MODAL
    jQuery('#modal_ajax').modal('show', {backdrop: 'true'});
    
          
    // SHOW AJAX RESPONSE ON REQUEST SUCCESS
    $.ajax({
     url: url,
     success: function(response)
     {
      jQuery('#modal_ajax .modal-body').html(response);
     }
    });
   }
   &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!-- (Ajax Modal)--&gt;
      &lt;div class="modal fade" id="modal_ajax"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;&lt;?php echo $system_name;?&gt;&lt;/h4&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="modal-body" style="height:500px; overflow:auto;"&gt;
                  
                      
                      
                  &lt;/div&gt;
                  
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;/div&gt;
                  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>this is the include_buttom.php ... </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/clockface/js/clockface.js"&gt;&lt;/script&gt;
   
   &lt;script src="assets/globals/plugins/chosen/chosen.jquery.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"&gt;&lt;/script&gt;
   
   &lt;script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"&gt;&lt;/script&gt;
   
   &lt;!-- PLUGINS INITIALIZATION AND SETTINGS --&gt;
   &lt;script src="assets/globals/scripts/forms-select.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/scripts/forms-pickers.js"&gt;&lt;/script&gt;
   &lt;script src="assets/globals/scripts/forms-wizard.js"&gt;&lt;/script&gt;
   
   &lt;!-- END PLUGINS INITIALIZATION AND SETTINGS --&gt;
   &lt;!-- PLEASURE --&gt;
   &lt;script src="assets/globals/js/pleasure.js"&gt;&lt;/script&gt;
   &lt;!-- ADMIN 1 --&gt;
   &lt;script src="assets/admin1/js/layout.js"&gt;&lt;/script&gt;
   &lt;script&gt;
   $(document).ready(function () {
    Pleasure.init();
    Layout.init();
    
    FormsPickers.init();
    FormsSelect.init();
    Index.init();
   });
   &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>