Sharepoint 2010 jQuery Ajax not working

Question

I have a custom web part in Sharepoint, and I'm trying to apply some ajax to the web part.

The same code works in a .net web application, but not inside a sharepoint web part.

The code from the .net web application is shown below (aspx page and code behind), which works fine .:

Aspx file

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication3._Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // Add the page method call as an onclick handler for the div. $("#Result").click(function () { var loc = window.location.href; $.ajax({ type: "POST", url: loc + "/GetMessage", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function(msg) { // Replace the div content with the page method return. $("#Result").text(msg.d); } }); }); }); </script> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <div id="Result">Click here for the time.</div> <asp:Button ID="btnClick" runat="server" Text="Button" /> </asp:Content> 

.CS File

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Services; namespace WebApplication3 { public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static string GetMessage() { return "Codebehind method call..."; } [WebMethod] public static string GetDate() { return DateTime.Now.ToString(); } } } 

The text “Click here for time” will change to “Code after calling the method” when I click on it without making a postback. I can enter the code, and this calls the GetMessage() method in the code located inside the .net web application.

However, this does not work in the web part in sharepoint 2010. Does anyone have any ideas?

Answer 1

Another option is to create a SharePoint application page. Here is your code slightly modified to act as an application page (uses sections of the contents of the SharePoint main page, and AJAX points to the application page:

 <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ApplicationPageWS.aspx.cs" Inherits="WebMethod.Layouts.WebMethod.ApplicationPageWS" DynamicMasterPageFile="~masterurl/default.master" %> <asp:Content ID="PageHead" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> <SharePoint:ScriptLink ID="ScriptLink1" runat="server" Localizable="false" Name="js/jquery-1.8.2.js"></SharePoint:ScriptLink> 

 <asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server"> <script type="text/javascript"> $(document).ready(function () { // Add the page method call as an onclick handler for the div. $("#Result").click(function () { $.ajax({ type: "POST", url: "**/_layouts/WebMethod/ApplicationPageWS.aspx/GetMessage**", data: "{}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { $("#Result").text(msg.d); }, error: function (msg) { alert(msg.responseText); } }); }); }); </script> <div id="Result">Click here for the time.</div> <asp:Button ID="btnClick" runat="server" Text="Button" /> </asp:Content> <asp:Content ID="PageTitle" ContentPlaceHolderID="PlaceHolderPageTitle" runat="server"> Application Page </asp:Content> <asp:Content ID="PageTitleInTitleArea" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server" > My Application Page </asp:Content> 

Then change your service side to inherit from LayoutsPageBase instead of WebPart:

 using System; using System.Web.UI; using System.Web.Services; using Microsoft.SharePoint.WebControls; namespace WebMethod.Layouts.WebMethod { public partial class ApplicationPageWS : LayoutsPageBase { protected override void OnInit(EventArgs e) { base.OnInit(e); //InitializeControl(); } protected void Page_Load(object sender, EventArgs e) { } [WebMethod] public static string GetMessage() { return "Codebehind method call..."; } [WebMethod] public static string GetDate() { return DateTime.Now.ToString(); } } 

}

Hope this solution works in your situation, if not, and you need to call the web service from the web part, you will need to create a web service outside of your web part. This is well explained at http://dbremes.wordpress.com/2011/01/03/ajax-style-web-parts-in-sharepoint-the-easy-way/

Steve

Answer 2

First, make sure that all necessary js files are deployed and loaded correctly. Find the URLs in the html source and copy them to a new tab and check if they load correctly.

Also try putting all the JavaScript files on the server (so the URLs https: //ajax.googleapis.com / ... ') are missing. I once had problems with permissions to use crossdomain.

There may also be a conflict with loading various JavaScript libraries. For jQuery in a SharePoint context, I usually use the noConflict option.

var $ j = jQuery.noConflict (); $ j (document) .ready (function () {.....

Answer 3

I just want to say that you have to use POST, you cannot use GET to find this difficult way.