Jquery AJAX not firing some c# webmethods

Question

I have been encountering a strange problem. I am working with several AJAX calls from my page. Some work and others to not fire their corresponding methods but rather return full HTML of page.

Here is the code that works: JS:

/***************************************************************
function getBoothData():

retrieve data for site on site change or page load
/**************************************************************/
function getBoothData() {
    var location = $("input[name=siteMap]:checked").val();
    $(".desk").remove();
    //Get booth data
    $.ajax({
        type: "POST",
        url: "./default.aspx/deskData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify({ "location": location }),
        success: function (response) {
            siteID = location;
            data = response.d;
            showData(data.Desks);
        },
        failure: function (response) {
            alert(response.d);
        }
    }); //$.ajax()
} //getBothData()
/**************************************************************
end getBoothData()
/**************************************************************/

C#:

[WebMethod]
    public static DeskItemList deskData(string location)
    {
        DataTable dt = new DataTable();

        string query = "select * from tblSiteLayout where SiteID=(select ID from tblSiteLayoutSites where UPPER(SiteName)=UPPER('{0}'))";
        query = string.Format(query, location);
        SqlConnection con;
        SqlCommand cmd = getCmd(query, out con);
        con.Open();
        dt.Load(cmd.ExecuteReader());
        con.Close();

        var DeskList = new DeskItemList();
        DeskList.Desks = new List<desk>();
        foreach (DataRow dr in dt.Rows)
        {
            desk d = new desk();
            d.id = dr["id"].ToString();
            d.x = Convert.ToInt32(dr["x"]);
            d.y = Convert.ToInt32(dr["y"]);
            d.height = Convert.ToInt32(dr["height"]);
            d.width = Convert.ToInt32(dr["Width"]);
            d.UserLogon = dr["UserLogon"].ToString().Trim();
            d.DeskID = dr["DeskID"].ToString().Trim();
            d.Extension = dr["Extension"].ToString().Trim();
            d.Assets = dr["Assets"].ToString().Trim();
            d.computerIP = dr["ComputerIP"].ToString().Trim();
            d.RAM = dr["RAM"].ToString().Trim();
            d.HDD = dr["HDD"].ToString().Trim();
            d.SiteID = dr["SiteID"].ToString().Trim();
            d.Department = dr["Department"].ToString().Trim();
            d.deskType = (int)dr["deskType"];
            d.rotation = (int)dr["rotation"];
            d.UserName = dr["UserName"].ToString();

            // d.usrImg = dr["userImg"].ToString();

            DeskList.Desks.Add(d);
        }

        return DeskList;
    }

That above call works perfectly while the following function does not get called at all:

JS:

/***************************************************************
function fillData(obj):

Takes associated data from element and applies it to 
the edit form
/**************************************************************/
function fillData(obj) {
    //add data to element to show and edit from editData div
    $("#rowID").text(obj.data("rowID"));
    $("#deskID").val(obj.data("deskID"));
    $("#user").text(obj.data("user"));
    $("#empID").text(obj.data("empID"));
    $("#ext").text(obj.data("ext"));
    $("#dept").text(obj.data("dept"));

    var desk=obj.data("rowID");

    //retrieve user image
    $.ajax({
        type: "post",
        url: "default.aspx/getImageForDesk",
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        data: '{ "deskID":' + desk + '}',
        success: function (response) {
            var data = response.d;
            $("#userImg").attr('src',data);
        },
        failure: function (response) {
            alert(response.d);
        },
         error: function (resp, textStatus, errorThrown) {
            console.log(errorThrown);
            //alert("Status: " + textStatus); 
            //alert("Error: " + XMLHttpRequest.responseText);
            var a=resp.responseText;

        },
        complete: function (resp, status){
            //console.log(resp.responseText);
            //alert(status);
        }
    }); //$.ajax()
}
/**************************************************************
end fillData()
/**************************************************************/

C#:

[WebMethod]
    public string getImageForDesk(int deskID)
    {
        string ret = "";
        //if (Convert.ToInt32(deskId) > 1)
        int deskId = deskID;

        if ((int)deskId >= 1)
        {

            string query = "select usrImage from tblSiteLayout where id=" + deskId;
            SqlConnection con = MCAIntranet.Data.Connections.ConDEV();
            SqlCommand cmd = new SqlCommand(query, con);
            con.Open();
            byte[] img = (byte[])cmd.ExecuteScalar();
            con.Close();

            System.IO.File.WriteAllBytes(Server.MapPath("./images/tempUser.png"), img);

            ret = "tempUser.png";
        }
        return ret;
        //        return JsonConvert.SerializeObject(new {image = ret});
    }

For whatever reason, even though (so far as I can tell) the calling and receiving signatures are the same. There error function just tells me that it cannot parse the returned HTML as JSON so that is useless to me. Are there any suggestions as to where I have gone wrong on this?

Thanks

Answer 1

As Haldo pointed out in the comments the web method needed to be static. The reason I didn't use static was because I was wanting to save a file in order to use the image. This was resolved by returning a Base64 string and using that as image source.