[AJAX] exécuter du code javascript qui est dans un xhr.responseText

Version imprimable

Bonjour tout le monde,

J'ai rééditer la discution car je pense que je me suis fait mal comprendre.

je me sert d'ajax pour mettre a jour une "div".
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function select_date(type_engin) //function affichant la parti date pour analysé l'historique { var xhr = getXhr(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { leselect = xhr.responseText; document.getElementById('selection').innerHTML = leselect; } } xhr.open("POST","/magicweb/script_php/script_selection_date.php", true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); data = "type_engin="+type_engin; xhr.send(data); }
je dois fait apparaitre dans cette div un input + un bouton de calendrier.

le calendrier est appellé comme ceci dans mon fichier script_selection_date.php:
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript" language="JavaScript"> new tcal ({ \'formname\': \'historique\', \'controlname\': \'datedebut\' }); </script>
la mise a jour de la "div" se passe bien, le input apparait mais pas mon bouton de calendrier.

comment je peux faire pour afficher mon bouton de calendrier?

Merci d'avance
--
Rodinrott

J'ai trouvé ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
function select_date(type_engin) //function affichant la parti date pour analysé l'historique
	{
 
		var xhr = getXhr();
 
		xhr.onreadystatechange = function()
		{
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				document.getElementById('selection').innerHTML = xhr.responseText;
 
				var mesScripts = document.getElementById("selection").getElementsByTagName("script");
 
				for (var i=0; i<mesScripts.length; i++) 
				{
					eval(mesScripts[0].innerHTML);
				}
			}
		}
		xhr.open("POST","/magicweb/script_php/script_selection_date.php", true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		data = "type_engin="+type_engin;
		xhr.send(data);
	}

la page n'affiche plus que le bouton...

je ne comprend pas

Aider moi SVP

--
Rodinrott

26/11/2009, 15h55
madevilts

Pourquoi ne pas directement faire un eval du xhr.response Text ?

Dans l'idée, ton php génère donc du javascript (sans les balises <script> </script>).
26/11/2009, 16h27
E.Bzz

Bonjour,
je pense que la réponse est dans la FAQ. Tu dois être
soi dans ce cas
soi dans celui-là
Non ?

A+

Merci pour c réponse.

madevilts : j'ai essayé il me crée une "erreur de syntaxe".

E.Bzz : je ne comprend pas trop la fonction AfterAjax() qui il a dans le code du deuxieme cas que tu m'expose.

Je vais vous mettre mon fichier php pour plus d'info.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php
 
$type_engin = $_POST['type_engin'];
 
 
$selection = '<form action="analyse_historique_magiweb_'.$type_engin.'.php" name="historique" id="historique" method="post" enctype="multipart/form-data">';
$selection .= '<br />';
$selection .= '<font size="4">De </font>';
$selection .= '<input type="text" id="datedebut" name="datedebut" size="10">';
 
$selection .= '<script type="text/javascript" language="JavaScript">';
$selection .= 'new tcal ({';
$selection .= "'formname': 'historique',";
$selection .= "'controlname': 'datedebut'";
$selection .= "});";
$selection .= "</script>";
                                
echo $selection;
?>

Voila se que je veux faire apparaitre(dans le div) a l'appui du bouton radio.

26/11/2009, 17h26
E.Bzz

Citation:

Envoyé par Rodinrott

E.Bzz : je ne comprend pas trop la fonction AfterAjax() qui il a dans le code du deuxieme cas que tu m'expose.

Elle sert à réaffecter les évènements des objets mis à jour via Ajax.
Par exemple, si dans ton input, tu avais un

Code:

onchange="verif_saisie();"

dans ta fonction AfterAjax(), il faudrait ajouter

Code:

document.getElementById("datedebut").onchange = verif_saisie;

Dans ton cas, je crains que créer le form via innerHTML pose problème :?

Il vaudrait mieux le créer via le DOM ...

A+
30/11/2009, 11h50
Rodinrott

Bonjour tout le monde,

Désoler pour cette réponse tardive.
E.Bzz : je n'ai pas d'événement mis a jour via AJAX.

J'ai juste le bouton de mon calendrier qui ne veux pas s'affiché.

