Bonjour, je charge un script Js (et un bout de code html qui contient le bouton) grâce à une requête Ajax mais lorsque que le bouton appelle la fonction ( avec onclick ) il ne détecte pas le nouveau script.

Le navigateur dit que la fonction n'est pas définie, qu'elles peuvent être les solutions ?
Bonjour,
Tu dois revoir ton architecture visiteur=>Serveur , Le PHP n’existe plus et le serveur ne te connait plus dés qu'il à répondu à une de tes requête.
En fait la seule réponse que te donne le PHP-AJAX appelé, est un echo, donc un texte.
Ce texte peut être du code, mais il te faut l'envoyer dans ta page comme si tu l'avait écrit d'origine dans ton HTML.
donc si ton texte envoyé par AJAX est ;

echo "<script>var toto=18;</script><br />bonjour la France";

tu le reçoit ainsi, ayant dans ta page html par exemple :

<div id="cbon"></div>


  document.getElementById('cbon').innerHTML = MonAjax.responseText;


Ainsi le javascript sera dans ta page (mais pas dans son code directe) fait attention à cette nuance:
En effet après avoir reçu ce code,
1) si tu clic droit et ==> afficher le code de la page, tu verra le
<div id="cbon"></div> ainsi c'est à dire vide
2) si tu clic droit ==> inspecter alors la tu verra
<div id="cbon">
<script>
 var toto=18;
</script>
bonjour la france
</div>

Tu comprends ?
Modifié par Jean-Pierre-Bruneau (15 Sep 2020 - 11:40)
Mon code Javascript est bien présent comme il se doit dans ma div qui reçoit ma requête Ajax. Le problème est que la navigateur n'en tient pas compte et dit que la fonction que j'appelle (qui est dans le code de ma requête ajax et ma requête est injectée) n'existe pas, qu'elle n'est pas définie.
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.
Si quelqu'un avait mieux parce que je génère une url en php que Javascript Javascript récupère en concaténent un autre paramètre..
Modérateur
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 :
<?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)
Bonsoir,
j'abandonne cette discussion n'ayant aucun code de ta part.
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 !
En prime je préciserait qu'un IFRAME est une partie de site incluse dans une page HTML du visiteur.
Peux tu au minimum nous donner ton code HTML et celui du PHP appelé?
Voilà le code, merci pour les réponses mais je suis sûr qu'il y a plus simple.


<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...
Modérateur
Bonjour,
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,
Modérateur
Bonjour,
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,
parsimonhi a écrit :
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,

Oui Ok sur le fait que ce n' est pas garanti, mais alors ne parlons plus d'ajax , mais d'autre chose ,finalement autant recharger une page .

Mais franchement j'aurais trouvé élémentaire d'avoir ses codes actuels,
Ça marche, merci à tous pour vos explications et vos propositions ! Smiley sweatdrop Je suis ému