Discussion :

[safraga]

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.



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]

ce sera de ajax ...
en jquery ou pas

[safraga]

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]

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]

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:

1. ouvrir une popup dans laquelle apparait la liste des clients
2. S�lectionner un client (Par bouton radio ou en cliquant dessus)
3. 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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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.

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]

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]

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]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

.show()