jquery et plusieurs events

jquery et plusieurs events - HTML/CSS - Programmation

Marsh Posté le 28-09-2009 à 10:27:35    

bonjour
 
Depuis quelques jours je commence à utiliser le framework jquery.
ce matin je me heurte à un problème. Je ne sais pas comment lancer une fonction sur plusieurs événements.
concrètement dans mon formulaire je voudrais lancer une fonction sur un click dans un select ou un keyup sur un input text.
 
pour résoudre mon problème je suis passé par une fonction et j appelle cette fonction sur click dans mon select et onKeyup dans ma zone input(voir deuxième code ci_dessous).
 
J'aimerais savoir si il est possible d'éviter de faire ces appels de fonction dans le code html avec jquery?
 
code nok. actuellement mon code ne se déclenche que sur l'événement keyup alors que je voudrais keyup sur l'id id_coclico et click sur l'id campagne.
 

Code :
  1. $(document).ready(function(){
  2.   var id = $('#id_coclico,#campagne');
  3.   $.each(id, function() {
  4.    $(this).keyup(function(event){
  5.         coclico = $("#id_coclico" ).val();
  6.         campagne = $("#campagne" ).val();
  7.         $.post('ajax/ajax_test_coclico.php',{
  8.         coclico:coclico,campagne:campagne},
  9.         function(data){
  10.          //si la requête s'est bien déroulée
  11.          if (data=='1'){
  12.           $("#test_nok" ).hide();
  13.           $('#test_ok').fadeIn("slow", 0, function(){
  14.            $("#test_ok" ).show();
  15.           });
  16.          }
  17.          else
  18.          {
  19.           $("#test_ok" ).hide();
  20.           $('#test_nok').fadeIn("slow", 0, function(){
  21.            $("#test_nok" ).show();
  22.           });
  23.          }
  25.         });
  26.        });
  27.  });
  28. });


 
code ok, mais pas vraiment ce que je veux puisque je dois mettre des appels de fonction dans mon formulaire:

Code :
  1. function test_client(){
  2.   var id = $('#id_coclico,#campagne');
  3.   $.each(id, function() {
  5.         coclico = $("#id_coclico" ).val();
  6.         campagne = $("#campagne" ).val();
  7.         $.post('ajax/ajax_test_coclico.php',{
  8.         coclico:coclico,campagne:campagne},
  9.         function(data){
  10.          //si la requête s'est bien déroulée
  11.          if (data=='1'){
  12.           $("#test_nok" ).hide();
  13.           $('#test_ok').fadeIn("slow", 0, function(){
  14.            $("#test_ok" ).show();
  15.           });
  16.          }
  17.          else
  18.          {
  19.           $("#test_ok" ).hide();
  20.           $('#test_nok').fadeIn("slow", 0, function(){
  21.            $("#test_nok" ).show();
  22.           });
  23.          }
  25.         });
  27.  });
  28. }


 
merci de votre aide


Message édité par d@kn1ko le 28-09-2009 à 10:47:09
Reply

Marsh Posté le 28-09-2009 à 10:27:35   

Reply

Marsh Posté le 28-09-2009 à 10:34:03    

j'ai rien compris a ce que tu veux...
 
dans ton second code ya pas d'events, c'est normal?  
 
pourquoi tu mets pas qqchose du genre

Code :
  1. $("ton_select" ).click(nom_de_ta_fonction);
  2. $("ton_input_text" ).keyup(nom_de_ta_fonction);


 
??
 

Message cité 1 fois
Reply

Marsh Posté le 28-09-2009 à 10:45:27    

pataluc a écrit :

j'ai rien compris a ce que tu veux...
 
dans ton second code ya pas d'events, c'est normal?  
 
pourquoi tu mets pas qqchose du genre

Code :
  1. $("ton_select" ).click(nom_de_ta_fonction);
  2. $("ton_input_text" ).keyup(nom_de_ta_fonction);


 
??
 


 
le second code je l'appel avec onClick="test_client()" et onKeyup="test_client()" dans mon formulaire et je voudrais éviter cela au maximum puisque jquery permet de s en passer.
 
tu as  compris ce que je voulais  :D.
je vais essayer ta solution.

Reply

Marsh Posté le 28-09-2009 à 11:14:45    

ok ca fonctionne bien plus besoin d'appel de fonction dans mon formulaire.
 
par contre il n'existe pas une fonction en jquery qui permet de cumuler des événements?
 
merci de ton aide  :hello:  
 

Code :
  1. function test_client(){
  2.   var id = $('#id_coclico,#campagne');
  3.   $.each(id, function(){
  5.         coclico = $("#id_coclico" ).val();
  6.         campagne = $("#campagne" ).val();
  7.         $.post('ajax/ajax_test_coclico.php',{
  8.         coclico:coclico,campagne:campagne},
  9.         function(data){
  10.          //si la requête s'est bien déroulée
  11.          if (data=='1'){
  13.           $('#test_ok').fadeIn("slow", 0, function(){
  14.            $("#test_ok" ).show();
  15.           });
  16.           $("#test_nok" ).hide();
  17.          }
  18.          else
  19.          {
  20.           $("#test_ok" ).hide();
  21.           $('#test_nok').fadeIn("slow", 0, function(){
  22.            $("#test_nok" ).show();
  23.           });
  24.          }
  26.         });
  28.  });
  29. }
  31. $(function(){
  33. $("#id_coclico" ).keyup(function(event){test_client();});
  34. $("#campagne" ).click(function(event){test_client();}); 
  35.    
  36. });


