Discussion :

[Augustule]

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 php :

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

<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 javascript :

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
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

[Bovino]

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

[Augustule]

Bah justement c'est que je ne sais pas pas ou les faire passer !

[Bovino]

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

Code :

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

data: "id=foo&mode=bar"

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

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

[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 php :

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

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>

[Bovino]

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

Code php :

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

<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 :

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

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

[Augustule]

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 javascript :

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
 
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 php :

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

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>

[Bovino]

D'une part,

Code :

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

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 !

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

[Augustule]

Ah je ne savais pas que js ne lisait pas php

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

Code javascript :

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
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 ?

[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

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

[Augustule]

D'après firebug rien n'est envoyé.

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

Code javascript :

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

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

[Bovino]

Essaye en faisant

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
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.

[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 javascript :

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

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

Merci bcp en tout cas pour ton aide

[Bovino]

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 ?

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.