Within my gridview, each row has an option to Edit. The desired scenario is that upon clicking the EDIT button, it redirects me to the next tab with the corresponding SAP ID from that particular row populated in a dropdownlist.
However, the current issue I am facing is that on the first click of the edit button, only one value is displayed in the list.
On the second click, two values are shown in the list. This is not the intended behavior; I only want the data value for the specific row that I clicked the edit button on.
Below, you can find my GridView and AJAX code for binding values:
GRIDVIEW
<asp:GridView ID="grdSapDetails" runat="server" PageSize="10" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="SAP_ID" HeaderText="Sap Id" />
<asp:BoundField DataField="SITE_NAME" HeaderText="Site Name" />
<asp:BoundField DataField="SITE_ADDRESS" HeaderText="Site Address" />
<asp:TemplateField HeaderText="Edit">
<ItemTemplate>
<input type="button" onclick='return HighlightTabFunction(this)' value="Edit" id="btnEdit" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
AJAX
function HighlightTabFunction(a) {
var row = a.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
var SAPID = row.cells[0].innerHTML;
$.ajax({
url: "UBRDashboard.aspx/GETSTATEFROM_SAP",
dataType: "json",
type: "POST",
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({ SAPID: SAPID }),
async: true,
processData: false,
cache: false,
success: function (r) {
$('a[href="#tabs-2"]').click();
var ddlSapID = $("[id*=ddlSapID]");
ddlSapID.append($("<option></option>").val(r.d).html(row.cells[0].innerHTML));
$("#hdnState").val(r.d);
},
error: function (xhr) {
alert('Error while selecting list..!!');
}
})