11521 sujets

JavaScript, DOM et API Web HTML5

Modal et $.ajax()

Bonjour,

mon problème est assez simple...

j'ai trois liens qui ouvrent la même fenêtre modal mais en passant une variable différente

la modal s'ouvre bien mais impossible de récupérer la variable

Voici mon code (la page réponse.php fait juste un affichage de la variable passée) :

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<a data-toggle="modal" href="reponse.php" data-target="#modal" class="LienModal" rel="1">produit 1</a>
<a data-toggle="modal" href="reponse.php" data-target="#modal" class="LienModal" rel="2">produit 2</a>
<a data-toggle="modal" href="reponse.php" data-target="#modal" class="LienModal" rel="3">produit 3</a>

<!-- Event Modal -->
<div id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Event</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>

</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Event modal -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>

$("#.LienModal").click(function(){
var Id=$(this).attr("rel");
$(".modal-body").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
$.ajax({
type:"POST",
data:{Id : Id},
url:"reponse.php",
error:function(msg){
$(".modal-body").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
},
success:function(data){
$(".modal-body").fadeIn(1000).html(data);
}
});
});
</script>
</body>

</html>

Merci d'avance car je galère depuis un moment
Salut,
c_koi_ca a écrit :
la page réponse.php fait juste un affichage de la variable passée

Et à quoi ressemble cette page ?
<?php
echo "variable : ".$_POST["id"];
?>
et donc pas "Id" comme mentionné plus haut ?

PS: tu peux mettre en couleur ton code, c'est plus lisible Smiley smile
Voici le code en couleur Smiley cligne
La variable attendue est bien $_POST[Id].
J'ai mis le mot "variable : " devant pour être sur que ma page s'affiche bien dans la modal,
ce qui est le cas, mais la valeur ne s'affiche pas.
J'ai également essayé en remplaçant
data:{Id : Id},
par
data : "Id="+Id,
mais rien à faire...
Du coup j'ai essayé de passer une constante
data : "Id=test_passage",
Id arrive toujours vide sur reponse.php...... 


<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<a data-toggle="modal" href="reponse.php" data-target="#modal" class="LienModal" rel="1">produit 1</a>
<a data-toggle="modal" href="reponse.php" data-target="#modal" class="LienModal" rel="2">produit 2</a>
<a data-toggle="modal" href="reponse.php" data-target="#modal" class="LienModal" rel="3">produit 3</a>

<!-- Event Modal -->
<div id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Event</h4>
</div>
<div class="modal-body">
<p>Loading...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>

</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- Event modal -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<script>

$("#.LienModal").click(function(){
var Id=$(this).attr("rel");
$(".modal-body").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
$.ajax({
type:"POST",
data:{Id : Id},
url:"reponse.php",
error:function(msg){
$(".modal-body").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
},
success:function(data){
$(".modal-body").fadeIn(1000).html(data);
}
});
});
</script>
</body>
</html>
Bon j'ai trouvé....
voici le code si ça peux aider qq.

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="utf-8">
    <title></title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  
  <body>
       <a data-toggle="modal" href="#" data-target="#modal" class="LienModal" rel="1">produit 1</a>
    <a data-toggle="modal" href="#" data-target="#modal" class="LienModal" rel="2">produit 2</a>
    <a data-toggle="modal" href="#" data-target="#modal" class="LienModal" rel="3">produit 3</a>
    
    <!-- Event Modal -->
<div id="modal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
 
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Event</h4>
                </div>
                <div class="modal-body">
                    <p>Loading...</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
 
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- Event modal -->
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
    <script>
 
$(".LienModal").click(function(oEvt){
    oEvt.preventDefault();
    var Id=$(this).attr("rel");
        $(".modal-body").fadeIn(1000).html('<div style="text-align:center; margin-right:auto; margin-left:auto">Patientez...</div>');
        $.ajax({
            type:"GET",
            data : "Id="+Id,
            url:"reponse.php",
            error:function(msg){
                $(".modal-body").addClass("tableau_msg_erreur").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400).html('<div style="margin-right:auto; margin-left:auto; text-align:center">Impossible de charger cette page</div>');
            },
            success:function(data){
                $(".modal-body").fadeIn(1000).html(data);
            }
        });
    });
    </script>
  </body>
  
</html>

Et dans le fichier reponse.php il suffit de récupérer la variable par un $_GET[Id];
Sujet clos
Aller à