首次打开后，Bootstrap模式不起作用

Question

I have a PHP 5 application running in the CodeIgniter 3 framework. 我有一个在CodeIgniter 3框架中运行的PHP 5应用程序。

I created a template, and am feeding a view into the template. 我创建了一个模板，并且正在向该模板中添加视图。 The view does not have any js attached in file; 该视图在文件中没有附加任何js； all javascript is attached withing the template. 所有javascript都随模板附上。

The view itself has an add and edit buttons. 视图本身具有添加和编辑按钮。 I have a single blank Bootstrap-3 modal saved as a separate view. 我有一个空白的Bootstrap-3模式，另存为单独的视图。 I have added data attributes to the links for the add and edit buttons that help build out the modal headers and content. 我已将数据属性添加到“添加”和“编辑”按钮的链接中，以帮助构建模式标题和内容。 When either the add or edit buttons are clicked, the modal pops up as an overlay on the list page, and the modal content is actually either the add view of the edit view with parameters passed in. 单击添加或编辑按钮时，模态作为列表页面上的叠加层弹出，模态内容实际上是带有输入参数的编辑视图的添加视图。

If I click either add or edit, the modal pops up and the content is shown correctly...the first time. 如果我单击“添加”或“编辑”，则会弹出模态并正确显示内容...第一次。 If I close the modal and try it again without refreshing, I get the following error in my console: Uncaught TypeError: "#myModal".modal is not a function. 如果我关闭模式并再次尝试而不刷新，则会在控制台中收到以下错误：Uncaught TypeError：“ #myModal” .modal不是一个函数。

I watched the console from start to end and noticed that the error also gets triggered on the first click as well, but doesn't prevent the modal from opening the first time. 我从头到尾看了看控制台，并注意到错误也同样在第一次单击时触发，但是并不能阻止模式第一次打开。

I've encountered this error before in the past, and the issue was either I was loading the JQuery library twice, or loading it after the Bootstrap js instead of before. 我以前曾经遇到此错误，问题是我两次加载了JQuery库，或者是在Bootstrap js之后而不是之前加载了它。 I have confirmed that neither of these cases apply here. 我已经证实这两种情况均不适用于此。

The controller, where the list view is fed into a template as the template body: 控制器，将列表视图作为模板主体馈入模板：

function index()
{
    $params['limit'] = RECORDS_PER_PAGE; 
    $params['offset'] = ($this->input->get('per_page')) ? $this->input->get('per_page') : 0;

    $config = $this->config->item('pagination');
    $config['base_url'] = site_url('client/index?');
    $config['total_rows'] = $this->Client_model->get_all_clients_count();
    $this->pagination->initialize($config);


    $data['clients'] = $this->Client_model->get_all_clients($params);

    //$data['_view'] = 'client/index';
    //$this->load->view('layouts/main',$data);
    $this->template->load('default', 'client/index', $data);
}

Here is the template: 这是模板：

<!DOCTYPE html>
<html>
    <head>
    <!-- Bootstrap 3 CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Datatables CSS -->
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">


    <meta charset="UTF-8">
    <title><?php echo $title; ?></title>
</head>

<body>

    <h1><?php echo $header; ?></h1>

    <div class="wrapper">

        <?php echo $body; ?>

    </div>


    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Bootstrap 3 JS-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Datatables JS-->
    <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script src="<?php echo site_url('assets/js/clients.js'); ?>"></script>
</body>

Javscsript in the clients.js file: client.js文件中的Javscsript：

    $(document).ready(function() {
        $('#clients_list').DataTable();

        $('.ls-modal').on('click', function(e){
            e.preventDefault();

            var title = $(this).data('title');
            var btn_txt = $(this).data('btn_txt');
            var mode = $(this).data('mode');

            $('#modal_title').html(title);
            $("#client-sbmt").html(btn_txt);
            $('#client_form_mode').val(mode);

            $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));


        });


        $('#client-sbmt').on('click', function(e){

            var mode = $('#client_form_mode').val();

            if(mode == 'add')
                $("#add_modal_form").submit();

            if(mode == 'edit')
                $("#edit_modal_form").submit()
            }); 
        } );


The modal:
    <!-- Modal -->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title title"><span id="modal_title">Edit Client</span></h4>
                </div>

                <div class="modal-body"></div>



                <div class="modal-footer">
                    <input type="text" id="client_form_mode" name="client_form_mode"/>
                    <button type="button" class="btn btn-success" id="client-sbmt" name="" data-submit="modal">Save</button>

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>

        </div>
    </div>

Example button: 示例按钮：

<a href="<?php echo site_url('client/add'); ?>" class="btn btn-success ls-modal" data-title="Add New Client" data-btn_txt="Add" data-mode="add">Add</a>

Any idea what's going on here? 知道这里发生了什么吗？

Answer 1

As mentioned in my previous comment, you have an error in your javascript here: 如我之前的评论中所述，您的JavaScript出现错误：

('#myModal').modal('destroy');

You're missing the $ before the ('#myModal') 您在（'#myModal'）之前缺少$

Also, you probably don't want that line there at all really, because it will destroy the modal you just created. 另外，您可能根本不想要该行，因为它将破坏您刚刚创建的模态。

The error in that line is getting thrown after the first time your modal shows, thus making any javascript (including a subsequent modal call) to fail, which is why it only works once. 第一次显示模态后，该行中的错误将引发，从而使所有javascript（包括后续的模态调用）均失败，这就是为什么它只能运行一次的原因。

You also may want to consider removing the fade class from your modal html. 您可能还需要考虑从模态html中删除fade类。 It may or may not cause issues with your modals once you get past these initial problems. 克服这些最初的问题后，它可能会或可能不会导致模态出现问题。

首次打开后，Bootstrap模式不起作用

问题描述

1 个解决方案

解决方案1
1 2018-08-02 19:03:00

首次打开后，Bootstrap模式不起作用

问题描述

1 个解决方案

解决方案1 1 2018-08-02 19:03:00

解决方案1
1 2018-08-02 19:03:00