[AJAX] impossible d'updater le div souhaité..
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:
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:
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:
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:
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);
?> |
