18008 sujets
Questions générales et questions de débutants
Oui c’est exact j’ai eu le même problème et j’ai dû changer complètement le design et faire autre chose.
Une possibilité est d’ouvrir une page contenant le script dans une balise <iframe> Il est possible d’appeler ce script depuis la page principale. Tu peux également mettre un display:none sur <iframe> pour la rendre invisible. C’est très lourd mais je n’ai pas trouvé mieux.
Une possibilité est d’ouvrir une page contenant le script dans une balise <iframe> Il est possible d’appeler ce script depuis la page principale. Tu peux également mettre un display:none sur <iframe> pour la rendre invisible. C’est très lourd mais je n’ai pas trouvé mieux.
Bonjour,
Il y a pas mal de solutions. En voici quelques unes :
Solution A
1) Dans le script php qui est invoqué par ajax, on crée un script js sur le serveur, et on renvoie au client le code html du bouton.
Par exemple, on écrit un script php qui s'appelle z162_ajax.php, qui va créer sur le serveur un script js appelé z162_ajax.js :
2) Dans le code de la page, on met un bout de javascript qui lancera une requête ajax qui va exécuter le script z162_ajax.php sur le serveur qui va créer le script z162_ajax.js sur le serveur et renvoyer le code du bouton. Ce bout de code dans la page va ensuite ajouter au html de la page d'une part une balise script dont le src sera z162_ajax.js et d'autre part la réponse fabriquée par z162_ajax.php qui est le code html du nouveau bouton.
Par exemple
Ensuite, on affiche la page dans un navigateur, on clique sur le bouton "Invoque Ajax". Un "nouveau bouton" doit apparaitre dans la page. On clique sur ce "nouveau bouton", et le message "je suis la" doit apparaitre.
Solution B
Si le code js que l'on met dans z162_ajax.js n'est pas trop long, on pourrait se contenter de le mettre directement dans le onclick du bouton.
Par exemple, on écrit un script php plus simple z162_ajax2.php :
Et du coup, le code de la fonction magic() de la page est lui aussi simplifié :
Solution C
Je ne détaille pas, mais le principe est d'envoyer comme réponse, par exemple dans un json, d'une part le code js que l'on avait mis dans le z162_ajax.js de la solution A, et d'autre part le code html du bouton de la solution A également.
Dans la fonction magic, quand on analyse la réponse, on fait un eval() du code javascript qu'on reçoit, et on crée le bouton comme on l'a fait pour les solutions A et B.
Amicalement,
Modifié par parsimonhi (15 Sep 2020 - 21:16)
Il y a pas mal de solutions. En voici quelques unes :
Solution A
1) Dans le script php qui est invoqué par ajax, on crée un script js sur le serveur, et on renvoie au client le code html du bouton.
Par exemple, on écrit un script php qui s'appelle z162_ajax.php, qui va créer sur le serveur un script js appelé z162_ajax.js :
<?php
$s="function jeSuisLa(){alert('je suis la');}";
file_put_contents("z162_ajax.js",$s);
echo "<button onclick='jeSuisLa();'>Nouveau bouton</button>";
?>2) Dans le code de la page, on met un bout de javascript qui lancera une requête ajax qui va exécuter le script z162_ajax.php sur le serveur qui va créer le script z162_ajax.js sur le serveur et renvoyer le code du bouton. Ce bout de code dans la page va ensuite ajouter au html de la page d'une part une balise script dont le src sera z162_ajax.js et d'autre part la réponse fabriquée par z162_ajax.php qui est le code html du nouveau bouton.
Par exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Test</title>
<style>
</style>
</head>
<body>
<h1>Ajax charge du html et un code js</h1>
<script>
function magic()
{
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
var e,script;
if(this.readyState==4)
{
if(this.status!=200) s="Erreur !";
else s=this.responseText;
e=document.getElementById("magicContainer");
script=document.createElement('script');
script.type='text/javascript';
script.src='z162_ajax.js';
e.parentNode.appendChild(script);
e.innerHTML=s;
}
};
xhr.open("GET","z162_ajax.php",true);
xhr.send(null);
}
</script>
<button onclick="magic();">Invoque Ajax</button>
<div id="magicContainer"></div>
</body>
</html>Ensuite, on affiche la page dans un navigateur, on clique sur le bouton "Invoque Ajax". Un "nouveau bouton" doit apparaitre dans la page. On clique sur ce "nouveau bouton", et le message "je suis la" doit apparaitre.
Solution B
Si le code js que l'on met dans z162_ajax.js n'est pas trop long, on pourrait se contenter de le mettre directement dans le onclick du bouton.
Par exemple, on écrit un script php plus simple z162_ajax2.php :
<?php
echo "<button onclick=\"alert('je suis la');\">Nouveau bouton</button>";
?>Et du coup, le code de la fonction magic() de la page est lui aussi simplifié :
function magic()
{
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
var e;
if(this.readyState==4)
{
if(this.status!=200) s="Erreur !";
else s=this.responseText;
e=document.getElementById("magicContainer");
e.innerHTML=s;
}
};
xhr.open("GET","z162_ajax2.php",true);
xhr.send(null);
}
Solution C
Je ne détaille pas, mais le principe est d'envoyer comme réponse, par exemple dans un json, d'une part le code js que l'on avait mis dans le z162_ajax.js de la solution A, et d'autre part le code html du bouton de la solution A également.
Dans la fonction magic, quand on analyse la réponse, on fait un eval() du code javascript qu'on reçoit, et on crée le bouton comme on l'a fait pour les solutions A et B.
Amicalement,
Modifié par parsimonhi (15 Sep 2020 - 21:16)
Voilà le code, merci pour les réponses mais je suis sûr qu'il y a plus simple.
Voici en partie le code injecté dans la div :
Le problème réside dans le fait que l'ajax doit appeler un URL avec une partie qui est généré en php. Peut-être est-il possible de faire passer la variable php "idq" de php à javascript et de concaténer l'ensemble ? Je ne sais pas si c'est possible...
<div id="AJAX2">
<div id="buttondiv">
<button onclick="next()">play</button>
</div>
</div>
<script type="text/javascript">
function next()
{
document.getElementById("AJAX2").innerHTML="";
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("AJAX2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","reload.php", true);
xmlhttp.send();
}
</script>Voici en partie le code injecté dans la div :
<div id="AJAX1">
<div id="buttondiv">
<button id="bg" value="g" onclick="vote(this.value)">Gauche</button>
<button id="bd" value="d" onclick="vote(this.value)">Droite</button>
</div>
</div>
<script type="text/javascript">
function vote(vvote)
{
if (vvote=="")
{
document.getElementById("AJAX1").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari, Edge (qui utilise Edge ?!)
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5 (vraiment pour me donner bonne conscience pour ceux qui ont Win XP ou mieux Win Millenium)
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("AJAX1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",<?php echo "\"vote.php?idq=$idq&vote=\"";?>+vvote, true);
xmlhttp.send();
}
</script>Le problème réside dans le fait que l'ajax doit appeler un URL avec une partie qui est généré en php. Peut-être est-il possible de faire passer la variable php "idq" de php à javascript et de concaténer l'ensemble ? Je ne sais pas si c'est possible...
Bonjour,
Jean-Pierre-Bruneau, le mécanisme que tu as proposé (inclure le script via un innerHTML) ne marche pas : le script est dans la page mais ne peut pas s'exécuter. Il est nécessaire d'utiliser quelque chose de plus sophistiqué.
Amicalement,
Jean-Pierre-Bruneau a écrit :
... Et,a lire les réponses qui vont jusque a proposer un IFRAME sur de l'AJAX, je comprend à quel point ,le mécanisme que j'ai décrit est complètement incompris !
Jean-Pierre-Bruneau, le mécanisme que tu as proposé (inclure le script via un innerHTML) ne marche pas : le script est dans la page mais ne peut pas s'exécuter. Il est nécessaire d'utiliser quelque chose de plus sophistiqué.
Amicalement,
Bonjour,
Il suffit de mettre le contenu de la variable php "idq" dans un 2e paramètre de la fonction vote() quand tu construis le code des boutons avec php.
Dans le détail, tu as 2 choses à faire :
1) au lieu de générer toute ta fonction vote() via php et l'envoyer par ajax, tu la mets dans le code de ta page et tu lui rajoutes un paramètre idq.
Code à mettre dans le html de ta page :
2) Par ajax, tu ne rapatries que le code des boutons
3) et dans ton code php, tu n'as donc que le 'contenu de idq' approprié à insérer dans le code des onclicks des boutons.
Il me semble que ça devrait marcher si ton code n'a pas d'autres particularités.
Amicalement,
carllito a écrit :
Le problème réside dans le fait que l'ajax doit appeler un URL avec une partie qui est généré en php. Peut-être est-il possible de faire passer la variable php "idq" de php à javascript et de concaténer l'ensemble ? Je ne sais pas si c'est possible...
Il suffit de mettre le contenu de la variable php "idq" dans un 2e paramètre de la fonction vote() quand tu construis le code des boutons avec php.
Dans le détail, tu as 2 choses à faire :
1) au lieu de générer toute ta fonction vote() via php et l'envoyer par ajax, tu la mets dans le code de ta page et tu lui rajoutes un paramètre idq.
Code à mettre dans le html de ta page :
function vote(vvote,idq)
{
if (vvote=="")
{
document.getElementById("AJAX1").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari, Edge (qui utilise Edge ?!)
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5 (vraiment pour me donner bonne conscience pour ceux qui ont Win XP ou mieux Win Millenium)
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("AJAX1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","vote.php?idq="+idq+"&vote="+vvote, true);
xmlhttp.send();
}
2) Par ajax, tu ne rapatries que le code des boutons
<div id="AJAX1">
<div id="buttondiv">
<button id="bg" value="g" onclick="vote(this.value,'contenu de idq')">Gauche</button>
<button id="bd" value="d" onclick="vote(this.value,'contenu de idq')">Droite</button>
</div>
</div>3) et dans ton code php, tu n'as donc que le 'contenu de idq' approprié à insérer dans le code des onclicks des boutons.
Il me semble que ça devrait marcher si ton code n'a pas d'autres particularités.
Amicalement,
Je suis ému