[AJAX] impossible d'updater le div souhaité..

**chuck_73** · 03/11/2011, 21h12

Bonjour

Je suis débutant dans javascript (faut bien occuper les longues soirées d'hiver qui arrivent...).
Pour aider une association, je fais une petite page intranet, qui permet de récupérer des données d'une base de données mysql et de les afficher (génération via php).
Rien de compliqué, les exemples sont disponibles à la pelle... oui, mais.. ca marche à moitié...

je voudrais que le resultat apparaissent dans le div "pied_de_page"... si je l'affiche dans "corps", cela marche sans soucis (mais je perds le formulaire que j'avais affiché avant dans ce corps, je souhaiterais le garder pour l'interactivité, pour afficher ce formulaire, je fais href="javascript:sendForm('search_prise.html', null, 'corps');" qui marche bien).

Bref à l'heure actuelle, cela marche pour le div 'corps', mais pas pour le div 'pied_de_page', dans ce cas là, mon div 'corps' disparrait.. :o

Bref, depuis 3 jours, je commence à craquer, impossible de faire ce que je voudrais réellement

info complémentaire, je suis sous linux, ainsi que le serveur (apache, php5)
Merci de m'aider

Voici mon code javascript, contenu dans ajax1.js:

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
50
51
52
53
54
55
56
57
58
59
60
 
//envoi la demande issus du formulaire
function sendForm_Prise(id_Form)
{ 
var form= document.getElementById(id_Form);
   var fgnom= form.toron_ToFind.value;  
//"Prise_search.php"
var req = "toron_ToFind=";
req = req + fgnom;
alert(req);
sendForm("Prise_search.php", req, "corps") ; //si j'utilise 'pied_de_page ici, je n'ai pas le réslutat attendu
}
 
//effectue  la requete
/*serverFile: fichier demandé sur le serveur
* req: definition de la requete
* div_out: div de sortie
*/
function sendForm(serverFile, requ, div_out) 
{
    var xhr = null;
 
    	if (window.ActiveXObject) 
	{
        	xhr = new ActiveXObject("Microsoft.XMLHTTP");
    	}
	else if (window.XMLHttpRequest) 
	{
        	xhr = new XMLHttpRequest();
	}
	else
	{ 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	}
 
xhr.open("POST", serverFile, true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
xhr.onreadystatechange = function()
{
if ( xhr.readyState == 4 )
 {
	if(xhr.status == 200 || xhr.status == 0) 
 	{	
		document.getElementById( div_out).innerHTML = xhr.responseText;
	} 
 
	else
	{
		document.getElementById( div_out).innerHTML ="Erreur " + xhr.status + " " + xhr.statusText;
	}
 }
else 
 { 
	document.getElementById(div_out).innerHTML = '<p style="text-align:center">Chargement des données en cours...</p>'; 
 } 
} //fin function
 
xhr.send(requ);
 
}

le code de la page qui appel la fonction (formulaire), qui est incorporé dans la page principale via un div

Code html :

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
 
<html>
<head>
<title>Liaisons Variables FlightGear - Simulateur </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
 
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script type="text/javascript" src="ajax1.js"></script>
<!--action="toron_search.php" -->
	<form name="Prise_search_form" id="Prise_search_form" onsubmit="javascript:sendForm_Prise('Prise_search_form');">
		<p>
	  		<p>Rechercher une Prise  </p>
			<input type="text" name="toron_ToFind" />
			<input type="submit" value="Valider"  />
			<p>% est le caractére d'échappement - équivalent à *</p>
 
		</p>
	</form>
</body>
</html>

celui du css de la page (au cas où j'aurais oublié un truc)

Code css :

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
 
div#corps
{  /*display: inline-block;*/
   width: 85%;
   height: auto;
	max-height: 400px;
background-color:#FFCC00;
overflow:auto;
}
 
div#pied_de_page
{/*display: block;*/
   width: 100%;
	min-height: 200px;   
	height: auto;
	max-height: 800px;
background-color:#33FF99;
overflow:auto;
display:inline-block;
}

et le code php qui me génére la page.
Je génére un xml, que je transforme par la suite en utilisant un xsl (je le fais faire par le seveur, histoire de ne pas trop me casser la tête avec le javascript)

Code php :

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
50
51
52
53
54
55
56
57
58
59
 
<?php
 
// Déclaration des paramètres de connexion
$host = localhost;
$user = xxxxx;
$bdd = xxxxx;
$passwd  = xxxxxxx;
 
// Connexion au serveur
mysql_connect($host, $user,$passwd) or die("erreur de connexion au serveur");
mysql_select_db($bdd) or die("erreur de connexion a la base de donnees");
 
//creation de la requete
  $query = sprintf("SELECT PriseA, PriseB, Longueur, Ref_Doc, Armoire_A, Armoire_B FROM Simu.Torons WHERE PriseA OR PriseB LIKE '%s'",
 mysql_real_escape_string($_POST['toron_ToFind']));
 
 
$result = mysql_query($query);
 
// Recuperation et traitement des resultats
//on assemble le tout dans $xml_result pour creer une chaine xml
 
$xml_result=$xml_result . "<Torons_list>\n";
while($row = mysql_fetch_row($result))
{
	$PriseA = $row[0];
	$PriseB = $row[1];
	$longueur = $row[2];
	$Doc = $row[3];
	$Armoire_A = $row[4];
	$Armoire_B = $row[5];
 
//assemblage dans $xml_result
$xml_result=$xml_result . "<Toron>\n
	<PriseA>".$PriseA."</PriseA>\n
	<PriseB>".$PriseB."</PriseB>\n
	<longueur>".$longueur."</longueur>\n
	<Doc>".$Doc."</Doc>\n
	<Armoire_A>".$Armoire_A."</Armoire_A>\n
	<Armoire_B>".$Armoire_B."</Armoire_B>\n
</Toron>\n";
}
 
$xml_result=$xml_result . "</Torons_list>";
 
mysql_close();
//transformation de la chaine XML en HTML en utilisant le xsl
   $xslDoc = new DOMDocument();
   $xslDoc->load("torons_infos.xsl");
 
   $xmlDoc = new DOMDocument();
   $xmlDoc->loadXML($xml_result);
 
   $proc = new XSLTProcessor();
   $proc->importStylesheet($xslDoc);
   echo $proc->transformToXML($xmlDoc);
 
?>

**Bovino** · 03/11/2011, 21h50

Code :

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

onsubmit="javascript:sendForm_Prise('Prise_search_form');"

L'erreur vient de là...
Tout d'abord, le pseudo-protocole javascript: est inutile (A quoi sert 'javascript:' dans une balise HTML ?).

Ensuite, certains éléments HTML impliquent un comportement prédéfini : un lien hypertexte permet de naviguer et un bouton submit de soumettre un formulaire. Dans ces deux cas, il y a redirection vers une autre page (même s'il s'agit en fait de la même...)
Dans ton cas, lors du submit, tu envoies la requête AJAX, mais comme tu ne fais rien de plus, ensuite, le formulaire est bel et bien soumis, donc tu rafraichis la page et la requête se perd...
Pour annuler le comportement par défaut, il faut faire un return false; avant la soumission :

Code :

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

onsubmit="sendForm_Prise('Prise_search_form');return false;"

**chuck_73** · 03/11/2011, 22h03

Bovino....
Merci

Si un écran ne nous séparait pas, je sais pas ce que je te ferai pour te remercier pour cette réponse aussi simple qu'efficace

Sujet passé à résolu

[AJAX] impossible d'updater le div souhaité..

AJAX

Discussions similaires

Partager

Partager