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



Solution 1:[1]

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>

Solution 2:[2]

Remove style="display: none;" from your <div> tag

Solution 3:[3]

Try

$('#reservation_detail_model_body').html(msg);
$('#reservation_detail_model').css('display','block');

Solution 4:[4]

<?php 
class ajax extends CI_Controller
{

    
    public function get_sms_provider($id)
    {
        $edit_profile=$this->db->get_where("tbl_sms_provider",array("sms_provider_id"=>$id));

        if(isset($edit_profile))
        {
            foreach($edit_profile->result() as $row)
            {
        ?>
        <form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_sms_provider/edit/do_update/<?php echo $row->sms_provider_id ;?>"  enctype="multipart/form-data">
            <div class="form-group">
                        <label>SMS Provider Name</label>
                        <input class="form-control" id="txt_sms_provider_name" name="txt_sms_provider_name" value="<?php echo $row->sms_provider_name ;?>">
            </div>
            <div class="form-group">
                        <label>SMS Provider Url</label>
                        <input class="form-control" id="txt_sms_provider_url" name="txt_sms_provider_url" value="<?php echo $row->sms_provider_url ;?>">
            </div>
            <div class="form-group">
                        <label>User Name</label>
                        <input class="form-control" id="txt_sms_provider_user" name="txt_sms_provider_user" value="<?php echo $row->sms_provider_user ;?>">
            </div>
            <div class="form-group">
                        <label>Password</label>
                        <input class="form-control" id="txt_sms_provider_password" name="txt_sms_provider_password" value="<?php echo $row->sms_provider_password ;?>">
            </div>
            <div class="form-group">
                        <label>Status</label>
                    <?php 
                    $radio_array=array("Active","In-Active");
                    for($i=0;$i<count($radio_array);$i++)
                    {
                        
                        if($radio_array[$i]==$row->sms_provider_status)
                        {
                            ?>
                            <input type="radio" checked id="rdo_sms_provider_status" name="rdo_sms_provider_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
                            <?php
                        }
                        else
                        {
                            ?>
                            <input type="radio" id="rdo_sms_provider_status" name="rdo_sms_provider_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
                            <?php
                        }
                        ?>
                        <?php
                    }
                    ?>
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
        </form>
        <?php 
            }
        }
    } 
    public function get_settings()
    {
        $edit_profile=$this->db->get_where("tbl_settings");

        if(isset($edit_profile))
        {
            foreach($edit_profile->result() as $row)
            {
        ?>
        <form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_settings/edit/do_update"  enctype="multipart/form-data">
            <div class="control-group success">
                        <div class="col-lg-6">
                            
                            <div class="form-group">
                            
                              <label>Website Title </label>
                                <input type="text" id="txt_title" name="txt_title" class="form-control" value="<?php echo $row->settings_website_title; ?>" >
                            </div>
                            
                            <div class="form-group">
                              <label>Meta Keywords </label>
                                <textarea id="txt_keyword" name="txt_keyword" class="form-control" ><?php echo $row->settings_meta_keywords; ?></textarea>
                            </div>
                            <div class="form-group">
                              <label>Meta Description </label>
                              
                                <textarea id="txt_desc" name="txt_desc" class="form-control" ><?php echo $row->settings_meta_keywords; ?></textarea>
                             
                            </div>
                            <div  class="form-group">
                              <label>Website Name </label>
                                <input type="text" id="txt_name" name="txt_name" class="form-control" value="<?php echo $row->settings_website_title; ?>" >
                              
                            </div>
                            
                            <div  class="form-group">
                              <label>Currency Code </label>
                                <input type="text" id="txt_code" name="txt_code" class="form-control" value="<?php echo $row->settings_currency_code; ?>" >
                              
                            </div>
                            <div class="form-group">
                              <label >Currency Symbol </label>
                                <input type="text" id="txt_symbol" name="txt_symbol" class="form-control" value="<?php echo $row->settings_currency_symbol; ?>" >
                              
                            </div>
                            <div class="form-group">
                              <label class="control-label" for="typeahead">Address </label>
                                <textarea id="txt_addr" name="txt_addr" class="form-control" ><?php echo $row->settings_address; ?></textarea>
                              
                            </div>
                            <div  class="form-group">
                              <label >Phone </label>
                                <input type="text" id="txt_phone" name="txt_phone" class="form-control" value="<?php echo $row->settings_phone; ?>" >
                              
                            </div>
                            <div class="form-group">
                              <label >Fax </label>
                                <input type="text" id="txt_fax" name="txt_fax" class="form-control" value="<?php echo $row->settings_fax; ?>" >
                              
                            </div>
                            <div class="form-group">
                              <label >Contact Email </label>
                                <input type="text" id="txt_email" name="txt_email" class="form-control" value="<?php echo $row->settings_contact_email; ?>" >
                              
                            </div>
                            <div class="form-group">
                              <label >Map Address </label>
                             
                                <input type="text" id="txt_map_addr" name="txt_map_addr" class="form-control" value="<?php echo $row->settings_map_address; ?>" >
                            </div>
                            <div class="form-group">
                              <label >Toll Free Number </label>
                             
                                <input type="text" id="txt_toll_free" name="txt_toll_free" class="form-control" value="<?php echo $row->settings_toll_free; ?>" >
                             
                            </div>
                            <div class="form-group">
                                <label >Minimum Single Piece Qty</label>
                                    <input class="form-control"  id="txt_single_min_qty" name="txt_single_min_qty" type="text"   value="<?php echo $row->settings_single_min_qty; ?>">
                                  
                            </div>

                            <div class="form-group">
                                <label >Minimum Total Piece Qty</label>
                                    <input class="form-control" id="txt_total_min_qty" name="txt_total_min_qty" type="text"   value="<?php echo $row->settings_total_min_qty; ?>">
                                  
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="form-group">
                              <label >Logo </label>
                                <br>
                                <img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_logo; ?>" >
                                <input type="file" id="img_logo" name="img_logo" >
                              
                            </div>
                            <div class="form-group">
                              <label>Small Logo </label>
                                <br>
                                <img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_small_logo; ?>" >
                                <input type="file" id="img_logo_small" name="img_logo_small"  >
                             
                            </div>  
                            <div class="form-group">
                              <label>Footer Logo </label>
                                <br>
                                <img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_footer_logo; ?>" >
                                <input type="file" id="img_logo_footer" name="img_logo_footer" >
                             
                            </div>  
                            <div class="form-group">
                              <label >Favicon</label>
                              <br>
                                <img height='100px' src="<?php echo base_url().'files/admin/logo/'.$row->settings_favicon; ?>" >
                                <input type="file" id="img_favicon" name="img_favicon" class="span6 typeahead"  >
                              
                            </div>
                            <div class="form-group">
                              <label >Facebook Url </label>
                                <input type="text" id="txt_fb_url" name="txt_fb_url" class="form-control" value="<?php echo $row->facebook_url; ?>" >
                              
                            </div>  
                            <div class="form-group">
                              <label >Google+ Url</label>
                                <input type="text" id="txt_google_url" name="txt_google_url" class="form-control" value="<?php echo $row->google_plus_url; ?>" >
                              
                            </div>

                            <div class="form-group">
                              <label >Twitter Url</label>
                                <input type="text" id="txt_twitter_url" name="txt_twitter_url" class="form-control" value="<?php echo $row->twitter_url; ?>" >
                              
                            </div>

                            <div class="form-group">
                              <label >Pinterest Url</label>
                                <input type="text" id="txt_linkedin_url" name="txt_linkedin_url" class="form-control" value="<?php echo $row->pinterest_url; ?>" >
                              
                            </div>

                            <div class="form-group">
                              <label >Instagram Url</label>
                                <input type="text" id="txt_instagram_url" name="txt_instagram_url" class="form-control" value="<?php echo $row->instagram_url; ?>" >
                              
                            </div>


                            <div class="form-group">
                                <label >Show Badges</label>
                                    <input id="inlineCheckbox1"  id="chk_show_badges" name="chk_show_badges" type="checkbox"  <?php if(trim($row->settings_show_badges)=="1"){echo " checked='checked'";}  ?> value="1">
                                  
                            </div>

                            
                        </div>
                        <div class="col-lg-12">

                            
            <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
                </div>
        </form>
        <?php 
            }
        }
    } 