Message édité par d@kn1ko le 28-09-2009 à 11:16:59
Reply

Marsh Posté le 28-09-2009 à 11:48:40    

qu'est ce que tu entends par "cumuler les events"?
 
sinon normalement ca, ca marche pareil que ce que tu as mis, mais c'est plus lisible:

Code :
  1. $("#id_coclico" ).keyup(test_client);
  2. $("#campagne" ).click(test_client);


 
 
Edit: et sinon, tu as mis "$(function(){", tu voulais dire "$(document).ready(function(){" je suppose?

Message cité 1 fois
Message édité par pataluc le 28-09-2009 à 11:49:59
Reply

Marsh Posté le 28-09-2009 à 13:34:16    

pataluc a écrit :

qu'est ce que tu entends par "cumuler les events"?
 
sinon normalement ca, ca marche pareil que ce que tu as mis, mais c'est plus lisible:

Code :
  1. $("#id_coclico" ).keyup(test_client);
  2. $("#campagne" ).click(test_client);


 
 
Edit: et sinon, tu as mis "$(function(){", tu voulais dire "$(document).ready(function(){" je suppose?


 
c est a dire déclencher ma fonction sur click ou keyup pour un seul id sans devoir rappeler plusieurs fois la fonction
 
un truc du genre $("#id_colico" ).keyup.click(test_client());


Message édité par d@kn1ko le 28-09-2009 à 13:35:14
Reply

Marsh Posté le 28-09-2009 à 13:45:02    

ah ouais ben ca doit marcher normalement... t'as essayé?

Message cité 1 fois
Reply

Marsh Posté le 28-09-2009 à 13:48:09    

pataluc a écrit :

ah ouais ben ca doit marcher normalement... t'as essayé?


 
non v tester
 
edit non ca ne fonctionne pas


Message édité par d@kn1ko le 28-09-2009 à 13:49:47
Reply

Marsh Posté le 28-09-2009 à 13:52:47    

ouais ca vient du fait qu'avec un #id ca ne remonte que le premier élément... ca serait un .class ca marcherait.

 

http://docs.jquery.com/Selectors/id#id "Matches a single element with the given id attribute."

Message cité 1 fois
Message édité par pataluc le 28-09-2009 à 13:53:21
Reply

Marsh Posté le 28-09-2009 à 14:10:00    

pataluc a écrit :

ouais ca vient du fait qu'avec un #id ca ne remonte que le premier élément... ca serait un .class ca marcherait.
 
http://docs.jquery.com/Selectors/id#id "Matches a single element with the given id attribute."


 
oui ca me semble normal puisqu'un id doit être unique dans le document.
 
mais moi je cherche a déclencher ma fonction sur click ou keyup sur un seul id

Reply

Marsh Posté le 28-09-2009 à 14:10:00   

Reply

Marsh Posté le 28-09-2009 à 14:27:43    

tu veux dire? mettre le .click à la suite du .keyup comme tu as fait: .keyup.click(...) ?

Message cité 1 fois
Reply

Marsh Posté le 28-09-2009 à 14:55:36    

pataluc a écrit :

tu veux dire? mettre le .click à la suite du .keyup comme tu as fait: .keyup.click(...) ?


 
non c etait juste pour illustrer.
 
mais c'est pas grave j arrive a m en sortir avec les appels de fonction  :)
 
edit maintenant j ai un autre probléme ca ne fonctionne pas sur ie6 ...
reedit resolut avec l ajout de var
 

Code :
  1. function test_client(){
  2.   var id = $('#id_coclico,#campagne');
  3.   $.each(id, function(){
  5.         var coclico = $("#id_coclico" ).val();
  6.         var campagne = $("#campagne" ).val();
  7.         $.post('ajax/ajax_test_coclico.php',{
  8.         coclico:coclico,campagne:campagne},
  9.         function(data){
  10.          //si la requête s'est bien déroulée
  11.          if (data=='1'){
  13.           $('#test_ok').fadeIn("slow", 0, function(){
  14.            $("#test_ok" ).show();
  15.           });
  16.           $("#test_nok" ).hide();
  17.          }
  18.          else
  19.          {
  20.           $("#test_ok" ).hide();
  21.           $('#test_nok').fadeIn("slow", 0, function(){
  22.            $("#test_nok" ).show();
  23.           });
  24.          }
  26.         });
  28.  });
  29. }
  31. $(function(){
  33. $("#id_coclico" ).keyup(function(event){test_client();});
  34. $("#campagne" ).click(function(event){test_client();}); 
  35.    
  36. });


Message édité par d@kn1ko le 29-09-2009 à 09:21:11
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed