Ajax call working only for first row of the table and not working for next rows-CodePudding

In my view I'm displaying a table and in table I strongly typed dropdown list and as you change selected item it calls getPrice(int product_id) function through ajax call and returns price of selected item but it only works for 1st row.

HTML

 <tr class="tr_clone" id="1">
     <td>
        @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"}
     </td>
     <td class="product_price" id="product_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product_price, "", "") </td></tr>

<tr class="tr_clone1" id="2">
     <td>
     @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"})
     </td>
     <td class="product_price" id="product_price1" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product_price, "", "")</td></tr>

Ajax call

 $(function () {
        $('#product_id').change(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data: { product_id: $('#product_id').val() },
                success: function (data) {
                    document.getElementById('product_price').innerHTML = data;
                    multiply();
                },
                error: function (data = 0) {
                    document.getElementById('product_price').innerText = 0;
                    multiply();
                }
            });
        });
    });

CodePudding user response：

You need to set 2 different ids for each dropdown.

    @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @id = "ddl_product_id_1", @class = "form-control sel"}

@Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new { @id = "ddl_product_id_2", @class = "form-control sel"})

And write change event of individual that dropdown id.

CodePudding user response：

Since you are selecting 2 different products, you model should have 2 id properties - product1_id and product2_id and 2 price properties - product1_price and product2_price

So fix your view accordingly


 <tr class="tr_clone" id="1">
     <td>
        @Html.DropDownListFor(model => model.product2_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"}
     </td>
     <td class="product_price" id="product_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product1_price, "", "") </td></tr>

<tr class="tr_clone1" id="2">
     <td>
     @Html.DropDownListFor(model => model.product2_id, ViewBag.ProductList as SelectList, "--select product--", new { @class = "form-control sel"})
     </td>
     <td class="product_price" id="product2_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product2_price, "", "")</td></tr>

and you should 2 separate on change too

$(function () {

        $('#product1_id').change(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data: { product_id: $('#product1_id').val() },
                success: function (data) {
                    document.getElementById('product1_price').innerHTML = data;
                    multiply();
                },
                error: function (data = 0) {
                    document.getElementById('product1_price').innerText = 0;
                    multiply();
                }
            });
        });
   $('#product2_id').change(function () {
            $.ajax({
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data: { product_id: $('#product2_id').val() },
                success: function (data) {
                    document.getElementById('product2_price').innerHTML = data;
                    multiply();
                },
                error: function (data = 0) {
                    document.getElementById('product2_price').innerText = 0;
                    multiply();
                }
            });
        });
    });