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]

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

[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.