Passage de paramètres multiples et dynamiques (onclick)

**kileak** · 08/12/2009, 15h03

Bonjour,

quelle est la méthode préconisée pour faire ce qui suit en JQuery ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
HTML :
 
<a href="#" id="1" value="5" onclick="maFction(3,'ABC',11)">lien 1</a><br/>
<a href="#" id="2" value="155" onclick="maFction(4,'def',12)">lien 2</a><br/>
<a href="#" id="2" value="44" onclick="maFction(5,'ghi',13)">lien 3</a><br/>
 
JS :
 
function maFction(p1,p2,p3)
{
     document.window.opener.document.getElementById('idcible1').value=p1 ;
     document.window.opener.document.getElementById('idcible2').value=p2 ;
     document.window.opener.document.getElementById('idcible3').value=p3 ;
}

En JQuery, le code HTML devient :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
HTML :
 
<a href="#" id="1" value="5" >lien 1</a><br/>
<a href="#" id="2" value="155"  >lien 2</a><br/>
<a href="#" id="2" value="44" >lien 3</a><br/>

...puisque l'appel à onclick est sorti de l'HTML.

Vous le voyez, il y a deux questions :

1- les liens "a" sont construits dynamiquement avec une boucle côté PHP. Chaque onclick appelle donc la même fonction JS mais avec des paramètres différents. Comment faire ça en JQuery ?

Je vois bien un $('a').click... mais pour passer les paramètres ?
Éventuellement les stocker dans les attributs comme alt, title, value... mais quid si on a 10 paramètres ? Sans compter qu'on n'a peut être pas envie de polluer ses attributs avec des données techniques !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
JQuery :
 
$(document).ready(function(){
   $("a").click(function(event){
     ..... ???? .... ;
     event.preventDefault();
   });
 });

EDIT :
Après moultes recherches je suis tombé sur ce débat intéressant :
http://stackoverflow.com/questions/1...tom-attributes
Il y a les "pour" et les "contre". La solution avec un namespace propre me semble être un bon compromis même si la page n'est plus valide à validator.w3.org .

2- Vous voyez que cette page est en fait une popup et doit mettre à jour l'appelant via un document.window.opener.document.getElementById...
Quel est l'équivalent en JQuery ?
EDIT : J'ai trouvé pour ce point :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
//cas d'une zone bloc (div...) :
window.opener.jQuery("#test").text(.......);
//cas d'une champ d'un fomulaire (input) :
window.opener.jQuery("#test2").attr('value',$(this).attr('id')) ;

N'hésitez pas à me demander des explications en cas de besoin

Merci
Cordialement

**danielhagnoul** · 08/12/2009, 19h10

Bonsoir

On peut utiliser le plugin metadata 2.1

Voir :http://plugins.jquery.com/project/metadata
La version 2.1 : http://plugins.jquery.com/files/jquery.metadata.2.1.zip

J'ai pris le cas d'un input dont il faut changer la valeur : $(this).val(xx)

Je ne sais pas si le document avant window.opener.document est nécessaire, car je n'ai pas testé cette partie.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery.metadata.js"></script>
    <script type="text/javascript">
        function maFction(p1,p2,p3){
            $("#idcible1", window.opener.document).val(p1);
        /*
            document.window.opener.document.getElementById('idcible1').value = p1;
            document.window.opener.document.getElementById('idcible2').value = p2;
            document.window.opener.document.getElementById('idcible3').value = p3;
        */
        }
        $(document).ready(function(){
            $("a[id^='aID']").click(function(){
                var obj = $(this).metadata({type:'attr',name:'data'});
 
                maFction(obj.a, obj.b, obj.c);
            })
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <a href="#" id="aID1" value="5" data="{a:3, b:'ABC', c:11}">lien 1</a><br/>
        <a href="#" id="aID2" value="155" data="{a:4, b:'def', c:12}">lien 2</a><br/>
        <a href="#" id="aID3" value="44" data="{a:5, b:'ghi', c:13}">lien 3</a><br/>
    </div>
</body>

**kileak** · 09/12/2009, 09h44

Génial ! merci !!!

Par la suite je suis tombé aussi sur les metadata mais je trouve l'intérêt limité.
Dans l'exemple sur le site JQuery, l'avantage est qu'on peut insérer ses data dans l'attr class. De cette manière, la page est XHTML valide. Intérêt limité non ?

Par contre je prend bonne note de :
1- la syntaxe : a[id^='aID']
2- la syntaxe : $("#idcible1", window.opener.document).val(p1);

Effectivement le document en amont ne sert à rien

Merci encore d'avoir pris le temps de ces tests

Bonne journée

Passage de paramètres multiples et dynamiques (onclick)

jQuery

Discussions similaires

Partager

Partager