Comment faire pour afficher une popup modale dans codeIgniter?

J'ai écrit un script javascript cliquez sur la fonction à une classe pour afficher une popup lorsque la classe concernée être cliqué. Quand je viens de mettre un message d'alerte, il me donne la bonne sortie. mais le popup modale est de ne pas

Modèle

Je suis en suivant le modèle de la fonction

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();
}

Et je suis l'appel de la méthode dans la suite de contrôleur de fonction

Contrôleur

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);     
}

Ici, je suis à la transmission des données à un autre point de vue. et je suis d'appeler cette méthode dans le javascript.

Vue

<!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>

Mon menu contextuel ne s'affiche pas. Mais quand j'ai mis une alerte et vérifiez qu'il me donne de la bonne sortie. Je ne peux pas comprendre quel est le problème avec cela. Si quelqu'un a une idée de ce que serait une aide.

InformationsquelleAutor Ishani Pathinayake | 2015-06-24
  1. 2

    Vous y compris jQuery plus d'une fois, vous avez réellement inclus jQuery dans vos head article, supprimer ces deux avant votre javascript personnalisé, c'est pourquoi vous obtenez $(...).modal is not a function erreur:

    <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>
    • Il est de travail. Merci 🙂
    InformationsquelleAutor Burak
  2. 0

    Supprimer style="display: none;" de votre <div> tag

    • Il n'a pas de travail pour moi. problème était avec le plugin. En tout cas Merci pour l'attention portée 🙂
    • Pouvez-vous ouvrir le modal en utilisant le standard de déclenchement de modal('show')? Si oui. Ensuite, je pense qu'il y a pas de problème afin de charger que les modaux avec la personnalisation. Si vous modal ne sont pas pop up, même en utilisant le standard modal widget, alors vous devriez vérifier si vous avez bootstrap bibliothèque est fuctioning ou pas.
    • Ouais. Le problème était avec le plugin jquery. j'ai eu la réponse. Merci pour les commentaires 🙂
    InformationsquelleAutor Numair
  3. 0

    Essayer

    $('#reservation_detail_model_body').html(msg);
$('#reservation_detail_model').css('display','block');
    • Problème était avec le plugin jquery. En tout cas merci pour l'attention portée. 🙂
    • Merci pour le feed-back ..profiter de codage 🙂
    InformationsquelleAutor Vishnu Prasad