[AJAX] javascript et ajax apres appel div

Version imprimable

Salut,

Je suis nouveau ici et je débute dans l'ajax.

Je vous explique mon problème :

J'envoie un formulaire dans un div avec une fonction ajax jusqu'à la rien d'extraordinaire car ca marche, mais dans la page appelée dans le div qui a contrôlé les infos du formulaire, j'ai une inclusion d'un autre page avec une fonction horloge java avec un setTimeout qui doit changer l'heure toute les secondes (normal lol) mais la ca ne fonctionne pas. Par contre quand j'exécute la page seul la fonction se lance bien.

Code de la page principal.php :

Code:

1
2
3
4
5
6
7
8
...
<script language="javascript" type="text/javascript" src="fonctions/ajax.js" ></script>
<?
echo"<div id=\"formulaire\" style=\"position:absolute; visibility:visible; width:100%; height:100%; top:0; left:0; z-index:2;\">";
include('formulaire.php');
echo"</div>";
?>
...

Code de la page ajax.js :

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
50
51
52
53
54
55
56
57
58
function donnee_get(form1)
{
var data1 = "";
var forma = document.getElementById(form1);
var elements = forma.elements;
for(var i=0; i<forma.length; i++)
{
data1 += elements[i].name + "=" +escape(elements[i].value);
if((i+1)<forma.length)
{
data1+="&";
}
}
return data1;
}
function post_get(fichier, div, method, form)
{
var xhr=null;
var data="null";
if(form!="null")
{
if(method=="GET")
{
data=form;
method="POST";
}
else
{
data = donnee_get(form);
}
}
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open( method, fichier, false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
if (document.getElementById)
{
document.getElementById(div).innerHTML=xhr.responseText;
}
else
{
if (document.layers)
{
document.div.innerHTML=xhr.responseText;
}
else
{
document.all.div.innerHTML=xhr.responseText;
}
}
}

Code de la page formulaire php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<?
if(isset($_POST['login']) && isset($_POST['password']))
{
...
include('horloge.php');
...
}
else
{
...
<form id="formulaire1" name="formulaire1" method="post" action="javascript:post_get('formulaire.php', 'general', 'POST', 'formulaire1');" style="margin:0px; padding:0px;">
...
</form>
...
}
?>

Code de la page horloge.php :

Code:

1
2
3
4
5
6
7
<script language="javascript" type="text/javascript" src="fonctions/horloge.js" ></script>
<table width="100%" height="40" border="0" cellspacing="0" cellpadding="0" background="images/structure/barre_haute.png">
  <tr>
    <td id="td_header">&nbsp;</td>
    <td id="horloge" width="100" style="color:#FFFFFF; font-size:18px; font-weight:bold;">&nbsp;</td>
  </tr>
</table>

Code de la page horloge.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function horloge(idw)
{
var idvalue=idw;
var today=new Date();
var heuresimple="";
h = today.getHours();
m = today.getMinutes();
s = today.getSeconds();
        if(h<10)
   { h = '0'+h; }
        if(m<10)
   { m = '0'+m; }
        if(s<10)
   { s = '0'+s; }
heuresimple = ''+h+' : '+m+' : '+s+'';
document.getElementById(idvalue).innerHTML = heuresimple;
setTimeout('horloge(\'horloge\')',1000);
}
setTimeout('horloge(\'horloge\')',10);

Donc si quelqu'un aurai une suggestion a mon problème ca serai bien car pour le moment j'ai rien trouvé sur google qui pourrai m'aider.

01/04/2010, 14h14
E.Bzz

Bonjour et bienvenue sur Developpez.com :D

si le script de ton horloge est récupéré est inclus dans la page via Ajax, il est normal qu'il ne soit pas interprété directement.
As-tu le ce point de la FAQ ?

A+

Merci pour ton aide, j'ai trouvé une solution pour le eval() grace a cette page :
http://www.xorax.info/blog/programma...l-global.html#

Du coup mon script ajax.js ressemble a ca :

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function donnee_get(form1)
{
var data1 = "";
var forma = document.getElementById(form1);
var elements = forma.elements;
for(var i=0; i<forma.length; i++)
 {
 data1 += elements[i].name + "=" +escape(elements[i].value);
  if((i+1)<forma.length)
  {
  data1+="&";
  }
 }
return data1;
}
function post_get(fichier, div, method, form)
{
var xhr=null;
var data="null";
if(form!="null")
{
if(method=="GET")
{
data=form;
method="POST";
}
else
{
data = donnee_get(form);
}
}
if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open( method, fichier, false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
if (document.getElementById)
{
 var div = document.getElementById(div);
 div.innerHTML = xhr.responseText;
 var allscript = div.getElementsByTagName('script');
 for(var i=0;i< allscript.length;i++){eval(allscript[i].text);}
}
else
{
if (document.layers)
{
 var div = document.div.innerHTML;
 div.innerHTML = xhr.responseText;
 var allscript = div.getElementsByTagName('script');
 for(var i=0;i< allscript.length;i++){eval(allscript[i].text);}
}
else
{
 var div = document.all.div.innerHTML;
 div.innerHTML = xhr.responseText;
 var allscript = div.getElementsByTagName('script');
 for(var i=0;i< allscript.length;i++){eval(allscript[i].text);}
}
}
}

Donc pour le moment pour moi c'est résolu mais que a moitié, car bugg avec IE (on va me dire comme d'habitude d'ailleurs lol)

voici la ligne qui porte probleme : var allscript = div.getElementsByTagName('script');

donc si quelqu'un a une solution pour ie ca serai cool

02/04/2010, 09h57
E.Bzz

C'est la même solution :mrgreen:
En plus claire dans la FAQ ...
Sinon, tu peux virer les if de la fin il ne servent à rien.
Utilise

Code:

var div = document.getElementById(div);

qui fonctionne dans tous les cas ...

EDIT : par contre, il faut remplacer le 2° div ci-dessus par l'id du div.
Une même variable ne peut pas représenter à la fois un id ( = string) et l'objet lui-même (= object)

A+

Merci E.Bzz pour ton aide

j'ai fait le petit changement, dont voici le code :
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 <script type="text/javascript"> function donnee_get(form1) { var data1 = ""; var forma = document.getElementById(form1); var elements = forma.elements; for(var i=0; i<forma.length; i++) { data1 += elements[i].name + "=" +escape(elements[i].value); if((i+1)<forma.length){data1+="&";} } return data1; } function post_get(fichier, div, method, form) { var xhr=null; var data="null"; if(form!="null") { if(method=="GET") { data=form; method="POST"; } else{data = donnee_get(form);} } if (window.XMLHttpRequest){xhr = new XMLHttpRequest();} else if (window.ActiveXObject){xhr = new ActiveXObject("Microsoft.XMLHTTP");} xhr.open( method, fichier, false); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(data); var c = document.getElementById(div); c.innerHTML = xhr.responseText; var mesScripts = document.getElementById(div).getElementsByTagName("script"); for (var i=0; i<mesScripts.length; i++) {eval(mesScripts[i].innerHTML);} } </script>
mais j'ai toujours un problème avec internet explorer qui ne le prend pas en compte cette ligne :

Code:

for(var i=0; i<mesScripts.length; i++){eval(mesScripts[i].innerHTML);}

voici l'erreur retourné :

Citation:

Détails de l’erreur de la page Web

Message*: Cet objet ne gère pas cette propriété ou cette méthode
Ligne*: 36
Caractère*: 42
Code*: 0
URI*: xxxxxxxxxxxx

Si tu avais une idée car la je sèche complet, j'ai fait plein de forum et sans résultat ???

03/04/2010, 14h51
mrtechno01

Bon bin j'ai trouvé le problème, en fait c'est que j'avais pas appelé la fonction de mon horloge dans la page principale (j'ai supprimé le include dans ma page formulaire.php) et la youpiiiii. Du coup ca marche maintenant sur tout les navigateurs

Bon je reviens sur mon sujet après un bugg IE que je viens de corriger.

Alors avec ma fonction, il est possible d'appeler un page ou d'envoyer des formulaire en ajax avec des fonctions java-script sans aucun problème sur tous les navigateurs.

Voici le script :

Citation:

<script type="text/javascript">
function donnee_get(form1)
{
var data1 = "";
var forma = document.getElementById(form1);
var elements = forma.elements;
for(var i=0; i<forma.length; i++)
{
data1 += elements[i].name + "=" +escape(elements[i].value);
if((i+1)<forma.length){data1+="&";}
}
return data1;
}
function post_get(fichier,div,method,form)
{
var xhr=null;
var data="null";
if(form!="null")
{
if(method=="GET")
{
data=form;
method="POST";
}
else{data = donnee_get(form);}
}
if (window.XMLHttpRequest){xhr = new XMLHttpRequest();}
else if (window.ActiveXObject)
{
try {xhr = new ActiveXObject("Msxml2.XMLHTTP");}
catch (e){xhr = new ActiveXObject("Microsoft.XMLHTTP");}
}
else
{
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
xhr = false;
}
xhr.open( method,fichier,false);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(data);
var c = document.getElementById(div);
c.innerHTML = xhr.responseText;
try
{
var l=c.getElementsByTagName('script').length
for(var j=0;j<l;j++)
{
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = c.getElementsByTagName('script').item(j).text;
document.getElementsByTagName('head')[0].appendChild(script);
}
}
catch(e)
{
alert(e);
}
}
</script>

J'espère que ceci aidera certain ;)

Pour info, pour utiliser cette fonction voici ce qu'il faut faire suivant ce que vous voulez en faire :
Code:

1 2 3 4 5 6 7 8 // Appels post_get("monfichier.php", "div_de_destination", "GET", null) post_get("monfichier.php", "div_de_destination", "POST", null) // ces appels permettent d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destination, ici il n'y a pas de paramètre. Ce sont les appels de base, ils me servent notamment pour faire les liens hypertextes. post_get("monfichier.php", "div_de_destination", "GET", "c=2&d=4") // cet appel permet d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destinatio, les données c=2 et d=4 sont transmises par la méthode POST. post_get("monfichier.php", "div_de_destination", "POST", "mon_formulaire") // cet appel permet d'exécuter le script contenu dans monfichier.php et d'afficher le retour dans la div d'id div_de_destinatio, les données du formulaire sont récupérées et mises en forme (également encodées avec la fonction escape, équivalent de l'url_encode de php) par la fonction donnee_get puis sont transmises par la méthode POST.

28/10/2010, 17h22
Vencarlo

probleme javascript et ajax sous IE

Bonjour,

Désolé d'ouvrir ce message qui commence à se faire vieux.
Et merci pour ce dernier script, c'est exactement ce que je cherchais !

Alors sous Firefox v3.6 aucun soucis ça fonctionne parfaitement !
Par contre sous IE v7 ça ne fonctionne pas du tout. je n'ai pas d'erreur de compilation mais il ne se passe rien...

Dans mon PHP appelé depuis mon Ajax, j'ai tout simplement ça

Code:

echo "<SCRIPT>alert('blablabla');</SCRIPT>";

Quelqu'un à rencontré ce problème ? une idée de correction ?

Merci d'avance.