【问题标题】：Datepicker not working in jquery loaded ajax modal window on codeigniterDatepicker在codeigniter上的jquery加载的ajax模式窗口中不起作用
【发布时间】：2015-12-05 04:41:24
【问题描述】：

我正在尝试使用 jquery 加载的 ajax 模式编辑我的数据库表。当我使用 ajax 触发编辑表单时，引导 datepicker 和 selct2 插件不起作用，但相同的 datepicker 和 select2 插件在页面内工作正常。而且我也试图将jquery绑定在模态中，但它也不起作用。这是我的 ajax 加载弹出表单的代码。

<?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>

下面是我生成 ajax 加载弹出窗口的代码..

<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>

这是 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>

【问题讨论】：

日期选择器脚本在哪里？
datepicker 脚本加载在页面本身内......在 include_buttom.php 上

标签： javascript jquery ajax twitter-bootstrap codeigniter

【解决方案1】：

实际上，您在错误的路径中调用了assest。表示您的src URL 中缺少base_url() 字词

你的代码应该是

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

【讨论】：

这也在我的实际页面上工作.. datepicker 和 select 2 在 url 加载页面内工作，但相同的 datepicker 和 select2 在 ajax 加载弹出表单内工作。
检查日期选择器的 ID
我的代码有什么问题吗.. 你所说的 ID 是什么意思，你能进一步解释一下吗

【解决方案2】：

这是 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>

【讨论】：

【解决方案3】：

1.

首先给出所有资产的确切路径

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

或

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

2.

以下代码在您的 include_button 页面上做什么？？

FormsPickers.init();

FormsSelect.init();

您正在使用选择器 ID 初始化 FormsPicker，因为您在那里循环，所以选择器 ID 可以是多个。将该选择器更改为类名。

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

到

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

3.

最好在你的 ajax 加载弹出表单中自行初始化选择和日期选择器

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

通过这样做，我希望您的问题应该得到解决。如果问题仍然存在，请询问我们 :)

【讨论】：

抱歉@puncoz 回复晚了……实际上我是用新方法实现的，但它仍然没有用……请查看我的答案
实施新方法意味着？？？你能分享你正在尝试做的事情吗？那么我们可能会在这方面为您提供帮助