Datepicker not working in jquery loaded ajax modal window on codeigniter

Question

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.

 <?php $edit_data = $this->db->get_where('staff' , array('staff_id' => $param2) )->result_array(); foreach ( $edit_data as $row): ?> <div class="row"> <div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <div class="panel-title" > <i class="fa fa-plus-circle"></i> <?php echo get_phrase('edit_staff');?> </div> </div> <div class="panel-body"> <?php echo form_open(base_url() . 'index.php?admin/staffs/do_update/'.$row['staff_id'] , array('autocomplete'=>'off','target'=>'_top'));?> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('staff_name');?></label> <div class="col-sm-8"> <div class="inputer"> <div class="input-wrapper"> <input type="text" class="form-control" name="program_name" value="<?php echo $row['name']; ?>"> </div> </div> </div> </div> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('date_of_birth_');?> <i class="ion-android-calendar"></i></label> <div class="col-sm-8"> <div class="inputer"> <div class="input-wrapper"> <input type="text" class="form-control bootstrap-daterangepicker-basic" id="datepicker" name="dob" value="<?php echo $row['dob']; ?>"> </div> </div> </div> </div> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('address');?> </label> <div class="col-sm-8"> <div class="inputer"> <div class="input-wrapper"> <input type="text" class="form-control" name="address" value="<?php echo $row['address']; ?> "> </div> </div> </div> </div><!--.form-group--> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('phone');?> </label> <div class="col-sm-8"> <div class="inputer"> <div class="input-wrapper"> <input type="text" class="form-control" name="phone" value="<?php echo $row['phone']; ?>"> </div> </div> </div> </div><!--.form-group--> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('email');?> </label> <div class="col-sm-8"> <div class="inputer"> <div class="input-wrapper"> <input type="text" class="form-control" name="email" value="<?php echo $row['email']; ?>"> </div> </div> </div> </div><!--.form-group--> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('sex');?></label> <div class="col-sm-8"> <select name="sex" style="width:100%;"> <option value="1" <?php if($row['sex'] == '1')echo 'selected';?>> <?php echo get_phrase('male');?> </option> <option value="2" <?php if($row['sex'] == '2')echo 'selected';?>> <?php echo get_phrase('female');?> </option> </select> </div> </div><!--.form-group--> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('department');?></label> <div class="col-sm-8"> <select name="department_id" class="chosen-select"> <?php $departments = $this->db->get('department')->result_array(); foreach($departments as $row2): ?> <option value="<?php echo $row2['department_id'];?>" <?php if($row['department_id'] == $row2['department_id'])echo 'selected';?>> <?php echo $row2['name'];?> </option> <?php endforeach; ?> </select> </div> </div><!--.form-group--> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('designation');?> </label> <div class="col-sm-8"> <div class="inputer"> <div class="input-wrapper"> <input type="text" class="form-control" name="post" value="<?php echo $row['post']; ?>"> </div> </div> </div> </div><!--.form-group--> <div class="form-group row"> <label class="col-sm-4 control-label"><?php echo get_phrase('is_teacher');?></label> <div class="col-sm-8"> <select name="is_teacher" style="width:100%;"> <option value="1" <?php if($row['is_teacher'] == '1')echo 'selected';?>> <?php echo get_phrase('Yes');?> </option> <option value="2" <?php if($row['is_teacher'] == '0')echo 'selected';?>> <?php echo get_phrase('No');?> </option> </select> </div> </div><!--.form-group--> <br/><br/> <div class="form-group row"> <div class="col-sm-offset-3 col-sm-5"> <button type="submit" class="btn btn-info"><i class="fa fa-pencil"></i> <?php echo get_phrase('edit_staff');?></button> </div> </div> </form> </div> </div> </div> </div> <?php endforeach; ?> <script type="text/javascript"> $("#datepicker").FormsPickers.init(); </script> 

