Contenu d'une div différent en fonction d'un menu déroulant

Version imprimable

11/12/2012, 10h16
mickeymic

Contenu d'une div différent en fonction d'un menu déroulant

Bonjour,

Je me permets de vous écrire pour solliciter votre aide.
Je vous explique :

j'ai un tableau html.
Sur chaque ligne de mon tableau j'ai des cellules et 2 menus déroulants.
J'aimerai afficher dans une div (situé en haut du tableau) un contenu différent en fonction du menu déroulant ouvert.
Sachant que le contenu est identique lorsqu'on ouvre les 2 menus déroulants de la même ligne.

Voilà, j'ai fait des tests. On se rapproche de ce que j'aimerai obtenir.
Mon souci maintenant est d'afficher dans la div "resultat" un contenu différent par ligne, et que je cherche via mes bases de données. Je pense que le plus efficace serait peut être de faire ça en ajax (et malheureusement je ne le maîtrise pas).
Sachant que dans choix[2], le 2 est l'id qui sert dans ma requête à récupérer les données.

Voici à quoi ressemble mon tableau

http://jsbin.com/ihicuq/4/

J'espère que c'est faisable.

Merci d'avance pour votre aide

Bonne journée

:roll:

Bonjour,

Oui c'est tout à fait faisable. Le code ressemblerait à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
jQuery(document).ready(function($){
	$('#tab select').change(function(e){
		//console.log('down');
 
      var id_select = $(this).closest('tr').index()+1;
      var selected = $(this).val();
      $.ajax({
        url:"ton url de requete ajax",
        data:{
          id:id_select,
          selected: selected
        }
        success: function(response){
          $('#resultat').html( "Sélection: "+response);	},
        error: function(xhr, message){
           console.error(message);
           $('#resultat').html("Erreur");
        }
      });
 
});

Il te faut coder la partie serveur qui récupère les paramètres de la requête (dans l'URL pour les requêtes GET) et renvoie les infos que tu souhaites en allant piocher dans ta BDD. La réponse serveur passera dans le callback success si tout va bien, dans la variable response :ccool:

11/12/2012, 10h38
gui80

Bonjour,

SylvainPV est tellement sympa qu'il fait presque tout le travail à ta place :D

J'aurai juste dit de placer une fonction F1 sur l'événement onchange de chaque liste déroulante.
Et de faire un appel AJAX dans cette fonction F1 avec la fonction ajax de jquery.

Comme çà, tu aurais un peu cherché dans la doc jquery et chercher à te débrouiller d'après ces petits conseils.

C'est bien de te pêcher un poisson mais c'est mieux de t'apprendre à pêcher ;)

Bonjour,

merci pour votre aide :ccool:

Malheureusement j'ai bien du mal à apprendre à pêcher :cry:

Désolé, et malgré mes recherches, je bloque :oops:

Je pense que je ne parviens pas à faire le lien entre mon fichier qui interroge ma base et le script.

Mon fichier ressemble à ça :

Code:

1
2
3
4
5
6
7
8
9
10
<?php
 
// ma requete mysql
 
....
 
$swit= mysql_fetch_assoc($st);
$response = $swit['nb'];
 
?>

Est ce que je dois présenter le fichier sous forme de fonction ?

et le script de ce type :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function($){
	$('#tab select').change(function(e){
		//console.log('down');
 
      var id_select = $(this).closest('tr').index()+1;
      var selected = $(this).val();
      $.ajax({
        url:"mon_lien.php?id=17&tab=194",
        data:{
          id:id_select,
          selected: selected
        }
        success: function(response){
          $('#resultat').html( "Sélection: "+response);	},
        error: function(xhr, message){
           console.error(message);
           $('#resultat').html("Erreur");
        }
      });
 
});

Merci d'avance pour votre aide

:roll:

12/12/2012, 09h32
Bovino

Ton fichier PHP n'affiche rien à priori, donc le script JavaScript ne recevra aucune réponse... Fais au moins un echo de ce que tu souhaites renvoyer comme réponse.
12/12/2012, 09h41
mickeymic
Si je visualise mon fichier php directement, j'ai bien une réponse qui s'affiche :
Code:

1 2 3 4 5 6 7 8 9 10 11 <?php // ma requete mysql .... $swit= mysql_fetch_assoc($st); $response = $swit['nb']; echo $response; ?>
mais rien sur le fichier d'origine avec le script javascript :calim2:
12/12/2012, 13h59
SylvainPV

Essaie un echo "test"; dans ton script PHP pour voir si c'est l'appel AJAX ou la partie serveur qui ne fonctionne pas.

Si c'est la partie Javascript, vérifie que ton sélecteur est correct pour ton HTML: $('#tab select')
Ensuite, peux-tu utiliser les Developer Tools de Chrome (F12) ou Firebug sur FF pour mettre des breakpoints dans ton Javascript et regarder ce qui se passe ? Si tu ne connais pas, ce sont des outils de debug très complets qui te seront d'une grande utillité

ok j'ai trouvé, merci pour ton aide, le problème venait bien du javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 jQuery(document).ready(function($){ $('#tab select').change(function(e){ //console.log('down'); var id_select = $(this).closest('tr').index()+1; var selected = $(this).val(); $.ajax({ url:"mon_lien.php?id=17&tab=194", data:{ id:id_select, selected: selected }, success: function(response){ $('#resultat').html( "Sélection: "+response); }, error: function(xhr, message){ console.error(message); $('#resultat').html("Erreur"); } }); }); });
Est-il possible d'enclencher l'affichage de la div lors de l'ouverture du menu déroulant ? Actuellement elle s'affiche à la sélection d'un élément du menu déroulant...

:roll:

13/12/2012, 13h22
gui80

Bonjour mickeymic,

si je te dis "trigger", essaie de voir ce que cela fait et si son utilisation pourrait t'aider.

Tu y es presque :)
13/12/2012, 19h30
SylvainPV

Citation:

Est-il possible d'enclencher l'affichage de la div lors de l'ouverture du menu déroulant ? Actuellement elle s'affiche à la sélection d'un élément du menu déroulant...

Mais le contenu de ta div dépend de l'élément sélectionné non ? Comment veux-tu prédire le choix ?
14/12/2012, 00h55
mickeymic

Citation:

Mais le contenu de ta div dépend de l'élément sélectionné non ? Comment veux-tu prédire le choix ?

Je dirai pas ça...
Le contenu de ma div dépend du menu déroulant qu'on ouvre.
J'utilise l'id du select pour le récupérer.
L'élément sélectionné dans le menu déroulant n'est pas utile pour afficher le contenu.

Du coup, je me dis qu'en ouvrant seulement le menu déroulant, il doit y avoir moyen d'afficher le contenu de la div... (c'est peut être impossible)

Citation:

si je te dis "trigger", essaie de voir ce que cela fait et si son utilisation pourrait t'aider.

j'ai essayé d'ajouter .trigger("click") mais ça ne change rien...

:roll:
17/12/2012, 00h03
gui80

Bonsoir,

quelle est la ligne exacte que tu as écrit concernant le trigger ?
quelle action as-tu liée sur l'événement "onclick" de l'élément ?

sinon, tu comprends bien ce que ce trigger est censé faire ou pas ?