Datepicker在codeigniter

时间：2015-12-05 04:41:24

标签： javascript jquery ajax twitter-bootstrap codeigniter

我正在尝试使用jquery加载的ajax模式编辑我的数据库表。当我使用ajax触发编辑表单时，bootstrap 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>

3 个答案:

答案 0 :(得分：0)

这是include_buttom.php ...

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

实际上你在错误的路径中调用了这个组件。表示您在base_url()网址

中遗漏了src个字词

您的代码应为

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

答案 2 :(得分：0)

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，因为您在那里循环，所以它可以是多个。将该选择器更改为类名。

<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>
通过这样做，我希望你的问题应该解决。如果问题仍然存在，请问我们：）

相关问题
最新问题