and below is my code for generating ajax loaded popup ..

 <script type="text/javascript"> function showAjaxModal(url) { // SHOWING AJAX PRELOADER IMAGE jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="assets/images/preloader.gif" /></div>'); // 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); } }); } </script> 

  <!-- (Ajax Modal)--> <div class="modal fade" id="modal_ajax"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title"><?php echo $system_name;?></h4> </div> <div class="modal-body" style="height:500px; overflow:auto;"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> 

this is the include_buttom.php ...

 <script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script> <script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script> <script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script> <script src="assets/globals/plugins/clockface/js/clockface.js"></script> <script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script> <script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script> <script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script> <script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script> <script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script> <script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script> <script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script> <script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script> <!-- PLUGINS INITIALIZATION AND SETTINGS --> <script src="assets/globals/scripts/forms-select.js"></script> <script src="assets/globals/scripts/forms-pickers.js"></script> <script src="assets/globals/scripts/forms-wizard.js"></script> <!-- END PLUGINS INITIALIZATION AND SETTINGS --> <!-- PLEASURE --> <script src="assets/globals/js/pleasure.js"></script> <!-- ADMIN 1 --> <script src="assets/admin1/js/layout.js"></script> <script> $(document).ready(function () { Pleasure.init(); Layout.init(); FormsPickers.init(); FormsSelect.init(); Index.init(); }); </script> 

Answer 1

this is the include_buttom.php ...

 <script src="assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script> <script src="assets/globals/plugins/minicolors/jquery.minicolors.min.js"></script> <script src="assets/globals/plugins/bootstrap-daterangepicker/daterangepicker.js"></script> <script src="assets/globals/plugins/clockface/js/clockface.js"></script> <script src="assets/globals/plugins/chosen/chosen.jquery.min.js"></script> <script src="assets/globals/plugins/selectize/dist/js/standalone/selectize.min.js"></script> <script src="assets/globals/plugins/multiselect/js/jquery.multi-select.js"></script> <script src="assets/globals/plugins/quicksearch/dist/jquery.quicksearch.min.js"></script> <script src="assets/globals/plugins/bootstrap-select/dist/js/bootstrap-select.min.js"></script> <script src="assets/globals/plugins/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script> <script src="assets/globals/plugins/jquery-validation/dist/jquery.validate.min.js"></script> <script src="assets/globals/plugins/twitter-bootstrap-wizard/jquery.bootstrap.wizard.min.js"></script> <!-- PLUGINS INITIALIZATION AND SETTINGS --> <script src="assets/globals/scripts/forms-select.js"></script> <script src="assets/globals/scripts/forms-pickers.js"></script> <script src="assets/globals/scripts/forms-wizard.js"></script> <!-- END PLUGINS INITIALIZATION AND SETTINGS --> <!-- PLEASURE --> <script src="assets/globals/js/pleasure.js"></script> <!-- ADMIN 1 --> <script src="assets/admin1/js/layout.js"></script> <script> $(document).ready(function () { Pleasure.init(); Layout.init(); FormsPickers.init(); FormsSelect.init(); Index.init(); }); </script> 

Answer 2

Actually you calling the assest in wrong path. Means you are missing base_url() word in your src URL

Your code should be

<script src="<?php echo base_url() ?>assets/globals/plugins/pn...

Answer 3

1.

first of all give exact path to all of your assets as

<script src="<?php echo base_url() ?>assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

or

<script src="<?php echo base_url('assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js') ?>"></script>

2.

what following codes do at your include_button page??

FormsPickers.init();

FormsSelect.init();

you are initializing FormsPicker with selector ID which can be multiple since you are looping there. change that selector to class name.

<script type="text/javascript">
   $("#datepicker").FormsPickers.init();
</script>

to

<script type="text/javascript">
   $(".class_name").FormsPickers.init();
</script>

3.

Best initialize choosen and datepicker by yourself as following in your ajax loaded popup form

<script type="text/javascript">
   $(".choosen_class").chosen();
   $(".datepicker_class').datepicker();
</script>

by doing these i hope your problem should be solved. If still problem persist, do ask us :)