Posez votre question Signaler

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

Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 - - Dernière réponse : sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 - 17 juin 2010 à 18:55
Javascript / DHTML Posez votre question Signaler
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.
Afficher la suite 

10 réponses

Meilleure réponse
Signaler Commenter la réponse de sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 4
1
Merci
oups....
Je vois "Thème : CSS / Général"
Désolé pour le mauvais emplacement de mon post.

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 133 internautes nous ont dit merci ce mois-ci

Commenter la réponse de sebshiva
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 9
1
Merci
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)

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 133 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 4
1
Merci
Bonjour!

Non, ils ont pour id : "selectFolderUpdate" & "selectFolderDelete".
Merci de ta suggestion en tous cas! :)

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 133 internautes nous ont dit merci ce mois-ci

Commenter la réponse de sebshiva
Signaler Commenter la réponse de sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 4
1
Merci
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....

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 133 internautes nous ont dit merci ce mois-ci

Commenter la réponse de sebshiva
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 9
1
Merci
difficile de t'aider, je ne connais pas cette libraire...

;O)

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 133 internautes nous ont dit merci ce mois-ci

Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 4
1
Merci
@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 :)

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources 133 internautes nous ont dit merci ce mois-ci

Commenter la réponse de sebshiva
Signaler Commenter la réponse de sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 4
0
Merci
C'est prototype.
Mais merci quand même! :)
Commenter la réponse de sebshiva
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 9
0
Merci
en regardant rapidement le code peut être un conflit entre l'événement change sur le SELECT "selectFolderUpdate" et le click sur "updateFolderSubmit"

;O)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de PetoleTeam
Messages postés
3435
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
 9
0
Merci
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)
Commenter la réponse de PetoleTeam
Signaler Commenter la réponse de sebshiva
Messages postés
193
Date d'inscription
lundi 16 mars 2009
Statut
Membre
Dernière intervention
17 juin 2010
 4
0
Merci
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!
Commenter la réponse de sebshiva
Répondre Posez votre question