title: How to show a popup modal in codeIgniter?
body: <p>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</p>
  
  <p><strong>Model</strong><br>
  I am using following model function</p>
  
  <pre class="lang-php prettyprint-override"><code>function get_reservation($type, $title, $date_cal)
  {
      $this-&gt;db-&gt;select('reservations.*');
      $this-&gt;db-&gt;from('reservations');
      $this-&gt;db-&gt;where('(reservations.type like "' . $type . '%" and reservations.title like "' . $title . '%" and reservations.date_cal like "' . $date_cal . '%" )');
      $this-&gt;db-&gt;where('is_deleted', '0');
  
      $query = $this-&gt;db-&gt;get();
  
      return $query-&gt;result();
  }
  </code></pre>
  
  <p>And i am calling that method in the following controller funtion</p>
  
  <p><strong>Controller</strong></p>
  
  <pre class="lang-php prettyprint-override"><code>function get_reservations_records()
  {        
      $this-&gt;load-&gt;model('mycal_model');
  
      $type = $this-&gt;input-&gt;post('type', TRUE);
      $title = $this-&gt;input-&gt;post('title', TRUE);
      $date_cal = $this-&gt;input-&gt;post('date_cal', TRUE);
  
      $data['reservation_records'] = $this-&gt;mycal_model-&gt;get_reservation($type,$title,$date_cal);
  
      echo $this-&gt;load-&gt;view('reservation_list_view', $data);     
  }
  </code></pre>
  
  <p>Here i am passing data to another view. and i am calling that  method in the javascript.</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Welcome to CodeIgniter&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;style type="text/css"&gt;
              #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;
              }           
  
  
          &lt;/style&gt;        
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(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: '&lt;?php echo site_url(); ?&gt;/my_calendar/get_reservations_records',
                          data: "type=" + type + "&amp;title=" + title + "&amp;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!");
                          }
                      });
                  });
  
              });
  
          &lt;/script&gt;
          &lt;div id="container"&gt;
  
              &lt;div id="body"&gt;
                  &lt;?php echo $calendar; ?&gt;
              &lt;/div&gt;
              &lt;div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="reservation_detail_model" class="modal fade" style="display: none;"&gt;
                  &lt;div class="modal-dialog modal-lg"&gt;
                      &lt;div class="modal-content"&gt;
                          &lt;div class="modal-header"&gt;
                              &lt;button aria-hidden="true" data-dismiss="modal" class="close" type="button"&gt;x&lt;/button&gt;
                              &lt;h4 class="modal-title"&gt;Reservation Details&lt;/h4&gt;
                          &lt;/div&gt;
                          &lt;div class="modal-body" id="reservation_detail_model_body"&gt;
                              &lt;!--reservation_list_view goes here--&gt;
  
  
                          &lt;/div&gt;
                          &lt;div class="modal-footer"&gt;
                              &lt;button data-dismiss="modal" class="btn btn-info" type="button"&gt;Close&lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;    
              &lt;/div&gt;           
  
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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.</p>