[RESOLU] JQUERY: Remplir un champ depuis une liste dynamique externe

Question

pegos

11 Aug 2009 à 16:28

Bonjour à tous,
Je débute en jquery et je bloque butte sur un bout de code depuis un bon moment.
Je souhaite remplir plusieurs champs de formulaire avec une sélection faite dans une liste dynamique appelée en JS via jquery.
1/La liste s'ouvre bien, mais à la validation, c'est toujours le premier champ appelé qui reçoit la sélection.
2/Je souhaiterais ne pas pouvoir faire d'autres appels tant que la liste est ouverte.

Voici un exemple de mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#main input{border:1px solid gray;}
</style>

<script type="text/javascript">
$(function(){
$('#main input').click(function(){
$('#info').remove();
$(this).css('border','1px solid red');
var idch = this.id;
//console.log(idch);//id of the focussed field
$('#container').show();

$('<div id="info" />').load('quest.html',function(){
$(this).hide()
.appendTo('#container')
.show();
});

$('#container a').click(function(){
$('#main input[id='+idch+']').css('border','1px solid gray');
$('#main input[id='+idch+']').val($("input:radio[name='q']:checked").val());
$('#container').hide('fast');
$('#info').remove();

return false;
});
});
});
</script>
</head>

<body>

<div id="container" style="display:none">
<h1> Your choice </h1>
<a href="#">Send the value</a>
</div>



<div id="main">
<label for="ch1">q1:</label>
<input type="text" name="ch1" id="ch1" />

<label for="ch1">q2:</label>
<input type="text" name="ch2" id="ch2" />

<label for="ch1">q3:</label>
<input type="text" name="ch3" id="ch3" />
<div>

</body>
</html>

----------------------------


Merci d'avance pour les conseils

Pegos
Modifié par pegos (12 Aug 2009 - 09:40)

Skoua

11 Aug 2009 à 16:31

Hello,

Commence déjà par mettre ton code entre les balises [ code ] et [ /code ] dans ton post pour qu'on y voit plus clair.

Tu aurais un exemple en ligne ?

pegos

11 Aug 2009 à 16:39

Merci skoua.
Voici le code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<style>
#main input{border:1px solid gray;}
</style>

<script type="text/javascript">
$(function(){
$('#main input').click(function(){
$('#info').remove();
$(this).css('border','1px solid red');
var idch = this.id;
//console.log(idch);//id of the focussed field
$('#container').show();

$('<div id="info" />').load('quest.html',function(){
$(this).hide()
.appendTo('#container')
.show();
});

$('#container a').click(function(){
$('#main input[id='+idch+']').css('border','1px solid gray');
$('#main input[id='+idch+']').val($("input:radio[name='q']:checked").val());
$('#container').hide('fast');
$('#info').remove();

return false;
});
});
});
</script>
</head>

<body>

<div id="container" style="display:none">
<h1> Your choice </h1>
<a href="#">Send the value</a>
</div>

<!-- Below: input fields of the form to fill -->

<div id="main">
<label for="ch1">q1:</label>
<input type="text" name="ch1" id="ch1" />

<label for="ch1">q2:</label>
<input type="text" name="ch2" id="ch2" />

<label for="ch1">q3:</label>
<input type="text" name="ch3" id="ch3" />
<div>



</body>
</html>


<!-- fichier externe : quest.html -->

<div id="pane_quest">
<p width="500" height="400" align="left">
<input name="q" id="q_1" value="v1" type="radio"><label for="q_1">one</label><br>
<input name="q" id="q_2" value="v2" type="radio"><label for="q_2">two</label><br>
<input name="q" id="q_3" value="v3" type="radio"><label for="q_3">three</label><br>
<input name="q" id="q_4" value="v4" type="radio"><label for="q_4">four</label><br>
</p>
</div>

Le code n'est pas encore en ligne.

Ze Nenex

11 Aug 2009 à 18:26

Salut pegos

D'après ce que j'arrive à lire de ton code qui n'est pas du tout indenté (et c'est une misère pour mes neunœils), "#container a" reçoit une nouvelle fonction click à chaque fois qu'un input est clické. En cliquant 5 fois sur un input ou plusieurs input, t'auras donc 5 nouvelles fonctions qui vont être appelées dès lors que t'auras clické sur "#container a". La première fonction aura priorité sur les autres parce qu'elle exécute l'action, et pour peu que le premier input cliqué soit "ch1", ce sera toujours le même "idch" qui sera appliqué.

Solution: heu bha là y'a pleins de chose à dire et à faire qui n'ont rien à voir mais focalisons nous sur le problème hein. Mets la variable "idch" et la fonction click de "#container a" à l'extérieur du click des input. Tant que tu y es, vérifie bien en entrant dans le click de "#container a" qu'idch est bien renseigné pour exécuter l'action.

pegos

11 Aug 2009 à 18:47

Merci Ze Nenex.
Tu as pu t'apercevoir que je n'avais pas encore tout bien intégré du fonctionnement de jquery, mais grâce à tes conseils ça semble fonctionner. J'ai ressorti la 2eme fonction click de la 1ere ce qui est logique mais je ne le voyais pas et j'ai déclaré la variable idch en global.
Il me reste à trouver le moyen de rendre inactif $('#main input').click lorsque la liste est ouverte.
Peut-être un flag ou un truc comme ça ?

Merci
Pegos

Ze Nenex

11 Aug 2009 à 19:05

Si c'est pour ne pas avoir à recharger la liste je suis d'accord.

Et c'est simple, charge le contenu de ta liste en dehors de la fonction click des input. Lorsque la liste est chargée, mets la dans le conteneur #infos. De plus, veille à ce que ce conteneur soit déjà présent dans le document au chargement et caché. Quant à la fonction click des input, elle le montrera si celui-ci est caché (il doit donc exister, liste chargée ou pas). Tu devras juste faire un reset de la value des radio depuis la fonction click de "#container a".

pegos

11 Aug 2009 à 19:46

En fait j'ai simplifié pour la mise au point. Mon formulaire principal contient entre autres 20 champs différents (des radio, des combo et des selections multiples). Pour accélérer la saisie, j'offre un champs texte. Si l'opérateur connaît le code il le tappe directement, sinon, la popup le guide. Comme tous les champs ne sont pas remplis, j'ai opté pour cette méthode pour J'ai opté pour cette méthode pour ne pas avoir un document trop lourd. D'ailleurs, je pense appeler l'evenement sur une action comme un click sur une icone du genre "?".
Ce qui m'ennui c'est que l'utilisateur puisse faire plusieurs appels car je ne sais pas si la fonction .empty() libère les ressources.

Pegos

Sujet clos