locked
row autocomplete conflect RRS feed

  • Question

  • User-952877843 posted

    i have a table second column is autocomplete depending on first column for example if i select supplier in the first column the autocomplete in the scond column will dispaly supplier list if i select customer in first column the autocomplete in the second column will display customer list but the problem is here when i select supplier in first column and in second column selected customer the autocomplete of first row in second column will display customer list how can i solve it  my code

    <datalist id="get_customer_or_supplier"><option></option></datalist>
      <datalist id="get_type">
          <option>Customer</option>
          <option>Supplier</option>
          <option>Warehouse</option>
     
      </datalist>
    <table id="Reference_tb" class="table table-striped table-bordered table-hover authors-list1 table_header_style" style="width:898px">
              <thead style="background-color#eff3f9">
                  <tr>
                      <th><input type="checkbox" id="check_Table_Rows" /></th>
     
                      <th>Link DocType</th>
                      <th>Link Name</th>
                      <th>Link Title</th>
                      <th></th>
                  </tr>
              </thead>
              <tbody></tbody>
          </table>

    $("#Reference_tb").off("change""td").on("change""td"function () {
               var cell_Index = $(this).index();
               var Row_Index = $(this).parent().index() + 1;
               if (cell_Index == 1) {
     
                   if ($("#Reference_tb").find("tr:eq('" + Row_Index + "')").find("td:eq(1)").find("input").val() == "Customer") {//alert("customer")
                       $("#get_customer_or_supplier").empty();
                       var append = '';
                       $.ajax({
                           type: "POST",
                           url: "/AutoComplete/Get_Customer_Name",
                           data: [],
                           success: function (response) {
                               data = $.map(response, function (item, a) {
                                   append += "<option value='" + item.customer_name + "'></option>";
                               });
                               $("#get_customer_or_supplier").append(append);
                           }
                       });
                   }
     
     
                   if ($("#Reference_tb").find("tr:eq('" + Row_Index + "')").find("td:eq(1)").find("input").val() == "Supplier") {
                       //alert("Supplier")
                       $("#get_customer_or_supplier").empty();
                       var append = '';
                       $.ajax({
                           type: "POST",
                           url: "/AutoComplete/Get_Supplier_Name",
                           data: [],
                           success: function (response) {
                               data = $.map(response, function (item, a) {
                                   append += "<option value='" + item.supplier_name + "'></option>";
                               });
                               $("#get_customer_or_supplier").append(append);
                           }
                       });
                   }
     
     
                   if ($("#Reference_tb").find("tr:eq('" + Row_Index + "')").find("td:eq(1)").find("input").val() == "Warehouse") {
                       //alert("Supplier")
                       $("#get_customer_or_supplier").empty();
                       var append = '';
                       $.ajax({
                           type: "POST",
                           url: "/AutoComplete/Get_Warehouse",
                           data: [],
                           success: function (response) {
                               data = $.map(response, function (item, a) {
                                   append += "<option value='" + item.warehouse_name + "'></option>";
                               });
                               $("#get_customer_or_supplier").append(append);
                           }
                       });
                   }
     
               }
           });
    Monday, October 22, 2018 4:37 AM

