文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在codeigniter上的jquery加载的ajax模式窗口中，Datepicker不起作用

问在codeigniter上的jquery加载的ajax模式窗口中，Datepicker不起作用
EN

Stack Overflow用户
提问于 2015-12-05 12:41:24
回答 3查看 986关注 0票数 0

我正在尝试使用jquery加载的ajax模式编辑我的数据库表。当我使用ajax触发编辑表单时，bootstrap datepicker和selct2插件不工作，但是相同的datepicker和select2插件在页面中工作得很好。我也试图将jquery绑定到模式中，但它也不起作用。下面是我的ajax加载弹出表单的代码。

​

代码语言：javascript
复制
<?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加载的弹出窗口。

​

代码语言：javascript
复制
<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>
代码语言：javascript
复制
 <!-- (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。

​

代码语言：javascript
复制
<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>

​

javascript
jquery
ajax
twitter-bootstrap
codeigniter
EN

回答 3

Stack Overflow用户

发布于 2015-12-05 13:53:01

这是include_buttom.php。

​

代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2015-12-05 14:49:55

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

你的代码应该是

代码语言：javascript
复制
<script src="<?php echo base_url() ?>assets/globals/plugins/pn...
票数 0
EN

Stack Overflow用户

发布于 2015-12-06 18:48:53

1.

首先，给出所有资产的确切路径，如下所示

代码语言：javascript
复制
<script src="<?php echo base_url() ?>assets/globals/plugins/pnikolov-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>

或

代码语言：javascript
复制
<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可以是多个，因为您是在那里循环。将该选择器更改为类名。

代码语言：javascript
复制
<script type="text/javascript">
   $("#datepicker").FormsPickers.init();
</script>

至

代码语言：javascript
复制
<script type="text/javascript">
   $(".class_name").FormsPickers.init();
</script>

3.

最好自己在ajax加载的弹出表单中按如下所示初始化choosen和datepicker

代码语言：javascript
复制
<script type="text/javascript">
   $(".choosen_class").chosen();
   $(".datepicker_class').datepicker();
</script>

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/34101355

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档