locked
by selecting autocomplete fill another td table RRS feed

  • Question

  • User-1634604574 posted

    i have a table which is number of row increased by button click first column is autocomplete when selecting it fill second column and third column

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    
        <link href="~/CSS/jquery-ui.css" rel="stylesheet" />
        <script src="~/CSS/jquery-ui.js"></script>
    
    <table id="tb">
    
    <tr>
    <th>item</th>
    <th>rate</th>
    <th>amount</th>
    </tr>
    
    </table>
    
    <input type="button" id="add_row" value="add row">
    
    <script>
    
    
            jQuery('#add_row').click(function (event) {
                event.preventDefault();
    
                var newRow = jQuery(
                    '<tr>'
                 
                   + '<td><input  type="text"  class="item_1" id="item_1"/></td>'
                   + '<td><input  type="text"  class="rate_1" id="rate_1"/></td>'
                   + '<td><input  type="text"  class="amount_1" id="amount_1"/></td>'
    
                   + '</tr>');
    
                jQuery('#tb').append(newRow);
    
    
    
    
    
                $(document).on('focus', '.item', function () {
    
                    var id = this.id;
                    var splitid = id.split('_');
                    var index = splitid[1];
    
                    // alert(index)
                    // Initialize jQuery UI autocomplete
                    $('#' + id).autocomplete({
    
    
                        source: function (request, response) {
    
                            $.ajax({
                                url: "/AutoComplete/Get_sales_item",
                                type: "POST",
                                dataType: 'json',
                                data: { term: request.term, request: 1 },
                                success: function (data) {
                                    response(data);
                                    //  response(data.slice(0, 20));
                                }
    
                            });
                        },
    
    
                        select: function (event, ui) {
                            $(this).val(ui.item.item_name); // display the selected text
                            var userid = ui.item.item_name; // selected value
    
                            // AJAX
    
                            $.ajax({
                                type: 'POST',
                                url: '/SalesInvoice/Return_Item_Price',
                                data: { Item_name: userid, Company: $("#companyt").val(), PriceList: $("#price_list").val(), Customer: $("#t_customer").val(), UOM: "", Warehouse: "" },
                                success: function (response) {
    
                                    data = $.map(response, function (item, a) {
    
    
                          var rate= item.rate
                           var amount= item.amount
    
                           document.getElementById('rate' + index).value = rate;
    
                           document.getElementById('amount' + index).value = amount;
    
                                    })
    
                                }
                            })
                            return false;
                        },
    
    
                        // }
                    })
                })
    
    </script>

    i wrote that code but is not correct

    Saturday, October 26, 2019 7:17 PM

All replies

  • User61956409 posted

    Hi zhyanadil.it@gmail.com,

    <td><input type="text" class="item_1" id="item_1"/></td>

    $(document).on('focus', '.item', function ()

    According to your code, we can find that you specify class attribute with "item_1" in html, but you access it with ".item" in your jQuery code, which would cause the focus event handler is not attached to the input.

    You can try to the code like below.

    $(function () {
    
        $('#add_row').click(function (event) {
            event.preventDefault();
    
            var newRow = jQuery(
                '<tr>'
    
                + '<td><input  type="text"  class="item item_1" id="item_1"/></td>'
                + '<td><input  type="text"  class="rate_1" id="rate_1"/></td>'
                + '<td><input  type="text"  class="amount_1" id="amount_1"/></td>'
    
                + '</tr>');
    
            $('#tb').append(newRow);
        });
    
        $(document).on('focus', '.item', function () {
    
            var id = this.id;
            var splitid = id.split('_');
            var index = splitid[1];
    
            var selectediteminput = $(this);
    
            // alert(index)
            // Initialize jQuery UI autocomplete
            $('#' + id).autocomplete({
                source: function (request, response) {
    
                    $.ajax({
                        url: "/AutoComplete/Get_sales_item",
                        type: "POST",
                        dataType: 'json',
                        data: { term: request.term, request: 1 },
                        success: function (data) {
                            response(data);
                            //  response(data.slice(0, 20));
                        }
    
                    });
                },
    
                select: function (event, ui) {
                    $(this).val(ui.item.item_name); // display the selected text
                    var userid = ui.item.item_name; // selected value
    
                    // AJAX
    
                    $.ajax({
                        type: 'POST',
                        url: '/SalesInvoice/Return_Item_Price',
                        data: { Item_name: userid, Company: $("#companyt").val(), PriceList: $("#price_list").val(), Customer: $("#t_customer").val(), UOM: "", Warehouse: "" },
                        success: function (response) {
    
                            data = $.map(response, function (item, a) {
    
                                var rate = item.rate
                                var amount = item.amount
    
                                $(selectediteminput).parent().next().find("#rate_" + index).val(rate);
                                $(selectediteminput).parent().next().next().find("#amount_" + index).val(amount);
    
                            })
    
                        }
                    })
    
                    //return false;
                },
    
    
                // }
            })
        })
    })

    With Regards,

    Fei Han

    Monday, October 28, 2019 6:45 AM