Bootstrap Modal Not Working After First Open

Question

I have a PHP 5 application running in the CodeIgniter 3 framework.

I created a template, and am feeding a view into the template. The view does not have any js attached in file; all javascript is attached withing the template.

The view itself has an add and edit buttons. I have a single blank Bootstrap-3 modal saved as a separate view. 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.

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

    $(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:

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

You're missing the $ before the ('#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.

You also may want to consider removing the fade class from your modal html. It may or may not cause issues with your modals once you get past these initial problems.

Bootstrap Modal Not Working After First Open

Question

1 answers

solution1
1 2018-08-02 19:03:00

Bootstrap Modal Not Working After First Open

Question

1 answers

solution1 1 2018-08-02 19:03:00

solution1
1 2018-08-02 19:03:00