All replies

  • User1520731567 posted

    Hi chnar,

    Do you mean when you select supplier in first column,the second column show customer list?

    This may be a problem caused by JQ selector or source of ajax.

    Could you please post more details?I can't reproduce your issue.

    In addition,I suggest you could open F12 developer tool to check you code.

    Best Regards.

    Yuki Tao

    Tuesday, October 23, 2018 7:53 AM
  • User-952877843 posted

    when i select supplier in first column the second column will dispaly supplier list and when i select customer in second row in first coulmn the second column will display customer list till here ok but in that case when i go the first td in second column will display customer list insted supplier list it mean depend on the row below

    Tuesday, October 23, 2018 10:36 AM
  • User1520731567 posted

    Hi chnar,

    But I make a demo according to your code,only show the table th,like the picture:

    I can not reproduce your issue.Could you post more details?

    Best Regards.

    Yuki Tao

    Wednesday, October 24, 2018 6:05 AM
  • User-271186128 posted

    Hi chnar,

    when i select supplier in first column the second column will dispaly supplier list and when i select customer in second row in first coulmn the second column will display customer list till here ok but in that case when i go the first td in second column will display customer list insted supplier list it mean depend on the row below

    Have you solved your problem? 

    From your description, it seems that you want to create a cascading dropdownlist in the first and second columns. I suggest you could refer to the following code to use the JQuery class selector to find current row controls.

    <table id="Reference_tb" class="table table-striped table-bordered table-hover authors-list1 table_header_style" style="width:898px">
            <thead style="background-color: #eff3f9">
                <tr>
                    <th><input type="checkbox" id="check_Table_Rows" /></th>
    
                    <th>Link DocType</th>
                    <th>Link Name</th>
                    <th>Link Title</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" id="check_Table_Rows" /></td>
                    <td>
                        <select class="ddlDocType">
                            <option value="">--Select Type--</option>
                            <option value="Customer">Customer</option>
                            <option value="Supplier">Supplier</option>
                            <option value="Warehouse">Warehouse</option>
                        </select>
                    </td>
                    <td>
                        <select class="ddlName"></select>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td><input type="checkbox" id="check_Table_Rows" /></td>
                    <td>
                        <select class="ddlDocType">
                            <option value="">--Select Type--</option>
                            <option value="Customer">Customer</option>
                            <option value="Supplier">Supplier</option>
                            <option value="Warehouse">Warehouse</option>
                        </select>
                    </td>
                    <td>
                        <select class="ddlName"></select>
                    </td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>

    JQuery script:

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //using jquery class selector to find the first column's select control.
            $(".ddlDocType").each(function (index, item) {
                $(item).change(function () {
                    //find the second column's select control in the same row.
                    var $ddlname = $(this).parents().closest("tr").find(".ddlName");
                    //get the selected type.
                    var type = $(this).val();
                    //check whether the selected type is "", then based on the selected value to get the related name and populate the select control.
                    if (type != "") {
                        $.ajax({
                            type: "Post",
                            url: "/Home/Get_Name",
                            data: { typeName: type },                        
                            datatype: "json",
                            success: function (data) {
                                //clear name list.
                                $ddlname.empty();
                                //append the first item
                                $ddlname.append("<option value=''>--Select Name--</option>")
                                //populate the name
                                $.each(data, function (index, item) {
                                    $ddlname.append("<option value ='" + item.ID + "'>" + item.Name + "</option>");
                                });
                            },
                            error: function () {
                                alert("error");
                            }
                        })
                    }
                });
            });
        });
    </script>

    Code in the action method:

            [HttpPost]
            public ActionResult Get_Name(string typeName)
            {
                var datalist = new List<Type_Name>()
                {
                    new Type_Name(){ ID=101, Type="Customer", Name="Customer A" },
                    new Type_Name(){ ID=102, Type="Customer", Name="Customer B" },
                    new Type_Name(){ ID=103, Type="Customer", Name="Customer C" },
                    new Type_Name(){ ID=104, Type="Supplier", Name="Supplier A" },
                    new Type_Name(){ ID=105, Type="Supplier", Name="Supplier B" },
                    new Type_Name(){ ID=106, Type="Supplier", Name="Supplier C" },
                    new Type_Name(){ ID=107, Type="Warehouse", Name="Warehouse A" },
                    new Type_Name(){ ID=108, Type="Warehouse", Name="Warehouse B" },
                    new Type_Name(){ ID=109, Type="Warehouse", Name="Warehouse C" },
                };
                //based on the type name to find related name.
                var state = datalist.Where(c=>c.Type == typeName).ToList();
    
                return Json(state, JsonRequestBehavior.AllowGet);
            }

    The output as below:

    Best regards,
    Dillion

    Thursday, November 1, 2018 9:05 AM