    public function get_cms()
    {
        $edit_profile=$this->db->get("tbl_cms");

        if(isset($edit_profile))
        {
            foreach($edit_profile->result() as $row)
            {
        ?>
        <form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_cms/edit/do_update"  enctype="multipart/form-data">
            <div class="col-lg-6">

                <div class="form-group">
                            <label>About Us</label>
                            <textarea class="form-control" id="txt_about_us" name="txt_about_us" rows="3"><?php echo $row->cms_about_us ;?></textarea>
                </div>
                <div class="form-group">
                            <label>Privacy Policy</label>
                            <textarea class="form-control" id="txt_privacy_policy" name="txt_privacy_policy" rows="3"><?php echo $row->cms_privacy_policy ;?></textarea>
                </div>
                <div class="form-group">
                            <label>Copy Right</label>
                            <textarea class="form-control" id="txt_copy_right" name="txt_copy_right" rows="3"><?php echo $row->cms_copy_right ;?></textarea>
                </div>
                <div class="form-group">
                            <label>Trade Mark</label>
                            <textarea class="form-control" id="txt_trademark" name="txt_trademark" rows="3"><?php echo $row->cms_trademark ;?></textarea>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-group">
                            <label>Terms & Conditions</label>
                            <textarea class="form-control" id="txt_terms_conditions" name="txt_terms_conditions" rows="3"><?php echo $row->cms_terms_conditions ;?></textarea>
                </div>
                <div class="form-group">
                            <label>Contact Us</label>
                            <textarea class="form-control" id="txt_contact_us" name="txt_contact_us" rows="3"><?php echo $row->cms_contact_us ;?></textarea>
                </div>
                <div class="form-group">
                            <label>Bank Details</label>
                            <textarea class="form-control" id="txt_bank_details" name="txt_bank_details" rows="3"><?php echo $row->cms_bank_details ;?></textarea>
                </div>
            </div>
            <div class="col-lg-12">
            <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
            </div>
        </form>
        <?php 
            }
        }
    }

