Sujet Précédent Sujet Suivant

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

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

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

Posez votre question
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 17
16 juin 2010 à 18:57
difficile de t'aider, je ne connais pas cette libraire...

;O)
1
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 :)
1
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! :)
0
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 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
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 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
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!
0

Discussions similaires

Calcul de somme dans un formulaire
Bullfrog -
Bul3 -

8 réponses
Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
remise a zero de fonction
cs_galian -
ADPro22 -

6 réponses
boucle pour additionner les nombres d'un array + affichage du total dans un text
BBFUNK01 -
BBFUNK01 -

7 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
Rejoignez-nous