Forum : ajax et modal

Bonjour,

J'ai un petit soucis d'affichage avec une fenêtre modale.
J'ai ce bout de code dans une page php qui fait appel à 'ajax1.js'

<script type="text/javascript" src="ajax1.js"></script>
<p>
<a href="javascript:appel_ajax(id=<?php echo "12585"; ?>);">Ajouter</a>
</p>

mon code ajax1

function appel_ajax()
{
    var xhr=null;
    xhr = new XMLHttpRequest()

    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open("POST", "reponse.php", false);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send("mavariable="+ escape(id));

    alert(xhr.responseText);
}

mon fichier reponse.php

echo $_POST["mavariable"];

Les trois codes fonctionnent bien mais le résultat est une fenêtre pas belle
du style box alert() javascript et je souhaiterai obtenir une belle fenêtre
style modal boostrap avec des beaux boutons "cancel" et "valider".
C'est la dernière ligne de ajax1 qui me provoque l'affichage pas beau...
Si quelqu'un peut m'aider c'est cool.

Azorgh

Hello,

Alors soit j'ai rien compris, soit ta question est bizarre.
En effet, tu fait un alert(xhr.responseText); à la fin de ton appel Ajax, donc forcément que ça te retourne une fenêtre qui "ressemble" à une alerte ....

c_koi_ca

Auteur

oui mec je sais. Je voudrais affichdr le résultat dans une fenetre modal à la place d'une boite alert() mais je ne sais comment faire

Azorgh

http://bfy.tw/495Q

c_koi_ca

Auteur

Merci j'ai aussi google ;-)
Mais si je post c'est que j'ai cherché.... et pas trouvé

Azorgh

Pour pas trouver, on arrive à de la mauvaise foi la ...

Second lien : 'How To Make a Modal Box With CSS and JavaScript'
Troisième : 'Créez une fenêtre modale avec CSS et jQuery'
Quatrième : 'Create a Modal Dialog Using CSS and Javascript'

Bon je m'arrête là, mais ne dis pas que tu as réellement cherché dans ce cas là.

Aller, petit cadeau de départ, dernier lien de la page :
http://bootboxjs.com/

c_koi_ca

Auteur

Je me suis mal exprimé. pour la modal il n'y a aucun problème. Effectivement il y a de la doc à foison.
Mon soucis est d'afficher un contenu dynamique et je pense que le code que j'ai fait ne me permet pas d'y arriver.
En continuant à chercher (si si) je suis arrivé à ce code qui ouvre bien une modal mais je ne récupère pas ma variable.
Si tu as une idée elle est la bienvenue. Merci

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

Azorgh

Précise ton avancée si tu avances ;)

Sinon, quand tu regarde l'inspecteur, ta requête Ajax part bien ?
Est-elle en erreur ?

Si non, tu passe dans la fonction success. Data est-il correctement renvoyé côté serveur ?

c_koi_ca

Auteur

Bon alors je bloque toujous...
J'ai 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......

c_koi_ca

Auteur

J'ai trouvé... je mets le code si ça peux aider qq

[code=html]
<!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>
[/code]

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

Azorgh

J'ai rien compris. Tu as résolu ton soucis ou pas ?
Si oui, donne plus de détails parce que la je suis dans le flou.

Tu fais un POST a la base, que tu transforme en GET 'parce que ça marche pas'.
Ensuite, tu enchaine les fadeIn, fadeOut, fadeIn, fadeOut.

Je pense que tu ne dois pas trop comprendre ce que tu écris. Tu test, si sa fonctionne tant mieux, sinon tant pis, on va essayer autre chose.
Un conseil ? Essai d'être plus rigoureux.

" Tiens ça marche pas ! Pourquoi ? Hop, résolu ! Mais quelle est la différence avec mon ancien code ? Ai-je compris pourquoi ca ne fonctionnais pas avant ?" Tu vois le truc ?

Content que ton soucis soit résolu, mais si es prêt a reposter sur le forum. Essai d'expliquer un peu plus en détail ce que tu cherche a faire, où tu en es, ce que tu pense du problème, ne montre que les morceaux de codes qui nous interessent (en s'en tape du DOCTYPE par exemple).

ajax et modal

10 réponses