Renvoi de la valeur du premier item seulement.

Version imprimable

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:

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

08/06/2017, 11h16
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:

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...
08/06/2017, 12h11
Swifa
Citation:
Envoyé par 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:

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!!
08/06/2017, 17h09
Dokho1000

Citation:

Envoyé par Swifa

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

J'ai mis "#Quand" à la place de "#Quant"...
08/06/2017, 18h07
Swifa

Citation:

Envoyé par Dokho1000

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

Oui j'ai fais attention à cela
09/06/2017, 01h58
Swifa

Citation:

Envoyé par Dokho1000

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

le prolème est le même :/
09/06/2017, 07h52
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.

Citation:

Envoyé par 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.

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:

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>

09/06/2017, 12h17
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.

Citation:

Envoyé par Dokho1000

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:

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:

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>

09/06/2017, 12h29
Swifa

Citation:

Envoyé par 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.

Comment pourrais je donner des id non unique ? puisque je suis dans une boucle !
09/06/2017, 12h37
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:

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

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...
09/06/2017, 13h14
François DORIN

Citation:

Envoyé par Swifa

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.

Citation:

Envoyé par François DORIN

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:

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:

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 ?

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

Code:

$("#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:

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>

Citation:

Envoyé par Dokho1000

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

Code:

$("#num").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
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:

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:

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:

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

23/06/2017, 09h44
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.
02/07/2017, 00h40
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.