JQuery AJAX error function jqXHR.responseText is a string

The jqXHR.responseText is a string although it looks like JSON.

E.g. "{"Message":"domain\\a_fkf has no access","StackTrace":" at CustomAppTaskListRetriever.GetNumTasks(String userID) in C:\\Documents and Settings\\Visual Studio 2008\\Projects\\Retriever.cs:line 45\r\n at MyWorkbox.WorkboxService.GetNumTasks(String appID) in C:\\Documents and Settings\\Visual Studio 2008\\Projects\\WorkboxService.asmx.cs:line 32","ExceptionType":"System.Exception"}"

Here's how you can "parse" it. Not very elegant, but that's the best I can find:

TaskList.prototype.GetTaskItems = function() {

var t = this;
%$.ajax({

...,
success: function(data) {...},
error: function(jqXHR, textStatus, errorThrown) {

eval("var responseJSON = " + jqXHR.responseText + ";");
alert(responseJSON.Message);

}

});

}

Pass external data into $.ajax success function

TaskList.prototype.GetNumTasks = function(userID) {
            var apple = this.AppID;
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf=8",
                data: "{username:'" + escape(userID) + "', wsUrl:'" + this.WSUrl + "', appType:'" + this.AppType + "'}",
                url: WorkboxServiceURL + "/GetNumTasks",
                dataType: "json",
                success: function(data) {
                    alert(data.d);
                    alert(apple);
                },
                error: function() {
                    alert("error");
                }
            });
        }

Consuming ASP.NET web services using jQuery

It seems that ASP.NET AJAX is rather heavy-handed and carries hefty performance penalties as compared to the simpler and more straightforward jQuery.
JSON Serialized Web Service
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
System.Web.Script.Services.ScriptService]
public class dummyWebservice : System.Web.Services.WebService
{
[WebMethod()]public string HelloToYou(string name){return "Hello " + name;}
[WebMethod()]public string sayHello(){return "hello ";}
}

Remember to include [System.Web.Script.Services.ScriptService] so that the service is made available to Javascript clients.

JQuery .ajax command
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService.asmx/WebMethodName",
data: "{}",
dataType: "json"
});
You need to specify the contentType's value as application/json; charset=utf-8 and the dataType as json
to make a JQuery AJAX call.Remember to pass in data: "{}"

If you need to pass in certain params, use
data: "{username:'" + escape(userID) + "'}"
-- Need to escape() the userID so that the backslash (\) is not stripped when passed to AJAX

Sorting Nested Gridview (with UpdatePanels)

http://www.getdotnetcode.com/gdncstore/Resources/DotNet/AspNet/AJAXSeriesPart4NestUpdatePanelsGridViews/AJAXSeriesPart4NestUpdatePanelsGridViews.htm

Insert Group Headers within GridView [REVISITED]

We should consider using AJAX to solve the problem of expanding/collapsing sub-sections within the grid view. [View Sample]
AJAX elements used: Collapsible Panel
The idea:
- Insert an AJAX Script Manager
- Define 2 Data Sources (for GridView1 and GridView2)
- Insert an AJAX Update Panel, which nests a ContentTemplate, and contains all the elements below.
GridView1
- Links to the data source that retrieves the list of group headers.
- OnRowCreated event handler: GridView1_RowCreated
- Contains 1 column, which is a TemplateField
- Nested inside the TemplateField tag is an ItemTemplate, which nests 2 Panels (Panel1 and Panel2) and an AJAX CollapsiblePanelExtender.
Panel1
- Represents the group header, so customise accordingly (i.e with the expand icon)
Panel2
- Contains GridView2
GridView2
- Links to another data source that retrieves the list of item associated with the group header
- Similar to a normal grid view, add the boundfield tags and initialise the DataField to bind the values of the column.
CollapsiblePanelExtender
[cc1:CollapsiblePanelExtender ID="cpe" runat="Server" TargetControlID="Panel2" CollapsedSize="0" Collapse="True" ExpandControlID="Panel1" CollapseControlID="Panel1" ExpandDirection="Vertical" /]
* Can also add attributes like expand/collapse image

* Remember to add the following tag at the top of the .aspx file
[%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %]

In the .cs page, method for GridView1_RowCreated(object sender, GridRowEventArgs e) should contain:
if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource ctrl = e.Row.FindControl(”SqlDataSource1”) as SqlDataSource;
    if (ctrl != null && e.Row.DataItem != null)
      ctrl.SelectParameters["CustomerID"].DefaultValue = ((DataRowView)e.Row.DataItem)["CustomerID"].ToString();
}

Source:
http://yasserzaid.wordpress.com/2008/12/21/ajax-collapsible-panel-with-gridview-master-and-detail/
http://mosesofegypt.net/post/Building-a-grouping-Grid-with-GridView-and-ASPNET-AJAX-toolkit-CollapsiblePanel.aspx