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

Question

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

Signaler

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.

Afficher la suite

A voir également:

Appel de fonction javascript qui ne marche qu'une fois...
Appeler une fonction javascript dans un autre fichier - Forum - Javascript / DHTML
Pb appel de fonction javascript innerhtml ✓ - Forum - Javascript / DHTML
Problème d'appel de fonction ✓ - Forum - Javascript / DHTML
Appeler une fonction dans un js externe sans évènement ✓ - Forum - Javascript / DHTML
Combiner deux fonctions javascript ✓ - Forum - Javascript / DHTML

10 réponses

Réponse 2 / 10

PetoleTeam

Messages postés: 3426
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

13
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)

Réponse 3 / 10

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! :)

Réponse 4 / 10

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....

Réponse 5 / 10

PetoleTeam

Messages postés: 3426
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

13
16 juin 2010 à 18:57

difficile de t'aider, je ne connais pas cette libraire...

;O)

Réponse 6 / 10

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 :)

Réponse 7 / 10

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! :)

Réponse 8 / 10

PetoleTeam

Messages postés: 3426
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

13
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)

Réponse 9 / 10

PetoleTeam

Messages postés: 3426
Date d'inscription: lundi 26 décembre 2005
Statut: Membre
Dernière intervention: 14 janvier 2011

13
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)

Réponse 10 / 10

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!

Répondre Posez votre question

sebshiva · Accepted Answer · 2010-06-16T14:12:45+0200

Réponse 1 / 10

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.

Votre réponse