select2 和 datepicker 在 codeigniter 上的 ajax 加载模式窗口中不起作用答案

【问题标题】：select2 and datepicker not working inside ajax loaded modal window on codeigniterselect2 和 datepicker 在 codeigniter 上的 ajax 加载模式窗口中不起作用
【发布时间】：2015-11-21 06:00:28
【问题描述】：

我正在尝试在 ajax 加载的模式窗口上编辑数据库值。这些值可以很好地检索，并且编辑数据库内容也可以。但问题出在值编辑模式窗口上，引导日期选择器和 select2 插件不起作用。任何建议都受到高度赞赏。这是我调用 ajax 加载模式的代码。

模态窗口代码的视图是：

<?php 
$edit_data                =        $this->db->get_where('programs' , array('program_id' => $param2) )->result_array();
foreach ( $edit_data as $row):
?>
<div class="row">
        <div class="col-md-12">
                <div class="panel panel-primary" data-collapsed="0">
                <div class="panel-heading">
                    <div class="panel-title" >
                            <i class="fa fa-plus-circle"></i>
                                        <?php echo get_phrase('edit_program');?>
                    </div>
            </div>
                        <div class="panel-body">

                <?php echo form_open(base_url() . 'index.php?admin/programs/do_update/'.$row['program_id'] , array('autocomplete'=>'off','target'=>'_top'));?>
                    <div class="form-group">
                        <label class="col-sm-4 control-label"><?php echo get_phrase('program_title');?></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">
                        <label class="col-sm-4 control-label"><?php echo get_phrase('numeric_code');?></label>
                        <div class="col-sm-8">
                            <div class="inputer">
                                <div class="input-wrapper">
                                    <input type="text" class="form-control" name="numeric_code" value="<?php echo $row['numeric_code']; ?>">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div  class="col-lg-12 form-group">
                            <span class="input-group-addon"><i class="fa fa-university" aria-hidden="true"></i>  <?php echo get_phrase('select_board'); ?></span>

                            <select data-placeholder="Select Board" name="board_id" class="chosen-select">
                                    <option disabled selected>Select Board</option>
                                    <?php 
                                        $boards = $this->db->get('boards')->result_array();
                                        foreach($boards as $row2):
                                    ?>
                                    <option value="<?php echo $row2['board_id'];?>"
                                        <?php if($row['board_id'] == $row2['board_id'])echo 'selected';?>>
                                            <?php echo $row2['name'];?>
                                                </option>
                                    <?php
                                    endforeach;
                                    ?>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label"><?php echo get_phrase('no._of_years');?></label>
                        <div class="col-sm-8">
                            <div class="inputer">
                                <div class="input-wrapper">
                                    <input type="text" class="form-control" name="no_of_years" value="<?php echo $row['no_of_years']; ?>">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label"><?php echo get_phrase('no_of_admission_per_year');?></label>
                        <div class="col-sm-8">
                            <div class="inputer">
                                <div class="input-wrapper">
                                    <input type="text" class="form-control" name="no_of_admission_per_year" value="<?php echo $row['no_of_admission_per_year']; ?>">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 control-label"><?php echo get_phrase('no_of_semester');?></label>
                        <div class="col-sm-8">
                            <div class="inputer">
                                <div class="input-wrapper">
                                    <input type="text" class="form-control" name="no_of_semester" value="<?php echo $row['no_of_semester']; ?>">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row example-row">
                        <div class="col-md-3"><?php echo get_phrase('affiliation_start_date'); ?></div><!--.col-md-3-->
                        <div class="col-md-9">
                            <div class="control-group">
                                <div class="controls">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="ion-android-calendar"></i></span>
                                        <div class="inputer">
                                            <div class="input-wrapper">
                                                <input type="text" style="width: 200px" name="affiliation_start_date" class="form-control bootstrap-daterangepicker-basic" value="<?php echo $row['affiliation_start_date']; ?>" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div><!--.col-md-9-->
                    </div><!--.row-->

                    <div  class="col-lg-12 form-group">
                        <span class="input-group-addon"><i class="fa fa-flag-o" aria-hidden="true"></i> <?php echo get_phrase('select_status'); ?></span>

                        <select data-placeholder="Select Program Status" name="status" class="chosen-select">
                                <option disabled selected>Select Program Status</option>
                                <option value="1">Program is Running</option>
                                <option value="0">Program is Not Running</option>
                        </select>
                    </div>

                            <div class="form-group">
                                                <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_programs');?></button>
                                                </div>
                                        </div>
                        </form>
            </div>
        </div>
    </div>
</div>

<?php
endforeach;
?>

这段代码的结果如下图所示

【问题讨论】：

您应该在模型而不是视图中使用 get where。

标签： javascript jquery ajax twitter-bootstrap codeigniter

【解决方案1】：

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

【讨论】：

将此$('input[name="affiliation_start_date"]').daterangepicker(); 放在jQuery('#modal_ajax .modal-body').html 行之前。

【解决方案2】：

显示弹出模型时，您必须绑定您的 select2。

因为popup html只有在调用时才会加载，而脚本是在页面加载时调用的。

试试这个...

<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>');
    $('input[name="affiliation_start_date"]').daterangepicker();
    // LOADING THE AJAX MODAL
    jQuery('#modal_ajax').modal('show', {backdrop: 'true'});
    $(".chosen-select").select2();

    // SHOW AJAX RESPONSE ON REQUEST SUCCESS
    $.ajax({
        url: url,
        success: function(response)
        {
            jQuery('#modal_ajax .modal-body').html(response);
        }
    });
}
</script>

希望这会有所帮助...

【讨论】：

我是 javascript 和 jquery 的新手，所以你能告诉我如何绑定我的 select2 吗？？...引导日期选择器也有同样的问题吗？？
yes 在弹出窗口中如果您想要任何自定义元素，即选择、日期选择器，您必须在调用弹出窗口时绑定。你的弹出代码（jquery）在哪里。
您可以在此部分上方找到我的弹出代码...如果您对此问题有任何建议，请告诉我...提前致谢:)
Hello ajya ...它对我不起作用...我不知道为什么...模态加载正常，但结果与以前相同。但是对于除了模态的普通页面，我需要通过编写 8 行 javascript 代码在页面末尾初始化 javascript。
<script> $(document).ready(function () { Pleasure.init(); Layout.init(); $('#programList').DataTable(); FormsPickers.init(); FormsSelect.init(); }); </script> 所以我尝试将绑定实现为我的包含按钮代码$('input[name="affiliation_start_date"]').FormsPickers.init(); 它不起作用我也尝试从代码中删除 init 但似乎我的坏运气被包围了我对javascript和ajax的了解很少$('input[name="affiliation_start_date"]').FormsPickers();