Sélection dynamique javascript, Ajax ou jquery

**safraga** · 09/10/2015, 13h37

Bonjour,

Je n'ai que très peu de connaissances en Ajax et JQuery,
Je développe actuellement une application de facturation et je souhaite pouvoir ouvrir une popup dans laquelle je peux sélectionner un client puis les articles disponible dans ma base de données.

j'ai un bouton qui fera appel à la fonction "Live" pour la sélection des clients et le même pour ajouter l'article dans la facture.

Nom : Capture.PNG
Affichages : 730
Taille : 2,5 Ko

Nom : Capture.PNG
Affichages : 730
Taille : 2,5 Ko

L'idée est de remplir les champs marqués par $XXXX par les valeurs issus de la base de données sélectionné dans une popup qu'on appellerait avec le bouton situé à droite du bloc adresse.

Merci d'avance pour votre aide

**SpaceFrog** · 09/10/2015, 14h04

ce sera de ajax ...
en jquery ou pas

**safraga** · 09/10/2015, 14h07

Je pense que l'idéal serait JQuery, mais comme je ne connais pas bien, je compte un peu sur vos conseils pour mettre en place cette facturation.
Le but étant que je n'aie pas à rafraichir la page après chaque sélection...

**SpaceFrog** · 09/10/2015, 14h51

As tu déja installé la Jquery ?

jette un oiel à la doc jquery
http://api.jquery.com/jquery.ajax/
il y a aussi $.get() et $.post() ...

**safraga** · 09/10/2015, 15h04

Non, je ne pensais pas le faire, mais plutôt faire appel aux librairies Google de manière à éviter d'installer plusieurs librairie sur mon serveur.
Le problème est surtout que je connais que très peu ce langage et du coup je ne sais pas par ou commencer...

dans l'ordre je dois:

ouvrir une popup dans laquelle apparait la liste des clients
Sélectionner un client (Par bouton radio ou en cliquant dessus)
l'imprimer dans la table selon l'image que j'ai publié dans ce post

idem pour les articles plus tard dans l'édition de la facture mais avec la possibilité d'en sélectionner plusieurs donc avec cases à cocher.

**SpaceFrog** · 09/10/2015, 15h11

Installer jquery ne veut pas dire copier une tonne de fichiers sur ton serveur ...

Jette un oeil sur la FAQ Jquery http://javascript.developpez.com/faq/jquery/

tu peux faire appel à un CDN ou avoir une version sur ton serveur, vu la taille ce n'est pas un drame ...

**safraga** · 09/10/2015, 15h46

oui ben du coup c'est ce que je fais, j'appel la librairie sur le site que tu m'as donné...
je viens de faire plusieurs essais avec open window en javascript, le callback, mais rien y fait mes connaissances sont trop limitée.

Tu aurais peut-être une piste que je peux suivre?

Merci d'avance

**safraga** · 09/10/2015, 16h12

