Sélection dynamique javascript, Ajax ou jquery

Version imprimable

09/10/2015, 13h37
safraga

1 pièce(s) jointe(s)

Sélection dynamique javascript, Ajax ou jquery

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.

Pièce jointe 189804

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
09/10/2015, 14h04
SpaceFrog

ce sera de ajax ...
en jquery ou pas
09/10/2015, 14h07
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...
09/10/2015, 14h51
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() ...
09/10/2015, 15h04
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.
09/10/2015, 15h11
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 ...
09/10/2015, 15h46
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
09/10/2015, 16h12
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.

pour comprendre le fonctionnement :

Commence par essayer ceci:

le code de l'ajax
Code:

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:

1 2 3 <?php echo "ceci est la réponse du serveur"; ?>
lance la page avec l'ajax, et regarde en console ... (F12)

09/10/2015, 16h32
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){

Non je t'ai donné un code foireux :aie: il manquait une virgule

Code:

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 );
  }
})

09/10/2015, 16h53
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:

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
09/10/2015, 17h00
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

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:

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:

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

Voilà c'est tout.

Citation:

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:

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:

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

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:

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:

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!

Citation:

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.

Citation:

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

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

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" }, //... }) //...

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:

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:

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.

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

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:

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:

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?

12/10/2015, 15h41
SpaceFrog

Code:

.show()
12/10/2015, 16h07
safraga

J'ai déjà essayé le .show, mais il ne m'affiche que la liste dans ma page sur la div et pas dans une popup...
tu pourrais juste développer un tout petit peu plus stp?
Merci d'avance
12/10/2015, 16h13
SpaceFrog

il te suffit de "styliser ton div" poru en faire un popin ... le popup c'est plus que hasbeen ...

il existe de plugins jquery de popins

ok avec l'aide d'un plug j'arrive à obtenir ma popup.

En testant un peu plus avant je m'apperçois que la première fois que je sélectionne une client dans ma popup il s'inscrit au bon endroit sans souci, mais dans le cas ou je me serais trompé de client et que je veux en sélectionner un autre, rien ne se passe, par contre l'alerte me donne bien la bonne sélection.

Vous pouvez me dire pourquoi, là je sèche....

Code:

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()
					{
						nom_client = $(this).children("#id_nomclient").text();
						adresse_client = $(this).children("#id_adresseclient").text();
						ville_client = $(this).children("#id_villeclient").text();
			 			alert(nom_client + "\n" + adresse_client + "\n" + ville_client);
						$("#nom").replaceWith($(nom_client));
						$("#adresse").replaceWith(adresse_client);
						$("#ville").replaceWith(ville_client);
         			}
					)
				}
			}
		)
	})

12/10/2015, 21h14
ABCIWEB

Salut,

Tu as eu le bon réflexe en plaçant ton alerte pour vérifier. Logiquement le problème se situe donc après.

Pas bon les "replaceWidht". Tu remplace tout le bloc html par du texte => ton bloc n'existe plus. Donc au second click on ne peut pas trouver d'id correspondant. D'ailleurs tu devrais t'en apercevoir dans l'inspecteur des éléments de ton navigateur - il faut utiliser intensivement cet outil en développement quand tu modifie le dom avec javascript pour visualiser ce que tu fais - tu nique tous les input de ton formulaire :mrgreen:
Alors qu'il vaudrait mieux simplement leur attribuer une valeur

Code:

$("#nom").val(nom_client);

Salut,

Oui effectivement, je me suis rendu compte de ça hier soir et j'ai modifié le code avec le .val...
Code:

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 $("#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").css("visibility", "visible"); $("#afficheListe").html( reponse ); $("#afficheListe").find("tr").css("cursor","pointer").on("click", function() { nom_client = $(this).children("#id_nomclient").text(); adresse_client = $(this).children("#id_adresseclient").text(); ville_client = $(this).children("#id_villeclient").text(); $("#nom").val(nom_client); $("#adresse").val(adresse_client); $("#ville").val(ville_client); $("#afficheListe").css("visibility", "hidden"); } ) } } ) })
Là ça fonctionne comme je le souhaite, je dois encore tester l'envoi du formulaire pour voir si il garde toutes les données.
Reste maintenant l'ajout des articles dans la facture, mais le principe devrait être le même, j'ai juste besoins de voir comment récupérer dans la popup plusieurs articles avec des cases à cochées et ajouter le nombre de lignes de formulaires en fonction.

Merci encore pour ton aide

Salut,

Je viens de faire la partie finale de cette facture et il reste un bug que je n'arrive pas à comprendre pour l'heure...
Voici le code html de mes lignes de facture à remplir

