Passer paramètres à requête Ajax avec jQuery

Version imprimable

Bonjour,

Je cherche à envoyer une requete ajax avec jquey en cliquant sur un lien mais mais malgré mes efforts je n'arrive pas à faire ce que je souhaite

J'ai donc le lien suivant :

Code:

<a href="#" id="cand_<?php echo $candidat->id ?>" class="candidatselect button">Ajouter</a>

Je souhaite y faire passer les paramètres suivant : mode et id, pour qu'ajax les récupére pour lancer une requete sql
Mon code jquery
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 jQuery( ".candidatselect" ).click(function(){ jQuery.ajax({ type: "GET", url: "<?php echo PAGE_CLIENT_AJAX_SELECT; ?>", data: "id=" + id + "&mode=" + mode, success: function(res){ if(res == "in") { jQuery('#cand_'+id).addClass('red'); jQuery('a#cand_'+id).text('Supprimer'); } else { jQuery('#cand_'+id).removeClass('red'); jQuery('a#cand_'+id).text('Ajouter'); } } }); return false; }
Quand je click, il ne se passe rien :cry:

15/10/2013, 11h58
Bovino

Tes variables id et mode, elles sortent d'où ?
15/10/2013, 12h05
Augustule

Bah justement c'est que je ne sais pas pas ou les faire passer !
15/10/2013, 13h49
Bovino

Je ne comprends pas trop là... :koi:
C'est à moi de déterminer ce que doivent contenir ces variables ?
Dans ce cas, je te propose

Code:

data: "id=foo&mode=bar"

mais il y a peu de chances pour que ça correspondent à tes besoins ! :aie:
D'où la question :

Citation:

Tes variables id et mode, elles sortent d'où ?

:mrgreen:
15/10/2013, 14h06
Augustule
Les variables proviennent de PHP.

Pour faire simple, si je voulais passer part l'url pour lancer ma requete sans passer par ajax, j'aurais fait :
Code:

1 2 <a href="register.php?mode=supprimer&id=<?php echo $candidat->id ?>" id="cand_<?php echo $candidat->id ?>" class="button red">Retirer de ma liste</a>
15/10/2013, 14h13
Bovino

OK.
Donc selon moi, la solution la plus simple serait de passer par les attributs data-*, par exemple :

Code:

<a href="#" data-id="<?php echo $candidat->id ?>" data-mode="<?php echo $candidat->mode ?>" class="candidatselect button">Ajouter</a>

puis dans ta requête :

Code:

data: "id=" + $(this).data('id') + "&mode=" + $(this).data('mode'),

En suivant tes conseils, j'ai modifié mon code mais la requete ne se lance pas.
Je n'arrive pas à appeler ma fonction via mon lien.

D’où vient l'erreur ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
jQuery( ".candidatselect" ).click(function(){
 
	 jQuery.ajax({
            type: "GET",
            url: "<?php echo PAGE_CLIENT_AJAX_SELECT; ?>",
			data: "id=" + jQuery(this).data('id') + "&mode=" + jQuery(this).data('mode'),
            success: function(res){
 
				if(res == "in") {
					jQuery('#cand_'+id).addClass('red');
					jQuery('a#cand_'+id).text('Supprimer');
				} else {
					jQuery('#cand_'+id).removeClass('red');
					jQuery('a#cand_'+id).text('Ajouter');
 
				}
     		}
    });
   return false;
});

J'essaie de déclancher ajax en appelant la class candidatselect mais ça ne marche pas :

Code:

1
2
 
<a href="#" data-id="<?php echo $candidat->id ?>"  data-mode="supp" id="cand_<?php echo $candidat->id ?>" class="candidatselect button red">Retirer de ma liste</a>

15/10/2013, 14h35
Bovino

D'une part,

Code:

url: "<?php echo PAGE_CLIENT_AJAX_SELECT; ?>",

cette ligne est présente telle quelle dans ton code ? Parce que JavaScript (et donc jQuery) ne sait pas interpréter le PHP ! :aie:

D'autre part, dans ta fonction de rappel success, tu indiques une variable id qui n'existe toujours pas ! :roll:

Ah je ne savais pas que js ne lisait pas php :oops:

J'ai donc mis l'url de ma page php en dur mais ça ne déclenche toujours rien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
jQuery( ".candidatselect" ).click(function(){
	jQuery.ajax({
		type: "GET",
		url: "clients/ajax-selection.php",
		data: "id=" + jQuery(this).data('id') + "&mode=" + jQuery(this).data('mode'),
		success: function(res){
			if(res == "in") {
				jQuery('#cand_'+id).addClass('red');
				jQuery('#cand_'+id).text('Supprimer');
			} else {
				jQuery('#cand_'+id).removeClass('red');
				jQuery('#cand_'+id).text('Ajouter');
			}
     		}
	});
	return false;
});

Est ce que l'appel via la class css candidatselect est correct ?

15/10/2013, 14h55
Bovino

La première des choses à faire serait de regarder dans la console JavaScript (F12 sur la plupart des navigateurs, Firebug ou CTRL+MAJ+Q dans Firefox) si la requête est bien envoyée, quel résultat est reçu et si ces résultats sont bien pris en compte.

Dans ton cas, il ne semble pas y avoir de souci quant à l'envoi de la requête, mais au niveau du traitement du résultat, tu as toujours

Citation:

D'autre part, dans ta fonction de rappel success, tu indiques une variable id qui n'existe toujours pas !
15/10/2013, 15h06
Augustule
D'après firebug rien n'est envoyé.

Pour ma variable id, c'est correct si je mets ?
Code:

1 2 jQuery('#cand_'+ jQuery(this).data('id')).addClass('red');

Essaye en faisant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery( ".candidatselect" ).click(function(){
	console.log('Entré !');
	var $this = jQuery(this), $id = $this.data('id');
	console.log($id, $this.data('mode'));
	jQuery.ajax({
		type: "GET",
		url: "clients/ajax-selection.php",
		data: "id=" + $id + "&mode=" + $this.data('mode'),
		success: function(res){
			console.log('Callback !');
			if(res == "in") {
				jQuery('#cand_'+$id).addClass('red');
				jQuery('#cand_'+$id).text('Supprimer');
			} else {
				jQuery('#cand_'+$id).removeClass('red');
				jQuery('#cand_'+$id).text('Ajouter');
			}
     		}
	});
	return false;
});

Et dis-nous ce qui s'affiche dans la console.

15/10/2013, 15h38
Augustule

Ça fonctionne !
Par contre ça ne fonctionne que si je mets le code avant </body> mais ça ne fonctionne pas si je le place avant le </head>, qui contient déjà pas mal de js.

Au passage, si je mets une constant php dans url, ça semble fonctionner aussi

Code:

url: "<?php echo PAGE_CLIENT_AJAX_SELECT; ?>",

Merci bcp en tout cas pour ton aide :ccool:
15/10/2013, 16h06
Bovino

Citation:

Par contre ça ne fonctionne que si je mets le code avant </body> mais ça ne fonctionne pas si je le place avant le </head>, qui contient déjà pas mal de js.

Pour pouvoir placer des gestionnaires d'événements sur des éléments, le prérequis est que ces éléments existent dans le DOM quand tu déclares le gestionnaire. Voir Qu'est-ce que la notion de Ready ?

Citation:

Au passage, si je mets une constant php dans url, ça semble fonctionner aussi

JavaScript (tout comme HTML) est interprété par le navigateur et le navigateur ne sait pas interpréter le PHP qui est un langage serveur. En revanche, rien ne t'empêche de générer côté serveur (donc en PHP) le code JavaScript qui sera interprété par le navigateur, tout comme tu le fais pour le HTML.