Appel de fonction javascript qui ne marche qu'une fois... [Résolu]

Signaler
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
-
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
-
Bonjour à tous!

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.

10 réponses

Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
oups....
Je vois "Thème : CSS / Général"
Désolé pour le mauvais emplacement de mon post.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
sans regarder le code, il semblerait que tu ais la même ID et/ou NAME pour tes deux SELECTs (input type="select" ???)

;O)
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
Bonjour!

Non, ils ont pour id : "selectFolderUpdate" & "selectFolderDelete".
Merci de ta suggestion en tous cas! :)
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
Voici le HTML ainsi que les appels Ajax si ça peut aider :



Gestion des dossiers

<hr class="white" />







<form action="#" id="msgFolderManagerForm">

<label for="newFolderInuput">
Créer un nouveau dossier
</label>



<hr class="grey" />

<label for="selectFolderUpdate">
Renommer le dossier
</label>
{__SELECT_FOLDER_UPDATE__}
<label for="updateFolderInput">
pour
</label>



<hr class="grey" />

<label for="selectFolderDelete">
Supprimer le dossier
</label>
{__SELECT_FOLDER_DELETE__}

Attention !


Cette action supprimera tous les messages contenus dans ce dossier.

</form>






<script type="text/javascript">
new Event.observe("newFolderSubmit","click", function(evt) {
new Ajax.Updater('msgFolderManagerNotification', "{__AJAX_PATH__}msgFolderManager.ajax.php", {
method : 'post',
parameters : "sFolderAction=new&sFolderName="+ $('newFolderInput').value,
evalScripts : true,
onSuccess : function() {
$('newFolderInput').value = '';
}
});
});
new Event.observe("selectFolderUpdate","change", function(evt) {
$("updateFolderInput").value = $("selectFolderUpdate").options[$("selectFolderUpdate").selectedIndex].text;
$("updateFolderInput").focus();
});
new Event.observe("updateFolderSubmit","click", function(evt) {
new Ajax.Updater('msgFolderManagerNotification', "{__AJAX_PATH__}msgFolderManager.ajax.php", {
method : 'post',
parameters : "sFolderAction=update&idFolder="+ $('selectFolderUpdate').value + "&sFolderName=" + $('updateFolderInput').value,
evalScripts : true,
onSuccess : function() {
$('updateFolderInput').value = '';
$('selectFolderUpdate').value = '';
}
});
});
new Event.observe("deleteFolderSubmit","click", function(evt) {
new Ajax.Updater('msgFolderManagerNotification', "{__AJAX_PATH__}msgFolderManager.ajax.php", {
method : 'post',
parameters : "sFolderAction=delete&idFolder="+ $('selectFolderDelete').value,
evalScripts : true,
onSuccess : function() {
$('selectFolderDelete').value = '';
}
});
});
</script>


C'est un template hein....
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
difficile de t'aider, je ne connais pas cette libraire...

;O)
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
@PetoleTeam -> Non....

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 :)
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
C'est prototype.
Mais merci quand même! :)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
en regardant rapidement le code peut être un conflit entre l'événement change sur le SELECT "selectFolderUpdate" et le click sur "updateFolderSubmit"

;O)
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
Bonjour,
MERCI à toi du retour, devenu si rare, je serais moins bête après ce que je viens de lire.

Juste une remarque, si je puis me permettre, pourquoi écrire
var oOptions = $(selectId).getElementsByTagName('option');
quand un simple
var oOptions = $(selectId).options;
suffit...
mais cela reste anecdotique...
bonne poursuite...
;O)
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
Salut!

"MERCI à toi du retour, devenu si rare"
-> Bein c'est tout à fait normal je trouve...
Et si ça peut servir à quelqu'un par la suite...

Sinon pourquoi écrire :
var oOptions = $(selectId).getElementsByTagName('option');
quand un simple
var oOptions = $(selectId).options;

euh... tout simplement parce que je l'ignorais!
Merci beaucoup pour cette remarque! Ça raccourcira quelques lignes de code!

Bonne poursuite à toi aussi!