Je vous soumets un problème sur lequel je m'arrache les cheveux depuis hier.
J'ai trois petites fonctions JS qui me permettent de mettre à jour des input type="select".
Je vous les donne au passage (vos remarques les concernant sont les bienvenues)
function insertNewOption(selectElement, newOption) {
var optsLen = $(selectElement).options.length;
$(selectElement).options[optsLen] = newOption;
return optsLen;
}
function removeOption(selectId, optionValue) {
var oOptions = $(selectId).getElementsByTagName('option');
var taille = oOptions.length;
for(i=0; i < taille; i++) {
if (oOptions[i].value == optionValue) {
Element.remove(oOptions[i]);
throw $break;
}
}
}
function updateOption(selectId, optionValue, optionNewText) {
var oOptions = $(selectId).getElementsByTagName('option');
var taille = oOptions.length;
for(i=0; i < taille; i++) {
if (oOptions[i].value == optionValue) {
oOptions[i].text = optionNewText;
throw $break;
}
}
}
Dans mon HTML, j'ai un form, et trois zones :
Une pour modifier un dossier (c'est une petite messagerie interne)
un input pour ajouter un dossier, un select pour renommer un dossier et un select pour supprimer un dossier.
Un input type="button" est associé à chacune de ces zones, surveillé par un Event.observe.
dans mon traitement Ajax :
switch($_POST['sFolderAction']) {
case 'new':
$idNewFolder = MessageFolder::newFolder($idUser, $_POST['sFolderName']);
if (!empty($idNewFolder)) {
echo 'Le dossier ', $_POST['sFolderName'], ' a été créé.';
?>
<script type="text/javascript">
insertNewOption(
'selectFolderUpdate',
new Option("<?php echo $_POST['sFolderName']; ?>", "<?php echo $idNewFolder; ?>"));
insertNewOption(
'selectFolderDelete',
new Option("<?php echo $_POST['sFolderName']; ?>", "<?php echo $idNewFolder; ?>"));
</script>
<?php
}
break;
case 'update':
if (MessageFolder::updateFolder($_POST['idFolder'], $_POST['sFolderName'])) {
echo 'Le dossier ', $_POST['sFolderName'], ' a bien été renommé.';
?>
<script type="text/javascript">
updateOption(
'selectFolderUpdate',
'<?php echo $_POST['idFolder']; ?>',
'<?php echo $_POST['sFolderName']; ?>'
);
updateOption(
'selectFolderDelete',
'<?php echo $_POST['idFolder']; ?>',
'<?php echo $_POST['sFolderName']; ?>'
);
</script>
<?php
}
break;
case 'delete':
$sFolderName = MessageFolder::getFolderName($_POST['idFolder']);
MessageFolder::deleteFolder($_POST['idFolder']);
echo 'Le dossier ', $sFolderName, ' a été supprimé.';
?>
<script type="text/javascript">
removeOption(
'selectFolderUpdate',
'<?php echo $_POST['idFolder']; ?>'
);
removeOption(
'selectFolderDelete',
'<?php echo $_POST['idFolder']; ?>'
);
</script>
<?php
break;
}
(oui, il y a un peu de php aussi...)
La réponse ajax :
Le dossier testInsert$$ a bien été renommé. <script type="text/javascript">
updateOption(
'selectFolderUpdate',
'4',
'testInsert$$'
);
updateOption(
'selectFolderDelete',
'4',
'testInsert$$'
);
</script>
à priori, tout va bien....
Sauf que seul un select (le premier dans le DOM) est mis-à-jour....
Et si j'isole l'un ou l'autre, ça fonctionne.
Donc sémantiquement, mon html est bon, mon code JS aussi et pas de souci côté PHP....
Quelqu'un aurait une idée?
D'avance merci pour vos lumières et autres remarques.
A voir également:
Appeler une fonction javascript dans un autre fichier
J'ai trouvé.
Du moins une amie a trouvé.
C'est le throw $break dans les fonctions qui arrêtait le script.
Ça doit lever une exception....
Ce qui a mis sur la piste, c'est dans le cas d'un ajout, les deux select étaient bien mis à jour.
J'ai remplacé ces throw $break (de prototype) par des bons vieux break (JavaScript) et ça fonctionne à merveille.
Un grand merci à toi PetoleTeam dans tous les cas pour le temps que tu auras passé sur mon topic :)
....et à l'amie qui a trouvé surtout :)