Discussion :

[Swifa]

Salut chers lecteurs,
J'essaie de récupérer l'id et la quantité d'un produit.
Le problème c'est que mon script ne reconnais que le premier produit de la boucle sinon lorsque j'essaie de saisir la quantié dans le 3 ème produit par exemple on me renvoie une erreur comme quoi j'ai pas saisi une quantité
voila mon code :

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
37
38
39
<script type="text/javascript">
    $(function() {
        $('.Sendparams').click(function (e) {
      e.preventDefault();
        debugger;
  //  var  id = $(this).attr('id');
        var quant = $("#quant").val();
    var id = $("#id").val();
 
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "id": id , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
});
</script>
 <section class="content">
      <!-- Small boxes (Stat box) -->
        <div class="row">    
 
       @foreach (var album in Model.Produits)
      {
 
 
                <div class="col-lg-3 col-xs-6">
                    @Html.Hidden("id", album.ProduitId, new { @id = "id" })<br/>
 
                  @album.Nom_Produit<br />
                 @album.Categorie.Nom_categorie<br />
                   @String.Format("{0:F}", album.Prix)<br />
                   @Html.TextBox("quant", null, new { id = "quant" })<br />
                    @Html.ActionLink("voila", "AddToCart", "ShoppingCart", new { id = album.ProduitId }, new { @class = "Sendparams" })<br />
 
                </div> 
        }
 
         </div>
</section>

J'ai essayé pas mal de choses mais en vain toute remarque me sera trés utile.
Merci à l'avance

[Dokho1000]

Tu dois partir de l’élément "cliqué" et récupérer le champs précédent par exemple :
(Je ne suis pas un Pro de jquery mais tu pourrais faire dans ton event)

Code :

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

1
2
3
 
 
var $quant = $(this).parent().find('#quand');

Si tu fais directement $(""quand") tu récupéreras probablement le premier élément à la place de l’élément voulu...

[Swifa]

Tu dois partir de l’élément "cliqué" et récupérer le champs précédent par exemple :
(Je ne suis pas un Pro de jquery mais tu pourrais faire dans ton event)

Code :

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

1
2
3
 
 
var $quant = $(this).parent().find('#quand');

Si tu fais directement $(""quand") tu récupéreras probablement le premier élément à la place de l’élément voulu...

J'ai essayé cette requête mais la rien ne se passe!!

[Dokho1000]

J'ai essayé cette requête mais la rien ne se passe!!

J'ai mis "#Quand" à la place de "#Quant"...

[Swifa]

J'ai mis "#Quand" à la place de "#Quant"...

Oui j'ai fais attention à cela

[Swifa]

J'ai mis "#Quand" à la place de "#Quant"...

le prolème est le même :/

[François DORIN]

Bonjour,

Le problème est simple. En HTML, un ID est censé être unique. Or, ce n'est pas le cas ici ! Du coup, quand tu récupères un élément par son ID, tu récupères lequel ? Il te faut générer des ID uniques sur l'ensemble du document HTML.

A défaut, si tu souhaites récupérer un élément relativement à un autre (par exemple, son parent ou un enfant), alors dans ce cas, tu peux utiliser des classes.

[Dokho1000]

Bonjour,

Le problème est simple. En HTML, un ID est censé être unique. Or, ce n'est pas le cas ici ! Du coup, quand tu récupères un élément par son ID, tu récupères lequel ? Il te faut générer des ID uniques sur l'ensemble du document HTML.

A défaut, si tu souhaites récupérer un élément relativement à un autre (par exemple, son parent ou un enfant), alors dans ce cas, tu peux utiliser des classes.

tout a fait d'accord mais ca devrait tout de même fonctionner si il cherche l'id dans dans l’élément parent (puisqu'il est unique dans cette collection là...)

Je viens de faire le test et ca fonctionne sans problème :

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
 
 
<div>
	<input type="text" id="quant" value="1" />
	<input type="button" value="click"  />
</div>
<div>
	<input type="text" id="quant" value="2" />
	<input type="button" value="click"  />
</div>
<div>
	<input type="text" id="quant" value="3" />
	<input type="button" value="click"  />
</div>
<script type="text/javascript">
$("input[type=button]").click(function(e){
		e.preventDefault();
		var me = $(this);
		var parent = me.parent();
		var quant = parent.find('#quant');
		var val = quant.val();
		alert(val);
});
</script>

[François DORIN]

Le "devrait" est faux. Cela dépend de l'implémentation.

Quand on recherche un élément par son ID, jQuery utilise document.getElementById pour le récupérer. Hors, cette fonction renvoie (actuellement) le premier élément du document si jamais il y en a plusieurs.

Bon, là on ne fait pas jQuery("#id") mais element.find('#id'). Est-ce que dans ce cas là, jQuery fait appel à document.getElementById et vérifie ensuite que c'est bien un enfant du noeud représenté par element ? Est-ce qu'il appel element.querySelector ? Vu le comportement, j'aurais tendance à dire qu'il utilise querySelector (ou querySelectorAll). Mais là, c'est un reflet de l'implémentation. Et à défaut d'un comportement explicitement précisé par des spécifications, je ne m'y fierais pas, car trop sensible aux changements. Le comportement peut dépendre du navigateur et de sa version, ou de la version de jQuery. Beaucoup trop d'éléments d'incertitude.

Donc pour une solution pérenne, il ne faut pas utiliser des ID non unique.

[Swifa]

tout a fait d'accord mais ca devrait tout de même fonctionner si il cherche l'id dans dans l’élément parent (puisqu'il est unique dans cette collection là...)

Je viens de faire le test et ca fonctionne sans problème :

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
 
 
<div>
	<input type="text" id="quant" value="1" />
	<input type="button" value="click"  />
</div>
<div>
	<input type="text" id="quant" value="2" />
	<input type="button" value="click"  />
</div>
<div>
	<input type="text" id="quant" value="3" />
	<input type="button" value="click"  />
</div>
<script type="text/javascript">
$("input[type=button]").click(function(e){
		e.preventDefault();
		var me = $(this);
		var parent = me.parent();
		var quant = parent.find('#quant');
		var val = quant.val();
		alert(val);
});
</script>

Alors la j'ai essayé de faire de même mais j'ai le même probléme juste que vous donnez une valeur à chaque input c'est obligtoire ? car je suis dans une boucle !
voila mon code

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
37
38
39
40
41
42
<script type="text/javascript">
 
 
    $("input[type=button]").click(function (event) {
 
        event.preventDefault();
        var me = $(this);
        var parent = me.parent();
        var x = parent.find('#quant');
        var quant = x.val();
        var y = parent.find('#id');
        var id = y.val();
 
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "id": id , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
 
</script>
    <section class="content">
      <!-- Small boxes (Stat box) -->
        <div class="row">    
 
       @foreach (var album in Model.Produits)
       {
 
           @Html.BeginForm("AddToCart", "ShoppingCart",FormMethod.Post ){ 
                <div class="col-lg-3 col-xs-6">
                    @Html.Hidden("id", album.ProduitId, new { @id = "id" })<br/>
 
                  @album.Nom_Produit<br />
                 @album.Categorie.Nom_categorie<br />
                   @String.Format("{0:F}", album.Prix)<br />
                    <input type="text" name="quant" value="" />
                      <input type="submit" value="click"   />           
                </div> }
        }
 
         </div>
</section>

[Swifa]

Le "devrait" est faux. Cela dépend de l'implémentation.

Quand on recherche un élément par son ID, jQuery utilise document.getElementById pour le récupérer. Hors, cette fonction renvoie (actuellement) le premier élément du document si jamais il y en a plusieurs.

Bon, là on ne fait pas jQuery("#id") mais element.find('#id'). Est-ce que dans ce cas là, jQuery fait appel à document.getElementById et vérifie ensuite que c'est bien un enfant du noeud représenté par element ? Est-ce qu'il appel element.querySelector ? Vu le comportement, j'aurais tendance à dire qu'il utilise querySelector (ou querySelectorAll). Mais là, c'est un reflet de l'implémentation. Et à défaut d'un comportement explicitement précisé par des spécifications, je ne m'y fierais pas, car trop sensible aux changements. Le comportement peut dépendre du navigateur et de sa version, ou de la version de jQuery. Beaucoup trop d'éléments d'incertitude.

Donc pour une solution pérenne, il ne faut pas utiliser des ID non unique.

Comment pourrais je donner des id non unique ? puisque je suis dans une boucle !

[Dokho1000]

Vu que tu n'as qu'un seul input de type text par form tu pourrais simplement récupérer la valeur en filtrant sur le type "Input[type=text]" ca devrait suffire.
Mais idéalement ce serait mieux de mettre une class du genre "Quantity" car si jamais par la suite tu venais a ajouter une autre textbox la solution ne pourrait plus convenir :

Solution 1

Code :

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

1
2
 
var $quant = $(this).parent().find('input[type=text]');

Solution 2

Code :

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

1
2
3
<input type="text" name="quant" class="Quantity" value="" />
...var $quant = $(this).parent().find('.Quantity');

Comme dit Précédemment, je ne suis pas un export jQuery mais ca devrait fonctionner...

[François DORIN]

Comment pourrais je donner des id non unique ? puisque je suis dans une boucle !

En quoi est-ce un problème ? Il s'agit simplement de construire une chaine de caractères au lieu d'utiliser la constante "id".

Tu peux, par exemple, ajouter une variable que tu incrémentes à chaque itération et concaténer cette valeur avec id, afin d'obtenir "id_1", "id_2', etc...

Tu peux aussi remplacer la boucle foreach avec un for au lieu d'incrémenter toi-même la valeyr

Tu peux générer un GUID

Ce ne sont que quelques exemples.

[Swifa]

En quoi est-ce un problème ? Il s'agit simplement de construire une chaine de caractères au lieu d'utiliser la constante "id".

Tu peux, par exemple, ajouter une variable que tu incrémentes à chaque itération et concaténer cette valeur avec id, afin d'obtenir "id_1", "id_2', etc...

Tu peux aussi remplacer la boucle foreach avec un for au lieu d'incrémenter toi-même la valeyr

Tu peux générer un GUID

Ce ne sont que quelques exemples.

Bonjour j'ai essayé de remplacer la boucle foreach par un for c 'est ce que j'ai eu

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<div class="row">
            @{ var album = Model.Produits.ToArray();}
            @for (int i = 0; i < album.Length; i++) { 
                <div class="col-lg-3 col-xs-6">
                   <div class="box box-info center ">
                       <div class="form-horizontal">
                           <div class="box-body">
                               @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
                               @Html.Hidden("num", @i, new { @num = i })
                               @Html.Hidden("id", album[i].ProduitId, new { @id = "id" })
                               <img src=" ~/imagess/@album[i].ImagePath" Width="200" Height="200" class="center" /><br />
                               <br />
 
                               <b>@album[i].Nom_Produit </b>
                               <div class="pull-right hidden-xs">
                                   <i>  @String.Format("{0:F}", album[i].Prix) Dh</i>
                               </div>
                               <br />
 
                               <br />
                               <div class="pull-left hidden-xs ">
                                   <p>Quantité :  </p>
                               </div>
 
                               @Html.TextBox("quant"+i, null, new { @class = "col-md-3 col-md-offset-1"})
                           @Html.ValidationMessage("quant")
 
 
                          <button class="bg-primary col-md-4 col-md-offset-5">
                            @Html.ActionLink("Ajouter", "AddToCart", "ShoppingCart", new { id = album[i].ProduitId}, new { @class = "Sendparams" })
                       </button>
 
 
                           </div>
                       </div>
                   </div></div>
            }
 
 
                    </div>
 
 
<script type="text/javascript">
    $(function() {
     $('.Sendparams').click(function (e) {
        e.preventDefault();
        debugger;
        var num = $("#num").val();
      //  var produitId = $(this).attr('id');
      var id = $("#id").val();
        var quant = $("#quant"+num).val();
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "id": id , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
});
</script>

L'inspection me donne le code suivant :

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
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
<div class="row">
 
                <div class="col-lg-3 col-xs-6">
                   <div class="box box-info center ">
                       <div class="form-horizontal">
                           <div class="box-body">
 
 
                               <input id="num" name="num" num="0" type="hidden" value="0">
                               <input id="id" name="id" type="hidden" value="1">
                               <img src="/imagess/avene.png" width="200" height="200" class="center"><br>
                               <br>
 
                               <b>Avène </b>
                               <div class="pull-right hidden-xs">
                                   <i>  150,00 Dh</i>
                               </div>
                               <br>
 
                               <br>
                               <div class="pull-left hidden-xs ">
                                   <p>Quantité :  </p>
                               </div>
 
                               <input class="col-md-3 col-md-offset-1" id="quant0" name="quant0" type="text" value="">
                           <span class="field-validation-valid" data-valmsg-for="quant" data-valmsg-replace="true"></span>
 
 
                          <button class="bg-primary col-md-4 col-md-offset-5">
                            <a class="Sendparams" href="/ShoppingCart/AddToCart/1">Ajouter</a>
                       </button>
 
 
                           </div>
                       </div>
                   </div></div>
                <div class="col-lg-3 col-xs-6">
                   <div class="box box-info center ">
                       <div class="form-horizontal">
                           <div class="box-body">
 
 
                               <input id="num" name="num" num="1" type="hidden" value="1">
                               <input id="id" name="id" type="hidden" value="2">
                               <img src="/imagess/uriage.gif" width="200" height="200" class="center"><br>
                               <br>
 
                               <b>Uriage </b>
                               <div class="pull-right hidden-xs">
                                   <i>  200,00 Dh</i>
                               </div>
                               <br>
 
                               <br>
                               <div class="pull-left hidden-xs ">
                                   <p>Quantité :  </p>
                               </div>
 
                               <input class="col-md-3 col-md-offset-1" id="quant1" name="quant1" type="text" value="">
                           <span class="field-validation-valid" data-valmsg-for="quant" data-valmsg-replace="true"></span>
 
 
                          <button class="bg-primary col-md-4 col-md-offset-5">
                            <a class="Sendparams" href="/ShoppingCart/AddToCart/2">Ajouter</a>
                       </button>
 
 
                           </div>
                       </div>
                   </div></div>
 
 
                    </div>

Et malheureusement j'ai toujurs le même probléme quand j 'essaie de remplir la quantité du deuxième élément je reçois une exception !
Est ce que je dois changer quelque chose dans mon javascript ?

[Dokho1000]

Comme l'a déjà très bien dit François DORIN en faisant

Code :

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

$("#num").val()

tu récupères le premier élément dont l'id est num et donc tu récupéreras toujours ta première quantité et non la quantité souhaitée! (enfin sauf si tu as cliqué sur le premier bouton ^^)
Essaye plutôt d'ajouter sur ton bouton l'attribut "data-id=id" et ensuite tu récupères les quantité en concaténant l'id de l'input et l'id de ton "model"

exemple :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<div class="row">
            @{ var album = Model.Produits.ToArray();}
            @for (int i = 0; i < album.Length; i++) { 
                <div class="col-lg-3 col-xs-6">
                   <div class="box box-info center ">
                       <div class="form-horizontal">
                           <div class="box-body">
                               @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
                               @Html.Hidden("id", album[i].ProduitId, new { @id = "id" })
                               <img src=" ~/imagess/@album[i].ImagePath" Width="200" Height="200" class="center" /><br />
                               <br />
 
                               <b>@album[i].Nom_Produit </b>
                               <div class="pull-right hidden-xs">
                                   <i>  @String.Format("{0:F}", album[i].Prix) Dh</i>
                               </div>
                               <br />
 
                               <br />
                               <div class="pull-left hidden-xs ">
                                   <p>Quantité :  </p>
                               </div>
 
                               @Html.TextBox("quant"+album[i].ProduitId, null, new { @class = "col-md-3 col-md-offset-1"})                           @Html.ValidationMessage("quant")
 
 
                          <button class="bg-primary col-md-4 col-md-offset-5">
                            @Html.ActionLink("Ajouter", "AddToCart", "ShoppingCart", new{ data_id = id, id = album[i].ProduitId}, new{ @class = "Sendparams"})
                       </button>
 
 
                           </div>
                       </div>
                   </div></div>
            }
 
 
                    </div>
 
 
<script type="text/javascript">
    $(function(){
     $('.Sendparams').click(function (e){
        e.preventDefault();
        debugger;
      var id = $(this).data("id");
        var quant = $("#quant"+id).val();
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{"id": id , "quant": quant },
        success: function (response){
                $("#mainContainerCenter").html(response); }});});
});
</script>

[Swifa]

Comme l'a déjà très bien dit François DORIN en faisant

Code :

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

$("#num").val()

tu récupères le premier élément dont l'id est num et donc tu récupéreras toujours ta première quantité et non la quantité souhaitée! (enfin sauf si tu as cliqué sur le premier bouton ^^)
Essaye plutôt d'ajouter sur ton bouton l'attribut "data-id=id" et ensuite tu récupères les quantité en concaténant l'id de l'input et l'id de ton "model"

exemple :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="row">
            @{ var album = Model.Produits.ToArray();}
            @for (int i = 0; i < album.Length; i++) { 
                <div class="col-lg-3 col-xs-6">
                   <div class="box box-info center ">
                       <div class="form-horizontal">
                           <div class="box-body">
                               @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 
                               @Html.Hidden("id", album[i].ProduitId, new { @id = "id" })
                               <img src=" ~/imagess/@album[i].ImagePath" Width="200" Height="200" class="center" /><br />
                               <br />
 
                               <b>@album[i].Nom_Produit </b>
                               <div class="pull-right hidden-xs">
                                   <i>  @String.Format("{0:F}", album[i].Prix) Dh</i>
                               </div>
                               <br />
 
                               <br />
                               <div class="pull-left hidden-xs ">
                                   <p>Quantité :  </p>
                               </div>
 
                               @Html.TextBox("quant"+album[i].ProduitId, null, new { @class = "col-md-3 col-md-offset-1"})                           @Html.ValidationMessage("quant")
 
 
                          <button class="bg-primary col-md-4 col-md-offset-5">
                            @Html.ActionLink("Ajouter", "AddToCart", "ShoppingCart", new{ data_id = id, id = album[i].ProduitId}, new{ @class = "Sendparams"})
                       </button>
 
 
                           </div>
                       </div>
                   </div></div>
            }
 
 
                    </div>
 
 
<script type="text/javascript">
    $(function(){
     $('.Sendparams').click(function (e){
        e.preventDefault();
        debugger;
      var id = $(this).data("id");
        var quant = $("#quant"+id).val();
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{"id": id , "quant": quant },
        success: function (response){
                $("#mainContainerCenter").html(response); }});});
});
</script>

Alors j'ai essayé l'exemple pour le :

Code :

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

1
2
3
  <button class="bg-primary col-md-4 col-md-offset-5">
                            @Html.ActionLink("Ajouter", "AddToCart", "ShoppingCart", new{ data_id = id, id = album[i].ProduitId}, new{ @class = "Sendparams"})
                       </button>

on me dit que id n'existe pas dans ce contexte alors je l'ai changé en

Code :

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

 data_id = album[i].ProduitId

après rien ne se passe ni les produits ni la quantité ne s'ajoute dans ma carte j'ai essayé de changer le script en :

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
<script type="text/javascript">
    $(function() {
     $('.Sendparams').click(function (e) {
        e.preventDefault();
        debugger;
     var id = $("#id").val();
 
        var quant = $("#quant" + id).val();
 
        $.ajax({
            type: 'GET',
            url: '/ShoppingCart/AddToCart',
            data:{ "id": id , "quant": quant },
        success: function (response) {
                $("#mainContainerCenter").html(response); } });});
});
</script>

et la encore le premier élément

[Dokho1000]

J'abandonne, je vois pas comment on pourrait mieux t'expliquer que tout ce qui a été écris de plus ton problème n'est pas un problème asp.net mais javascript.

[François DORIN]

Regarde bien ton code javascript et le code HTML qui est généré.

Dans le code javascript, tu fais var id = $(this).data("id");, où this est le lien sur lequel tu cliques (le tag <a>). Avec data("id"), tu cherches à récupérer l'attribut nommé data-id. Or, ton lien (le tag <a>) n'en contient aucun ! Il est donc tout à fait normal que cela ne fonctionne pas.