How to show a popup modal in codeIgniter?

I have written a javascript click function to a class to display a popup when the relevant class be clicked. When i just put an alert it gives me the correct output. but the popup modal is doesn’t show up

Model
I am using following model function

function get_reservation($type, $title, $date_cal)
{
    $this->db->select('reservations.*');
    $this->db->from('reservations');
    $this->db->where('(reservations.type like "' . $type . '%" and reservations.title like "' . $title . '%" and reservations.date_cal like "' . $date_cal . '%" )');
    $this->db->where('is_deleted', '0');

    $query = $this->db->get();

    return $query->result();
}

And i am calling that method in the following controller funtion

Controller

function get_reservations_records()
{        
    $this->load->model('mycal_model');

    $type = $this->input->post('type', TRUE);
    $title = $this->input->post('title', TRUE);
    $date_cal = $this->input->post('date_cal', TRUE);

    $data['reservation_records'] = $this->mycal_model->get_reservation($type,$title,$date_cal);

    echo $this->load->view('reservation_list_view', $data);     
}

Here i am passing data to another view. and i am calling that method in the javascript.

View

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Welcome to CodeIgniter</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <style type="text/css">
            #body{
                margin: 0 15px 0 15px;
            }
            #container{
                margin: 10px;                
                border: 1px solid #D0D0D0;
                -webkit-box-shadow: 0 0 8px #D0D0D0;
            }


            .calendar{
                /*           background-color: yellow;*/
            }
            table.calendar{
                margin: auto;
                border-collapse: collapse;
            }
            .calendar .days td {
                width:90px;
                height: 100px;
                padding: 4px;
                border:  1px solid #999;
                vertical-align:  top;
                background-color: #DEF;

            }
            .calendar .days td:hover{
                background-color: #fff;
            }
            .calendar .highlight {
                font-weight: bold;
                color: #EF1BAC;
            }   



            .calendar .content .rp_am_no{
                float: left;
                display: inline-block;
                width: 40px;
                background-color: #E13300;
            }           


        </style>        
    </head>
    <body>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {

                $(".calendar .content .rp_am_no").click(function() {
                    var title = "RP";
                    var type = "AM";
                    var date_cal = $(this).attr("id");

                    $.ajax({
                        type: 'POST',
                        url: '<?php echo site_url(); ?>/my_calendar/get_reservations_records',
                        data: "type=" + type + "&title=" + title + "&date_cal=" + date_cal,
                        success: function(msg) {
                            //alert(msg);
                            $('#reservation_detail_model_body').html(msg);
                            $('#reservation_detail_model').modal('show');

                        },
                        error: function(msg) {
                            alert("Error Occured!");
                        }
                    });
                });

            });

        </script>
        <div id="container">

            <div id="body">
                <?php echo $calendar; ?>
            </div>
            <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="reservation_detail_model" class="modal fade" style="display: none;">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
                            <h4 class="modal-title">Reservation Details</h4>
                        </div>
                        <div class="modal-body" id="reservation_detail_model_body">
                            <!--reservation_list_view goes here-->


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


        </div>

    </body>
</html>

My popup doesn’t show up. But when i put an alert and check it gives me the correct output. I can’t figure out what is wrong with this. If anyone has an idea it would be a help.

Answer

You are including jQuery more than once, you have actually included jQuery in your head section, remove those two before your custom javascript, that’s why you are getting $(...).modal is not a function error:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Advertisement

Answer