Hi,
I have used the tips provided in one of the article in this site.
Problem - Ajax call is not executing I think, because I never receive the execution line in the aspx.cs breakpoint (the first line on the method). Also the alerts just before the Ajax call works, but not inside or after the call.
1. ASPX file - Gridview and Jquery code below.
<script type="text/javascript">
$(function () {
$("[id*=productGridList] td").hover(function () {
$("td", $(this).closest("tr")).addClass("hover_row");
$("#proddetaillbl").visible = "true";
// $('[id$=proddetaillbl]').text("NewText");
if (confirm("Do you want to show this Customer?")) {
//Determine the GridView row within whose LinkButton was clicked.
var row = $(this).closest("tr");
//Look for the Hidden Field and fetch the CustomerId.
var customerId = parseInt(row.find("[id*=hdnProductID]").val());
alert(customerId.toString());
//Make an AJAX call to server side and pass the fetched CustomerId.
$.ajax({
type: "POST",
url: "ProductListGridView.aspx/GetUserDetails",
data: '{productId: ' + productId + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert("hi");
if (r.d != null) {
$('[id$=proddetaillbl]').text(r.d);
}
else {
$('[id$=proddetaillbl]').text("No details found");
}
}
});
}
}, function () {
$("td", $(this).closest("tr")).removeClass("hover_row");
$("#proddetaillbl").visible = "true";
//$('[id$=proddetaillbl]').text("NewText");
});
});
</script>
<div>
<asp:GridView ID="productGridList" runat="server" AutoGenerateColumns="false" ShowFooter="true"
GridLines="Vertical" CellPadding="4" CssClass="table table-striped table-bordered"
ItemType="WingtipToys.Models.Product" SelectMethod="GetProducts" OnRowCommand="ShowDetails_RowCommand">
<Columns>
<asp:BoundField DataField="ProductID" HeaderText="ID" SortExpression="ProductID" />
<asp:BoundField DataField="ProductName" HeaderText="Name" />
<asp:BoundField DataField="UnitPrice" HeaderText="Price (each)" DataFormatString="{0:c}" />
<asp:ButtonField ButtonType="Link" CommandName="Select" Text="Show Details - no jquery" />
<asp:TemplateField>
<ItemTemplate>
<asp:HiddenField ID="hdnProductID" runat="server" Value='<%#Eval("ProductID") %>'>
</asp:HiddenField>
<asp:LinkButton ID="btnMore" Text="More-Jquert" runat="server"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="panel" id="detailspanel">
<asp:Label class="panel" ID="proddetaillbl" runat="server"> </asp:Label>
</div>
</section>
2. ASPX.CS file - Method which is being called by Ajax
[System.Web.Services.WebMethod]
public static string GetUserDetails(int productId)
{
string kitdetails;
kitdetails = "testing - Kit details are here";
return kitdetails;
}