Appel de fonction javascript qui ne marche qu'une fois...

Résolu
sebshiva
Messages postés
194
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
- 16 juin 2010 à 14:10
sebshiva
Messages postés
194
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
- 17 juin 2010 à 18:55
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

sebshiva
Messages postés
194
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
16 juin 2010 à 14:12
oups....
Je vois "Thème : CSS / Général"
Désolé pour le mauvais emplacement de mon post.
1
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
16 juin 2010 à 18:18
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)
1
sebshiva
Messages postés
194
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
16 juin 2010 à 18:31
Bonjour!

Non, ils ont pour id : "selectFolderUpdate" & "selectFolderDelete".
Merci de ta suggestion en tous cas! :)
1
sebshiva
Messages postés
194
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
16 juin 2010 à 18:35
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....
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
16 juin 2010 à 18:57
difficile de t'aider, je ne connais pas cette libraire...

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

;O)
0
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
17
17 juin 2010 à 18:38
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)
0
sebshiva
Messages postés
194
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
4
17 juin 2010 à 18:55
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!
0