javascript - Value of other column in the row in dynamic row is not changing -
i have dynamic row here , have created drop down of product , want price changed automatically when drop down selected.
<div> @using (html.beginform("saveproduct", "master", formmethod.post, new { @id = "frmproductdetail", @class = "form-horizontal" })) { @html.antiforgerytoken() @html.validationsummary(true) // @html.hidden("productorderid", model.productorderid) // @html.hidden("productid", model.productid) <div class="row-fluid border-light-color"> <div class="padding-5"> <div class="span12"> <div class="clear"></div> <div class="col1"> <span>@html.labelfor("customer name"):</span> </div> <div class="col2"> @html.textareafor(m => m.customername, new { @name = "customername", @id = "customername", @class = "txtcustdetails" }) </div> <div class="col3"> <span>@html.labelfor("contact number"):</span> </div> <div class="col4"> @html.textareafor(m => m.customernumber, new { @name = "customername", @id = "customername", @class = "txtcustdetails" }) </div> <div class="clear"></div> <div class="col1"> <span>@html.labelfor("firstname"):</span> </div> <div class="row-fluid"> <a href="javascript:void(0)" class="btn btn-primary pull-right" id="btnadd">add</a> </div> <div class="row-fluid"> <table class="table table-bordered table-hover gridtable" id="tblproduct" showsequence="true"> <thead> <tr> <th style="width:20%">sr no.</th> <th style="width:20%">product name</th> <th style="width:20%">rate</th> <th style="width:20%">quantity</th> <th style="width:20%">grand total</th> <th style="width:20%">delete</th> </tr> </thead> <tbody> <tr id="0" style="display:none"> <td class="text-center"></td> <td> @html.dropdownlist("productid", model.productname.toselectlist(model.productnameid.tostring(), "name","value")) </td> <td> @html.textboxfor(m=>m.pricedetail, new { @name = "productprice1", @id = "productprice1", @class = "txtcustdetails"}) </td> <td> @html.textboxfor(m=>m.orderquantity, new { @name = "orderquantity", @id = "orderquantity", @class = "txtcustdetails"}) </td> <td> @html.textboxfor(m=>m.grandtotal, new { @name = "grandtotal", @id = "grandtotal", @class = "txtcustdetails"}) </td> <td class="text-center vertical-middle"> <a href="javascript:void(0)" name="removerow"><i class="icon-trash" ></i></a> </td> </tr> <tr id="1"> <td class="text-center">1</td> <td> @html.dropdownlist("productid", model.productname.toselectlist(model.productnameid.tostring(), "name", "value")) </td> <td> @html.textboxfor(m=>m.pricedetail, new { @name = "productprice2", @id = "productprice2", @class = "txtcustdetails"}) </td> <td> @html.textboxfor(m=>m.orderquantity, new { @name = "orderquantity", @id = "orderquantity", @class = "txtcustdetails"}) </td> <td> @html.textboxfor(m=>m.grandtotal, new { @name = "grandtotal", @id = "grandtotal", @class = "txtcustdetails"}) </td> <td class="text-center vertical-middle"> <a href="javascript:void(0)" name="removerow"><i class="icon-trash" ></i></a> </td> </tr> </tbody> </table> </div> </div> </div> </div> } </div> i trying through jquery having problem price changes automatically in first row , not in other rows. please me changes in every row individually.
var getpriceurl = basepathurl + "/master/getpricedetail"; jquery(document).ready(function () { jquery('#btnadd').on('click', function () { addrow('#tblproduct') }); //jquery('#btnsave').on('click', function () { saveemployees() }); jquery('#tblproduct').on('click', "a[name='removerow']", function () { removerow(this) }); jquery("#tblproduct tbody").sortable({ //handle: '.glyphicon-move', update: function () { reorder('#tblproduct'); } }); jquery("select[name]*=productid").change(function () { getpricebyproductid(jquery(this).val()); jquery(this).css('border-color', ''); }); }); function addrow(tableid) { var row = jquery(tableid + ' > tbody > tr:first').clone(true); var index = parseint(jquery(tableid + ' > tbody > tr:visible').length); jquery("input, textarea, select", row).each(function () { jquery(this).attr("id", jquery(this).attr("id") + "_" + (index + 1)); jquery(this).val(''); }); jquery(tableid).append(row); jquery(row).show().attr("id", index); reorder(tableid); } function removerow(control) { var tableid = "#" + jquery(control).closest("table").attr("id"); jquery(control).closest("tr").remove(); jquery(tableid + ' > tbody > tr:visible').each(function (i, e) { jquery(e).attr("id", + 1) }); reorder(tableid); } function reorder(tableid) { jquery(tableid + '[showsequence = "true"] > tbody > tr:visible').each(function (i, e) { jquery(this).find("td:first").text(i + 1); }); } function getpricebyproductid(productid) { if (jquery.trim(productid) != ""){ var postdata = { productid: productid }; ajaxcall({ url: getpriceurl, postdata: postdata, httpmethod: 'post', calldatatype: 'json', sucesscallbackfunction: 'onsucessgetproductbyid' }); } } function onsucessgetproductbyid(response) { jquery("#productprice2").val(''); jquery("#productprice2").val(response.pricedetail[0].productprice); }
well found solution this. posting may others (sick of no response :( ). saw addrow function incrementing productid 1. firstly took id of , acquired substring, concatenated pricedetail changes every row. have provided function below.
jquery("select[name]*=productid").change(function () { var xyz = jquery(this).attr("id"); pro_id = xyz.substring(xyz.lastindexof('_')); getpricebyproductid(jquery(this).val()); jquery(this).css('border-color', ''); jquery('#btnsave').on('click', function () { insertproductdetail(); }); jquery('#btnupdate').on('click', function () { insertproductdetail(); }); }); function onsucessgetproductbyid(response) { //jquery("input[name^='pricedetail']").split('_').val(""); if (pro_id == "productid") { jquery("#productprice").val(''); jquery("#productprice").val(response.pricedetail[0].productprice); } else { jquery("#productprice" + pro_id).val(''); jquery("#productprice" + pro_id).val(response.pricedetail[0].productprice); } pro_id = ""; } i hope helps in future. thanks.
Comments
Post a Comment