Calling webservice with JqueryMobile won't work

Question

Can you tell me where the problem is in this code:

$('#callAjax').live('click', function (event) {
    // $("#resultLog").html("Working....");

    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "Hello.asmx/HelloWorld",
        data: "{}",
        dataType: "json",
        success: function (msg) {
            alert(msg);
            //$("#resultLog").html(msg);
        }
    }); // end of ajax


    $("#resultLog").ajaxError(function (event, request, settings, exception) {

        $("#resultLog").html("Error Calling: " + settings.url + "<br />HTPP Code: " + request.status);

    });


});  // end of click

some code in in the HTML file

<input id="callAjax" type="button" value="Call Ajax" />

     <div id="resultLog"></div>

Here is my web-service:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;

    /// <summary>
    /// Summary description for WebService
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
     [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService {

    public WebService () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
    public static string HelloWorld() {
        return "Hello World";
    }

}

The return value is: Error Calling: Hello.asmx/HelloWorld HTPP Code: 500.

ASMX file is in same folder as my custom JavaScript file in which I call the web-service. I tried a lot, but had no luck in finding the solution. Greatly appreciate any help on this!

Answer 1

Try setting $.mobile.allowCrossDomainPages = true; and also check if $.support.cors is set to true or not. If not then set it to true explicitly:

<script type="text/javascript">
alert("changed" + " " + $.mobile.allowCrossDomainPages);
$(window.document).bind("mobileinit", function() {
    alert("mobileinit" + " " + $.support.cors);
    $.mobile.allowCrossDomainPages = true;
});
</script>