'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">×</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 |