Ajax : agir sur deux zones d'affichage

02 juin 2006, 14:50

Bonjour,

J'espère être assez clair. J'ai 3 listes déroulantes. Agir sur la première doit modifier le contenu des deux autres...

J'ai décidé de reconstruire les lignes du tableau avec les nouvelles valeurs dans le script appellé par Ajax.
Dans un premier temps j'ai donc rapprochées les lignes contenant les deux listes à modifier.
Je me suis rendu compte qu'un <span> contenant les <tr></tr> d'un tableau ne fonctionnait pas. J'ai donc décidé d'inclure ces lignes dans un nouveau tableau lui même inclu entre les <td></td> de l'original.
ex:
<tr><td>appel de la fonction Javascript devant modifier le span</td></tr>
<tr><td><span>
tableau reconstruit par le script php appellé par Ajax contenant les deux listes déroulantes
</span></td></tr>

Le script actuel fonctionne mais IE semble ne pas se préocuper de la mise en forme ; les couleurs et les styles, bien que présents dans le code renvoyé, ne sont pas interprétés, le tableau ainsi mis à jour est tout blanc et le texte non mis en forme (par contre, il va bien afficher les images ?).

Quelqu'un sait il pourquoi la mise en forme n'est pas bien interprétée ? (j'ai déjà essayé de réécrire les styles en dur dans le code)
Existe-t-il un autre moyen d'arriver à mes fins ?

Merci

03 juin 2006, 19:44

essaye en retirant le span et en pointant directement sur le td. Le span est un element inline, il y a des chances pour que ce soit lui qui empeche la mise en forme

06 juin 2006, 08:04

Je viens d'essayer en supprimant le span... Le résultat est identique.

merci quand même.

06 juin 2006, 08:22

Une petite précision :

Lorsque je copie/colle le code renvoyé en Ajax dans un nouveau fichier, les couleurs apparaissent comme il faut, les styles aussi si évidemment je les incorpore au début de la page.

J'en perd mon latin.

06 juin 2006, 17:29

Bon, on ne se bouscule pas pour les réponses... tant pis, je vous fait part de mes recherches.

J'ai décidé de créer dynamiquement par Ajax une fonction Javascript qui devait modifier mes deux SELECT en leur fournissant les bonnes lignes grâce à un innerHtml.
Puis un appel à cette fonction :

<script>
function change(){
document.getElementById("selectSystemeChauffage").innerHTML="les lignes <option></option>";
document.getElementById("selectRegulChauffage").innerHTML="les lignes <option></option>";
}
change();
</script>

Voilà, je pensais que la fonction allait s'exécuter mais non, rien ne se passe (pourtant le script est bien passé à la page).
GRRRR !

Aidez-moi SVP, donnez-moi une solution, je craque !!!

06 juin 2006, 19:04

Tu dois ajouter dynamiquement les élements options dans tes select et non avec innerHTML:

Code : Tout sélectionner

function addOption(selectId,texte,valeur){

		var objOption = new Option(texte,valeur);
		document.getElementById(selectId).options.add(objOption);

	return true;
}

j'espère avoir répondu à ta question

07 juin 2006, 09:08

Merci starkeus, mais hélas, ça ne marche toujours pas.

J'ai placé la fonction que tu m'as donné en dur dans ma page (d'abord dans le <body> puis dans le <head>) et le script Ajax me renvoi ceci (les valeurs sont toutes à 1 pour test) :

<script></script>

Normalement, ce texte doit se placer dans mon <span>. Malheureusement, mes <select> ne se modifient pas dynamiquement.

Je perds espoir.. Merci tout de même pour cette piste.

07 juin 2006, 17:13

J'avais eu le même problème.. pas moyen de remplacer les options dans un select, j'avais opté pour la reconstruction des options via javascript mais le résultat ne me convenait pas (j'avais eu des problèmes d'utf8 et la liste étant longue, c'était assez long de créer chaque option)

J'ai finalement opté pour mettre mon select dans un div et générer le select complet avec ajax (balises <select> incluses et <option> donc) puis de remplacé le contenu du div... c'est probablement pas la meilleure solution, mais ça me convenait bien

07 juin 2006, 17:49

vivi, c'est ce que j'ai tenté dans mon premier post.

Les champs se construisaient bien, c'est la mise en forme qui n'allait pas.
Perte de la couleur de fond du tableau et des styles. Comme si il s'occupait dynamiquement des données et pas de la mise en page.
(le copier/coller du script généré dans un nouveau document HTML fonctionnait pourtant).

Avec le dernier script, rien ne se passe...

08 juin 2006, 07:46

En fait ça marche impec si tu n'as qu'un seul <select> à construire.

Là j'en ai deux faisant partie d'un tableau, il faut donc générer aussi les lignes (et mises en formes) contenant ces <select>.

C'est là que le problème se pose, les <select> se construisent bien... mais la mise en forme ne suit pas ???

08 juin 2006, 10:36

Réponse :

Mes lignes à générer ont été placées dans un nouveau tableau.
<td><span> code généré </span></td>
ici le code généré est un tableau entier.

Et ça marche.

Pourquoi ça ne fonctionnait pas :
Parceque le code généré ne créait QUE les lignes du tableau.
<td><table><span> code généré </span></table></td>

Voilà, en espérant que ça puisse servir à d'autres...

Merci à ceux qui se sont impliqués.

Ajax : agir sur deux zones d'affichage

Qui est en ligne