jquery - Retrieve Data from DB and Fill form with the Help of Autocomplete for multiple Rows

[ad_1]

My Function is adding rows dynamically. Each row Product text box have autocomplete. I want to get product stock and price from database and fill the form with that data. For single row it works fine. but i don't know how to make it work for multiple rows. moreover addrow() function when adds new row it should be empty but its filling with the previous row data. here is function adding row.

function addrow() 
 $("#btnAdd").click(function (e) 
 e.preventDefault();
 var $tablebody = $("#tblorder");
 var $trLast = $tablebody.find("tr:last");
 var $trNew = $trLast.clone();
 var suffix = $trNew.find(':input:first').attr('name').match(/d+/);
 $trNew.find('td:last').html('<a id="btnremove">Remove</a>');
 $.each($trNew.find(':input'), function (i, val) 

 // Replace Name
 var oldN = $(this).attr('name');
 var newN = oldN.replace('[' + suffix + ']', '[' + (parseFloat(suffix) + 1) + ']');
 $(this).attr('name', newN);

 //Replace Value
 var type = $(this).attr('type');
 if (type.toLowerCase() == "text") 
 $(this).attr('value', '');
 

 //$(this).removeClass("input-validation-error");
 );
 $trLast.after($trNew);
 GetProdDetails();

 // Re-assign Validation
 //var form = $("form").removeData("validator").removeData("unobtrusiveValidation");
 //$.validator.unobtrusive.parse(form);


 );

 $('body').on("click", "#btnremove", function () 
 $(this).closest('tr').remove();
 );



 ;

function to for autocomplete which is using class atuoCP class for all new row's product text box

function GetProdDetails() 
 $(function () 
 $(".atuoCP").autocomplete(
 source: function (request, response) 
 $.ajax(
 cache: false,
 url: '@Url.Action("GetProdComplete", "Orders")',
 data: para: request.term ,
 datatype: "json",
 type: "POST",
 success: function (data) 
 response($.map(data, function (item) 
 return label: item.label, id: item.val 
 
 ));
 

 );
 , select: function (event, ui) 

 $.ajax(
 cache: false,
 type: "POST",
 url: '@Url.Action("GetProdDetail", "Orders")',
 data: id: ui.item.id ,
 success: function (data) 


 $('#Remainstock').val(data.Product_stock)
 $("#Price").val(data.product_Price)


 
 );
 
 );
 );
 

[ad_2]

لینک منبع