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>Wele to CodeIgniter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".3.4/css/bootstrap.min.css">
<script src=".11.3/jquery.min.js"></script>
<script src=".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=".min.js" type="text/javascript"></script>
<script src=".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.
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>Wele to CodeIgniter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn./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./jquery-latest.min.js" type="text/javascript"></script>
<script src="https://code.jquery./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.
Share Improve this question edited Jun 24, 2015 at 10:57 user4793675 asked Jun 24, 2015 at 10:34 Ishani PathinayakeIshani Pathinayake 1771 gold badge3 silver badges15 bronze badges 3-
anything in
console??? – Vishnu Prasad Commented Jun 24, 2015 at 10:37 - @VP only this TypeError: $(...).modal is not a function <th class="prev_sign"><a href="localhost/Test/index.php/my_calendar/index... – Ishani Pathinayake Commented Jun 24, 2015 at 10:41
- have you tried the ans I given? – Vishnu Prasad Commented Jun 24, 2015 at 10:44
4 Answers
Reset to default 2You 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./jquery-latest.min.js" type="text/javascript"></script>
<script src="https://code.jquery./jquery-1.10.2.js"></script>
Remove style="display: none;" from your <div> tag
Try
$('#reservation_detail_model_body').html(msg);
$('#reservation_detail_model').css('display','block');
<?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>';
}
}
?>