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

**Rodinrott** · 25/11/2009, 10h50

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Rodinrott** · 26/11/2009, 14h49

J'ai trouvé ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**madevilts** · 26/11/2009, 15h55

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

**E.Bzz** · 26/11/2009, 16h27

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

A+

**Rodinrott** · 26/11/2009, 17h17

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**E.Bzz** · 26/11/2009, 17h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

onchange="verif_saisie();"

dans ta fonction AfterAjax(), il faudrait ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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+

**Rodinrott** · 30/11/2009, 11h50

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

**E.Bzz** · 30/11/2009, 14h14

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+

**Rodinrott** · 30/11/2009, 15h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ajax:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**E.Bzz** · 30/11/2009, 16h00

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

A+

**Rodinrott** · 30/11/2009, 16h08

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Rodinrott** · 01/12/2009, 09h28

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

**madevilts** · 01/12/2009, 09h31

Tu aurais le code complet, j'ai du mal à y voir clair.

**E.Bzz** · 01/12/2009, 09h43

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 :

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

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+

**Rodinrott** · 01/12/2009, 10h15

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

**E.Bzz** · 01/12/2009, 10h32

Envoyé par Rodinrott

excuxe-moi mais Comment tu fait?

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

A+

**Rodinrott** · 01/12/2009, 10h47

Envoyé par E.Bzz

Ça fonctionnait, non ?

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**madevilts** · 01/12/2009, 10h53

Ou dois se placer l'image ?

**Rodinrott** · 01/12/2009, 11h11

le document.write et dans un fichier calendrier.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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