Quand je clic sur le bouton radio la page ne s'affiche plus il ne reste plus que le bouton en haut a gauche d'une page vide.

Je ne comprend pas pourquoi il reload la page et n'affiche que le bouton...

Merci de votre aide
je peux remettre mon code si vous en avez besoin...

--
Rodinrott
30/11/2009, 14h14
E.Bzz

Citation:

Envoyé par E.Bzz

Dans ton cas, je crains que créer le form via innerHTML pose problème :?

Il vaudrait mieux le créer via le DOM ...

A+

Merci de ta réponse.

J'ai suivi se que tu m'a dit.J'ai enlevé mon formulaire crée par AJAX, je l'ai mis directement dans ma page je modifie "action" du formulaire avec :

Code:

1
2
 
var form = document.getElementById('form').action = "analyse_historique_magiweb_"+type_engin+".php";

Ajax:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 
function getXhr(){
                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject)
				{ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else 
				{ // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
			return xhr;
			}
 
 
function select_date(type_engin) //function affichant la parti date pour analysé l'historique
	{
 
		var xhr = getXhr();
 
		xhr.onreadystatechange = function()
		{
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				var form = document.getElementById('form').action = "analyse_historique_magiweb_"+type_engin+".php";
 
				document.getElementById('selection').innerHTML = xhr.responseText;
 
				var mesScripts = document.getElementById("selection").getElementsByTagName("script");
 
				for (var i=0; i<mesScripts.length; i++) 
				{
					eval(mesScripts[0].text);
 
				}
			}
		}
		xhr.open("POST","/magicweb/script_php/script_selection_date.php", true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		data = "type_engin="+type_engin;
		xhr.send(data);
	}

Mon fichier php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<?php
 
$type_engin = $_POST['type_engin'];
 
 
$selection = '<br />';
$selection .= '<font size="4">De </font>';
$selection .= '<input type="text" id="datedebut" name="datedebut" size="10">';
 
$selection .= '<script type="text/javascript" language="JavaScript">';
$selection .= 'new tcal ({';
$selection .= "'formname': 'form',";
$selection .= "'controlname': 'datedebut'";
$selection .= "});";
$selection .= "</script>";
                                
                                
echo $selection;
?>

J'ai toujours le meme souci...:-(
est ce que tu aurais une idées sur le probleme ?ou une piste?

Merci pour votre aide.

--
Rodinrott

30/11/2009, 16h00
E.Bzz

Si tu ajoutes un alert() dans ta balise <script> du calendrier, le message est bien affiché lors du retour d'Ajax ?

A+

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<?php
 
$type_engin = $_POST['type_engin'];
 
 
$selection = '<br />';
$selection .= '<font size="4">De </font>';
$selection .= '<input type="text" id="datedebut" name="datedebut" size="10">';
 
$selection .= '<script type="text/javascript" language="JavaScript">';
$selection .= 'alert("test");';
$selection .= 'new tcal ({';
$selection .= "'formname': 'form',";
$selection .= "'controlname': 'datedebut'";
$selection .= "});";
$selection .= "</script>";
                                
                                
echo $selection;
?>

Oui, J'ai bien le message qui apparait des que j'appui sur "OK" il m'affiche la page blanche avec le bouton de mon calendrier... :-(

--
Rodinrott

01/12/2009, 09h28
Rodinrott

Bonjour tout le monde,

E.Bzz : est ce que tu crois que cette article pourrais fonctionné pour mon souci?
Article...

Merci pour votre aide

--
Rodinrott
01/12/2009, 09h31
madevilts

Tu aurais le code complet, j'ai du mal à y voir clair.
01/12/2009, 09h43
E.Bzz

Citation:

Envoyé par Rodinrott

E.Bzz : est ce que tu crois que cette article pourrais fonctionné pour mon souci?
Article...

Je pense que non (mais rien ne t'empêche de tester ;) ).
La principale information est celle-là je pense :

Citation:

Envoyé par Rodinrott

des que j'appui sur "OK" il m'affiche la page blanche avec le bouton de mon calendrier... :-(

=> ton script de calendrier doit utiliser des document.write().
Or, appelé alors que la page est déjà chargée, cette instruction écrase le contenu de la page (pas pour rien qu'on en déconseille généralement l'utilisation) ...

Soit tu modifies le code de ton script calendrier pour remplacer les document.write() ...

... soit tu changes de script calendrier :aie:

En fait, il y a peut être une autre solution (mais ça dépend du fonctionnement global de ta page) : tu peux générer l'input et le bouton calendrier dès le chargement de la page, mais en les masquant.
Lors de la réception de la réponse Ajax, tu n'auras plus qu'à les afficher, ce qui devrait poser moins de problèmes ;)

A+
01/12/2009, 10h15
Rodinrott

E.Bzz : "tu peux générer l'input et le bouton calendrier dès le chargement de la page, mais en les masquant."

excuxe-moi mais Comment tu fait?

Ou par quoi je devrais remplacer le document.write() dans mon calendrier pour que ça fonctionne?

Merci.

--
Rodinrott
01/12/2009, 10h32
E.Bzz

Citation:

Envoyé par Rodinrott

excuxe-moi mais Comment tu fait?

Ben comme tu faisais avant de passer par Ajax ...
Ça fonctionnait, non ? :koi:

A+
01/12/2009, 10h47
Rodinrott
Citation:

Envoyé par E.Bzz

Ça fonctionnait, non ? :koi:

en faite je crois que je suis passer par AJAX directement je ne suis pas passer par la case départ.:D

En faie je viens de voir que dans le code de mon calendrier il y a un document.write pour afficher l'icone
Code:

1 2 document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" alt="Calendrier" />');
est ce que tu vois comment faire pour remplacer se document.write pour que mon AJAX fonctionne...

Merci

--
Rodinrott
01/12/2009, 10h53
madevilts

Ou dois se placer l'image ?
01/12/2009, 11h11
Rodinrott
le document.write et dans un fichier calendrier.js
Code:

1 2 document.write('<img src="' + a_tpl.imgpath + 'cal.gif" id="' + this.s_iconId + '" onclick="A_TCALS[\'' + this.s_id + '\'].f_toggle()" class="tcalIcon" alt="Calendrier" />');
le calendrier est appeller de cette façon:
Code:

1 2 3 4 5 new tcal ({'; 'formname': 'form', 'controlname': 'datedebut' });
en faite le probleme :

Quand je clic sur un bouton radio je fait appelle a AJAX pour afficher un input + le bouton du calendrier dans une div mais des que je clic sur le bouton radio il m'affiche une page blanche avec le bouton du calendrier seulement.E.Bzz ma super bien diriger et j'ai regarder si il y avais un document.write dans le JS du calendrier. De faite il y en a un mais je ne sais pas quoi mettre a la place pour pouvoir l'utiliser dans mon appelle AJAX...

Merci pour votre aide

--
Rodinrott
01/12/2009, 11h15
E.Bzz

La question est :

Citation:

Envoyé par madevilts

Ou dois se placer l'image ?

(par rapport aux éléments existants de ta page : dans quel div, par exemple) ;)

A+
01/12/2009, 11h19
Rodinrott

Oups Désoler,

document.getElementById('selection')

Merci
--
Rodinrott
01/12/2009, 11h23
madevilts

Peut-on voir le html de selection ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<table>
		<tr>
			<td width="200" align="center">
				<INPUT type= "radio" name="choisir" value="RCD" Onclick="select_fichier('27300')"> Insertion de RCD
			</td>
			<td width="200" align="center">
				<INPUT type= "radio" name="choisir" value="DATE" Onclick="select_date('27300')"> Par Date
			</td>
		<tr>
	</table>
  </center>
  <center>
  <form name="form" id="form" method="post" enctype="multipart/form-data">
  <table>
		<tr>
			<td><div id="selection"></div><br />
			</td>
		<tr>
	</table>
  </form>

voila j'espere qu'il y a se qu'il faut.

01/12/2009, 12h42
Rodinrott

J'ai trouvé :

Remplacement du document.write par document.getElementById('selection_2').innerHTML dans mon fichier de calendrier.

ça marche pas mal.

Merci de votre aide trés précieuse...

--
Rodinrott
01/12/2009, 14h58
madevilts

C'est bien ça ;)