Code:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<table width="100%">
						<tbody>
							<tr>
								<th width="10px">
                                	<img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
								</th>
                                <th width="250px">
                                	Désignation
								</th>
                                <th width="30">
                                	Unité
								</th>
                                <th width="30">
                                	Quantité
              					</th>
                                <th width="30">
                                	Prix
              					</th>
                                <th width="30">
                                	TVA
              					</th>
                                <th width="30">
                                	Total
              					</th>
                            </tr>
                            <tr id="facRow">
								<td width="10px">
                                	<img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
								</td>
                                <td width="250px">
                                	<input id="designation" type="text" class="facBig" />
								</td>
                                <td width="30">
                                	<input id="unite" type="text" class="facSmall"/>
								</td>
                                <td width="30">
                                	<input id="quantite" type="text" class="facSmall" />
								</td>
                                <td width="30">
                                	<input id="prixUnite" type="text" class="facSmall" />
								</td>
                                <td width="30">
                                	<input id="taxe" type="text" class="facSmall" />
								</td>
                                <td width="30">
                                	<input id="totLine" type="text" class="facSmall" />
								</td>
                            </tr>
                            <tr id="facRow">
								<td width="10px">
                                	<img id="insArticle" src='../../images/icon_add.png' width='16' height='16'>
								</td>
                                <td width="250px">
                                	<input id="designation" type="text" class="facBig" />
								</td>
                                <td width="30">
                                	<input id="unite" type="text" class="facSmall"/>
								</td>
                                <td width="30">
                                	<input id="quantite" type="text" class="facSmall" />
								</td>
                                <td width="30">
                                	<input id="prixUnite" type="text" class="facSmall" />
								</td>
                                <td width="30">
                                	<input id="taxe" type="text" class="facSmall" />
								</td>
                                <td width="30">
                                	<input id="totLine" type="text" class="facSmall" />
								</td>
                            </tr>
                            <tr>
								<td colspan="6" class="right">
                                	Total facturé
								</td>
                                <td>
                                	<input id="tot" type="text" class="facSmall" readonly="readonly" value="10'000.00"/>
								</td>
                            </tr>
                        </tbody>
                    </table>

J'ai mis deux lignes de base ensuite le comptable pourra ajouter des lignes au besoin.
Avec l’icône à gauche on peut récupérer un article dans une popup comme pour le client précédemment.

A ce stade, je souhaite calculer le total de chaque ligne en tenant compte du nombre de pièces et du prix unitaire et cela pour chaque lignes.

Le code suivant fait bien une partie du travail, mais sur toutes les lignes en même temps. du coup je comprends plus...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//=================================================
	//	Calcule et affichage du total de la facture.
	//=================================================
 
	$("tr[id='facRow']").each(function()
	{
		$("input[id='quantite']").focusout(function()
		{
			var quantite = $(this).val();
			alert(quantite);
 
			$("input[id='prixUnite']").focusout(function(e)
			{
				var prixUnite = $(this).val();
				var totLine = quantite * prixUnite;
				$("input[id='totLine']").val(totLine + ".00");
			});
		});
	});

Merci d'avance pour votre aide...

13/10/2015, 17h33
ABCIWEB

Salut,

Un id doit être unique dans une page...
13/10/2015, 18h59
safraga
Salut,
ça je comprends bien, mais peux-tu m’aiguillé pour programmer ce qui suit (ça fait 12 heures que je tourne en rond sur ce problème)

Ligne de facture 1
Designation => Unité => Quantité => Prix HT => TVA => Total ligne

Ligne facture 2
idem

Ligne facture 3
idem mais ajouter plus tard par JQuery.

Total facturé
TotalLigne1 + TotalLigne2

J'ai essayé de mettre des N° après mes ID puis dans le code :

Code:

var ligneNum = 0;

puis dans la boucle
Code:

1 2 ligneNum ++; var quantite = $("#quantite_"+ligneNum).val();
mais apparemment ça ne fonctionne pas.

Par cette réponse je ne demande pas la solution toute cuite, mais juste une base de départ pour continuer à apprendre ce JQuery.

Merci d'avance et bonne soirée
13/10/2015, 23h13
ABCIWEB

C'est un problème de html, pas de jquery.

Pour des blocs qui se répètent dans une page tu peux utiliser des classes, des attributs data, des input etc mais pas des id. D'ailleurs tu as des input alors pourquoi ne pas se servir des attributs "name" (que bizarrement tu n'utilise pas) pour les cibler plutôt qu'un id. On peut très bien cibler un bloc sans qu'il ait d'id, faut pas en mettre partout !
14/10/2015, 18h22
safraga
Salut,

Après des heures de recherche et de lecture intensive, j'ai trouvé une piste à suivre, malheureusement c'est en JQuery 1.5
du coup dès le départ ça plante sous 1.11.3 que j'utilise pour le reste...

Voici donc le début que je voudrais convertir de 1.5 à 1.11
Code:

1 2 3 4 5 6 $("#fac_table").live({ blur: function() { ... ... ... } });
J'ai bien essayé de faire ceci, mais sans succès et je ne comprends pas pourquoi... Selon la doc le .live est remplacé par .on()
Code:

1 2 3 4 5 $("#fac_table").on("blur", function() { ... ... ... });
Voilà si tu pouvais déjà me donner un conseil pour ça, je pense pouvoir résoudre la suite...
Merci d'avance
15/10/2015, 09h58
safraga
Le problème est réglé, mon application fonctionne, merci pour votre aide...
Code:

1 2 3 4 5 $(document).on("blur", "#fac_table", function () { ... ... ... });
Pour le dernier post, il s'agissait de mettre les différents paramètres dans l'ordre...