Javascript 如何在codeIgniter中显示弹出模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31024301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show a popup modal in codeIgniter?
提问by Ishani Pathinayake
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
我已经为一个类编写了一个 javascript 单击函数，以在单击相关类时显示一个弹出窗口。当我只是发出警报时，它会给我正确的输出。但弹出模式没有出现
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.
在这里，我将数据传递给另一个视图。我在 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.
我的弹出窗口没有出现。但是当我发出警报并检查它时，它给了我正确的输出。我无法弄清楚这有什么问题。如果有人有想法，那将是一种帮助。
回答by Burak
You are including jQuery more than once, you have actually included jQuery in your headsection, remove those two before your custom javascript, that's why you are getting $(...).modal is not a functionerror:
您不止一次包含 jQuery，您实际上已经在您的head部分中包含了 jQuery，在您的自定义 javascript 之前删除这两个，这就是您收到$(...).modal is not a function错误的原因：
<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>
回答by Vishnu Prasad
Try
尝试
$('#reservation_detail_model_body').html(msg);
$('#reservation_detail_model').css('display','block');
回答by Numair
Remove style="display: none;"from your <div>tag
style="display: none;"从您的<div>标签中删除