    public function get_slider($id)
    {
        $edit_profile=$this->db->get_where("tbl_slider",array("slider_id"=>$id));

        if(isset($edit_profile))
        {
            foreach($edit_profile->result() as $row)
            {
        ?>
        <form role="form" method="post" action="<?php echo base_url(); ?>admin/manage_slider/edit/do_update/<?php echo $row->slider_id ;?>"  enctype="multipart/form-data">
            <div class="form-group">
                        <label>Title</label>
                        <input class="form-control" id="txt_slider_title" name="txt_slider_title" value="<?php echo $row->slider_title ;?>">
            </div>
            <div class="form-group">
                        <label>Slider Image</label><br><img src="<?php echo base_url(); ?>files/user/slider/<?php echo $row->slider_image; ?>" width="200px"><input type="file" id="img_slider" name="img_slider">
            </div>
            <div class="form-group">
                        <label>Href</label>
                        <input class="form-control" id="txt_slider_href" name="txt_slider_href" value="<?php echo $row->slider_href ;?>">
            </div>
            <div class="form-group">
                        <label>Order Number</label>
                        <input class="form-control" id="txt_slider_order" name="txt_slider_order" value="<?php echo $row->slider_order ;?>">
            </div>
            <div class="form-group">
                        <label>Content</label>
                        <input class="form-control" id="txt_slider_content" name="txt_slider_content" value="<?php echo $row->slider_content ;?>">
            </div>
            <div class="form-group">
                        <label>Position</label>
                        <input class="form-control" id="txt_slider_position" name="txt_slider_position" value="<?php echo $row->slider_content_position ;?>">
            </div>
            <div class="form-group">
                        <label>Status</label>
                    <?php 
                    $radio_array=array("Active","In-Active");
                    for($i=0;$i<count($radio_array);$i++)
                    {
                        
                        if($radio_array[$i]==$row->slider_status)
                        {
                            ?>
                            <input type="radio" checked id="rdo_status" name="rdo_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
                            <?php
                        }
                        else
                        {
                            ?>
                            <input type="radio" id="rdo_status" name="rdo_status" value="<?php echo $radio_array[$i]; ?>"><?php echo $radio_array[$i]; ?>
                            <?php
                        }
                        ?>
                        <?php
                    }
                    ?>
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
            <button type="reset" class="btn btn-default">Reset</button>
        </form>
        <?php 
            }
        }
    }

    
    public function manage_slider($order_id,$order_status)
    {
        $data['order_status']=$order_status;
        $this->db->where('order_id',$order_id);
        $this->db->update('tbl_order',$data);
        echo '<div class="alert alert-success">
                <a href="#" class="close" data-dismiss="alert">&times;</a>
                <strong>Order Status Changed Successfully to : '.$order_status.'</strong>
            </div>';
    }  
}
?>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Burak
Solution 2 Numair
Solution 3
Solution 4 tripleee