관련 클래스를 클릭 할 때 팝업을 표시하기 위해 클래스에 자바 스크립트 클릭 함수를 작성했습니다. 방금 경고를 표시하면 올바른 출력이 제공됩니다. 하지만 팝업 모달이 나타나지 않습니다.
모델
나는 다음과 같은 모델 기능을 사용하고 있습니다
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();
}
그리고 다음 컨트롤러 기능에서 해당 메서드를 호출하고 있습니다.
제어 장치
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);
}
여기에서 다른 뷰로 데이터를 전달하고 있습니다. 그리고 나는 자바 스크립트에서 그 메소드를 호출하고 있습니다.
전망
<!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>
내 팝업이 표시되지 않습니다. 그러나 경고를 표시하고 확인하면 올바른 출력이 제공됩니다. 나는 이것에 무엇이 잘못되었는지 알아낼 수 없다. 누군가 아이디어가 있다면 도움이 될 것입니다.
jQuery를 두 번 이상 포함하고 있으며 실제로 head섹션에 jQuery를 포함하고 사용자 정의 자바 스크립트 전에 두 가지를 제거하면 $(...).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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다