Après avoir lu plusieurs chapitres sur différents sites, il y a plusieurs méthodes (comme d'habitude...) mais voici les pistes que je compte suivre...

Utilisé un plugin du type "bPopup.js" pour ouvrir la popup avec lecture d'un php pour obtenir la liste de mes clients avec les boutons radio, puis avec la méthode POST et callback JQuery envoyer les données sélectionnées à ma div.

Tous cela me semble plausible, maintenant il faut que j'arrive à combiner le tout.

Merci de m'indiquer si je suis sur la bonne voie.

**SpaceFrog** · 09/10/2015, 16h12

pour comprendre le fonctionnement :

Commence par essayer ceci:

le code de l'ajax

Code :

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

1
2
3
4
5
6
7
8
$.ajax({
  method: "POST",  // methode post ou get 
  url: "mapage.php", // url de la page php de traitement qui retournera les données
  data: { param1: "truc", param2: "bidule" } // paramètres envoyés à la page de traitement
  success: function(reponse){
        console.log( reponse );
  }
})

le code de la page de traitement php ...

Code :

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

1
2
3
<?php
echo "ceci est la réponse du serveur";
?>

lance la page avec l'ajax, et regarde en console ... (F12)

**safraga** · 09/10/2015, 16h32

J'ai essayé le code et dans FireBug sous FF la console me sort une erreur pourtant le code me semble juste, une idée?

SyntaxError: missing } after property list
success: function(reponse){

**SpaceFrog** · 09/10/2015, 16h37

Non je t'ai donné un code foireux

il manquait une virgule

Code :

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

1
2
3
4
5
6
7
8
$.ajax({
  method: "POST",  // methode post ou get 
  url: "mapage.php", // url de la page php de traitement qui retournera les données
  data: { param1: "truc", param2: "bidule" }, // paramètres envoyés à la page de traitement
  success: function(reponse){
        console.log( reponse );
  }
})

**safraga** · 09/10/2015, 16h53

Ok, autant pour moi...

Je viens de faire le test et je comprends bien le script...

Les paramètres envoyés par AJAX sont récupéré avec $_POST['param1'];
et utilisés dans le code de mapage.php que j'ai modifié pour comprendre...

Code :

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

1
2
3
4
$nom = $_POST['param1'];
$city = $_POST['param2'];
 
echo "C'est un ".$nom." de ce ".$city;

Résultat: " C'est un truc de ce Bidule"

Juste la function(reponse){console.log( reponse ) sert juste à afficher dans une console ou le résultat peut-être réutilisé?
désolé si la question semble un peu stupide, mais comme je l'ai dit je n'y connait pas grand chose en AJAX et JQuery...

Alors merci pour ton aide et ta compréhension

**SpaceFrog** · 09/10/2015, 17h00

le success est la focntion callback qui est exécutée en cas du succès de l'ajax.

réponse est ce que te retourne la page de traitement

tout dépend de ce que tu veux que le serveur te retourne, et de ce que tu veux en faire lors de la réception de la reponse

le console.log n'est là que pour visualiser le retour ...

On peut donc avancer...
Dis mois ce que tu veux récupérer du serveur et comment le serveur peux te retourner ses elements (paramètre nécessaires ou pas)
et ensuite que souhaites tu faire de ses elements coté client

**safraga** · 09/10/2015, 17h10

Ok merci pour l'explication,

Dans un premier temps je dois charger de ma BDD le nom et le prénom des clients dans une popup.
Puis dans la popup, je sélectionne le client qui m'intéresse et lorsque je click sur ajouter ou simplement sur le client il vient s'afficher dans le code suivant:

Code html :

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
28
29
30
31
32
33
34
35
<div id="uneColRight">
                    	<form name="client" action="" method="post">
						<center>
						<table width="100%">
							<tbody>
								<tr>
									<td>
                                    	Facturé à:
									</td>
                                    <td class="right">
                                        <img src='../../images/icon_add.png' width='16' height='16' onclick="openWin()">
									</td>
								</tr>
                                <tr>
                                    <td colspan="2">
                                        <input class="adresse" name="nom" type="text" value="$nom $prenom" readonly="readonly" />
									</td>
                                   <!-- <td>
                                        <input name="prenom" type="text" value="Jessica" readonly="readonly" />
									</td> -->
								</tr>
                                <tr>
                                    <td colspan="2">
                                        <input class="adresse" name="adresse" type="text" value="$adresse" readonly="readonly"/>
									</td>
								</tr>
                                <tr>
                                    <td colspan="2">
                                        <input class="adresse" name="ville" type="text" value="$npa $ville" readonly="readonly"/>
									</td>
								</tr>
							</tbody>
						</table>
						</center>
					</div>

Pour ouvrir la popup je click sur cette image:

Code html :

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

1
2
3
<td class="right">
                                        <img src='../../images/icon_add.png' width='16' height='16' onclick="openWin()">
									</td>

Voilà c'est tout.

**ABCIWEB** · 09/10/2015, 19h51

Envoyé par safraga

Dans un premier temps je dois charger de ma BDD le nom et le prénom des clients dans une popup.

Ces clients sont choisis selon quels critères ? Si tu veux tous les afficher ils ne faut pas qu'ils soient trop nombreux.
Tu peux faire afficher quelques centaines de lignes mais au delà cela va ramer. Si plusieurs milliers, il va falloir envisager un système de pagination/recherche. Je dis ça au passage car il vaut mieux prévoir cela au départ si c'est nécessaire.

Ensuite va falloir te familiariser avec les sélecteurs jquery. Tu as la faq developpez.com et la doc officielle.

Il faut cibler l'image et lui attribuer un événement onclick qui va déclencher la requête ajax, genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(".right").find("img").on("click", function()
{
    $.ajax({
      method: "POST",  // methode post ou get 
      url: "mapage.php", // url de la page php de traitement qui retournera les données
      data: { param1: "truc", param2: "bidule" }, // paramètres envoyés à la page de traitement
      success: function(reponse){
        console.log( reponse );
      }
   })
})

(ce serait un peu plus performant et logique de définir si possible un id dédié dans la balise de l'image)

Ensuite dans "mapage.php" tu fais ta requête et tu crée
a/ soit un tableau html que tu affiche comme réponse (souvent le plus simple),
ou
b/ soit tu envoies simplement un tableau de résultat avec json_encode mais à réception il faudra créer le html avec le contenu du tableau.

A réception de la requête ajax, tu insère le contenu dans le DOM à l'endroit voulu.
Pour insérer le contenu dans un bloc hml ayant l'id "toto", si tu as choisi la méthode a/ il te suffira de faire :

Code :

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

1
2
success: function(reponse){
        $("#toto"].html( reponse );

et ensuite, si besoin tu crée des événements sur des éléments de ce contenu.

Bon là pour l'instant y'a pas de popup mais à mon avis au début il vaut mieux séparer les problèmes. En seconde partie tu pourras créer un popup puis insérer tes données à l'intérieur plutôt que directement dans le html de la page. Et si tu veux que ce popup soit déplaçable tu pourras utiliser Draggable

**safraga** · 10/10/2015, 16h05

J'ai parcouru les FAQ sur les sélecteurs et j'ai relativement bien compris le concept,

j'ai un peu modifié le code que tu m'as donné en prenant l'ID de l'image plutôt que de la chercher, suivant les pages j’imagine que ça doit bien ralentir l'application.

J'ai donc choisi l'option A comme j'ai env. 250 clients max ça devrait fonctionner sans trop ralentir le système.

Donc à ce stade je click sur l'image et j'obtiens un tableau avec nom et prénom de l'ensemble de mes clients.

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
28
29
30
31
32
33
34
<div id="uneColRight">
        <form name="client" action="" method="post">
        <center>
        <table width="100%">
            <tbody>
                <tr>
                    <td>
                        Facturé à:
                    </td>
                    <td class="right">
                        <img id="insClient" src='../../images/icon_add.png' width='32' height='32'>
                    </td>
                </tr>
            </tbody>
        </table>
        </center>
    </div>
    <div id="afficheListe">
 
 
    </div>
    <script>
	$("#insClient").click(function()
	{
		$.ajax({
		  method: "POST",  // methode post ou get 
		  url: "mapage.php", // url de la page php de traitement qui retournera les données
		  data: { param1: "truc", param2: "bidule" }, // paramètres envoyés à la page de traitement
		  success: function(reponse){
			$("#afficheListe").html( reponse );
		  }
	   })
	})
	</script>

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
$sel_query = mysql_query("SELECT nom, prenom FROM demo_membre")  or die (mysql_error());
 
echo "<table>";
	echo "<tbody>";
while($row = mysql_fetch_array($sel_query))
{
			echo "<tr>";
				echo "<td>";
					echo $row['nom'];
				echo "</td>";
				echo "<td>";
					echo $row['prenom'];
				echo "</td>";
			echo "</tr>";
}
	echo "</tbody>";
echo "</table>";

Petite question pratique; j'ai pour habitude de placer mes scripts dans le head de ma page HTML, mais avec JQuery ça ne marchait pas, j'ai du le mettre en fin du body, Ai-je fait une erreur ou est-ce juste?

La suite maintenant est cliquer sur l'un des client et de renvoyer ses données complètes dans ma table au bons endroits. "En sachant que ma requête est basée sur toutes les colonnes de la table, mais je n'affiche que le nom et le prénom."

Je pense que le principe est le même en prenant le sélecteur "tr" pour prendre la ligne de mon tableau qui m'intéresse et ensuite je renvois l'ID de monclient à une fonction ou nouvelle page php qui va me retourner la table du bloc adresse de ma facture. (Le JSON ne connait pas du tout, je code tout en php)

Mais voilà, comment est-ce que je récupère l'ID de la ligne en Jquery?

Merci pour votre super cours accéléré de JQuery c'est appréciable de ne pas juste obtenir des codes, mais d'apprendre à les créer. Vous êtes vraiment top!

**ABCIWEB** · 10/10/2015, 19h23

Envoyé par safraga

j'ai pour habitude de placer mes scripts dans le head de ma page HTML mais avec JQuery ça ne marchait pas, j'ai du le mettre en fin du body, Ai-je fait une erreur ou est-ce juste?

C'est conseillé de le mettre en fin du body dans la mesure du possible, ça accélère le chargement du html avant le chargement de javascript.
Cela aurait aussi fonctionné de le mettre en haut, mais il aurait fallu indiquer que le code ne doit s'exécuter qu'une fois le DOM chargé : puisque tu cherche un id image pour définir un comportement, il faut bien qu'il existe pour pouvoir le trouver

Avec jquery la syntaxe $(function(){//mon code jquey}) permet de remplir cette condition en créant une closure qui permet également de mieux isoler le code, donc c'est conseillé également même si tu mets ton code en bas de page.

Envoyé par safraga

La suite maintenant est cliquer sur l'un des client et de renvoyer ses données complètes dans ma table au bons endroits. "En sachant que ma requête est basée sur toutes les colonnes de la table, mais je n'affiche que le nom et le prénom."
Mais voilà, comment est-ce que je récupère l'ID de la ligne en Jquery ?

Si tu veux pouvoir le récupérer, il faut qu'il existe

Côté php il faut générer un code qui contienne les instructions suffisantes pour faire fonctionner ton javascript

Là tu as l'embarras du choix. Tu peux insérer un input de type hidden à l'intérieur d'une cellule TD, ou un attribut data dans ta balise TR ou encore affecter l'id du client comme id à la balise TR, ou te servir d'une classe.

Le plus propre est l'attribut data ou l'input de type hidden, cela permet de mieux faire une distinction entre css et attributs spécifiques qui servent à autre chose. Si tu as beaucoup de lignes l'attribut data est à privilégier car il prendra moins de place et moins de choses à écrire dans le DOM accélère l'affichage...

Côté php tu peux donc générer un code qui ressemble à cela :

Code :

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

<tr data-idclient=".$row['id'].">

A réception de ta requête ajax, il te suffira de définir des comportement onclick soit sur un bouton que tu auras écris dans le html pour chaque ligne, soit sur la ligne elle même. Au passage je défini une apparence "pointer" pour le curseur.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
success: function(reponse){
	$("#afficheListe").html( reponse );
 
        $("#afficheListe").find("tr").css("cursor","pointer").on("click", function()
        {
             var id_client = $(this).attr("data-idclient");
 
             //  ici tu peux définir une seconde requête ajax avec l'id client comme paramètre
             //...
             data: { id: id_client, param2: "bidule" },
             //...
         })
      //...

**safraga** · 12/10/2015, 13h31

Merci pour les explications,

J'ai pas mal lu la doc JQuerry et essayé de trouver la méthode pour faire ce que je veux, mais j'ai encore trop de lacunes pour que ça marche comme je le souhaite.

Donc le but étant de sélectionner la ligne du client choisi et de remplacer dans ma page le bloc client par nom, prénom, adresse, npa et ville

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
28
29
30
31
32
<div id="uneColRight">
        <form name="client" action="" method="post">
        <center>
        <table width="100%">
            <tbody>
                <tr>
                    <td>
                        Facturé à:
                    </td>
                    <td class="right">
                        <img id="insClient" src='../../images/icon_add.png' width='32' height='32'>
                    </td>
                </tr>
                <tr>
					<td colspan="2">
						<input class="adresse" name="nom" type="text" value="$nom $prenom" readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input class="adresse" name="adresse" type="text" value="$adresse" readonly="readonly"/>
					</td>
				</tr>
				<tr>
                    <td colspan="2">
                        <input class="adresse" name="ville" type="text" value="$npa $ville" readonly="readonly"/>
                    </td>
                </tr>
            </tbody>
        </table>
        </center>
    </div>

j'utilise donc les fonctions comme ceci

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
$("#insClient").click(function()
	{
		$.ajax({
		  method: "POST",  // methode post ou get 
		  url: "mapage.php", // url de la page php de traitement qui retournera les données
		  success: function(reponse){
			$("#afficheListe").html( reponse );
 
			$("#afficheListe").find("tr").css("cursor","pointer").on("click", function()
        {
             var id_client = $(this).attr("data-idclient");
			 var nom_client = $(this, "td:nth-child(2)").attr("data-nomclient");
			 alert(id_client + " " +nom_client )
 
         })
		  }
	   })
	})

Mais dans l’alerte il me donne un undefined pour la valeur du nom, je ne suis donc pas allé plus loin car je ne suis pas sûre que ce soit la bonne méthode.
Mon idée était de sélectionner tous les paramètres dont j'ai besoin lors du click sur la ligne pour ne devoir faire appel à une nouvelle page php.

Petite question; est-il possible de faire appel à une fonction ou une classe php à partir d'un script ajax ou jquery?

Je pensais utilisé ces paramètre avec la fonction .replaceWith() pour remplacer les valeur de mes champs de formulaire par les variables de la fonction JQuery.

**safraga** · 12/10/2015, 15h35

A force de persévérance et de recherches, j'ai trouvé comment obtenir mes valeurs et les afficher au bon endroit

Voici donc mon code pour afficher la liste des clients, sélectionner la ligne souhaitée et afficher le contenu de cette ligne dans le bloc adresse de ma facture.

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
28
29
30
31
32
33
34
35
36
<div id="uneColRight">
        <form name="client" action="" method="post">
        <center>
        <table width="100%">
            <tbody>
                <tr>
                    <td>
                        Facturé à:
                    </td>
                    <td class="right">
                        <img id="insClient" src='../../images/icon_add.png' width='32' height='32'>
                    </td>
                </tr>
                <tr>
					<td colspan="2">
						<input id="nom" class="adresse" name="nom" type="text" value="" readonly="readonly" />
					</td>
				</tr>
				<tr>
					<td colspan="2">
						<input id="adresse" class="adresse" name="adresse" type="text" value="" readonly="readonly"/>
					</td>
				</tr>
				<tr>
                    <td colspan="2">
                        <input id="ville" class="adresse" name="ville" type="text" value="" readonly="readonly"/>
                    </td>
                </tr>
            </tbody>
        </table>
        </center>
    </div>
    <div id="afficheListe">
 
 
    </div>

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
$("#insClient").click(function()
	{
		$.ajax
		(
			{
				method: "POST",  // methode post ou get 
				url: "mapage.php", // url de la page php de traitement qui retournera les données
				success: function(reponse)
				{
					$("#afficheListe").html( reponse );
			  		$("#afficheListe").find("tr").css("cursor","pointer").on("click", function()
					{
						var id_client = $(this).attr("data-idclient");
						var nom_client = $(this).children("#id_nomclient").text();
						var adresse_client = $(this).children("#id_adresseclient").text();
						var ville_client = $(this).children("#id_villeclient").text();
			 			$("#nom").replaceWith(nom_client);
						$("#adresse").replaceWith(adresse_client);
						$("#ville").replaceWith(ville_client);
         			}
					)
				}
			}
		)
	})

Ce que je n'arrive pas à trouver maintenant c'est la manière d'ouvrir une popup avec la liste des membre et d'insérer le contenu de la ligne sélectionnée dans la page facture tout en fermant la popup après la sélection.
J'ai bien essayé d'utiliser la div afficheliste en hidden pour l'ouvrir en popup, mais pas moyen...

Une idée de piste à suivre?

**SpaceFrog** · 12/10/2015, 15h41

Code :

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

.show()

Sélection dynamique javascript, Ajax ou jquery

JavaScript

Discussions similaires

Partager

Partager