从全局文件调用javascript函数并将其返回以追加到html

Question

I have a global javascript file 'Global.js' with a Global Handler 'GlobalHandler.ashx', what i am trying to do is to render some data in the back-end (inside the handler ), than return text data using context.Response.Write(MyString)

The question is how to append the data to my html element . I looked into the response (200) and the data is there , but i don't know the reason of not appending my text into the html element

I have tried to append them like the classic way success:function(data){ $(elementID).html(data);} But that doesnt work

Here In Global.js

function GetProfession(elementID) {
$.ajax({
    url: "/Handlers/GlobalHandler.ashx",
    dataType: "JSON",
    contentType: "application/json;charset=utf-8",
    //responseType: ResponseType,
    data: {
        functionName: "GetProfession"
    },
    success: function (data) {
        return $("#" + elementID).html(data);
    }
});
}

Here In MyPage.aspx

    $(document).ready(function () {
        GetProfession("Profession");
    });

HERE In the Handler

 string functionName = context.Request["functionName"];
        GroupDAO GroupDAO = new GroupDAO();
        if (functionName.Equals("GetProfession"))
        {
            var ListOfGroups = GroupDAO.GetGroups();
            string Builder = "";
            foreach (var group in ListOfGroups)
            {
                Builder+="<option value='" + group.GroupID + "'>" + group.GroupName + "</option>";
            }
            context.Response.Write(Builder);
        }

I am expecting to have those options appended to the html element 'Profession' but this unfortunately it does not happening

Answer 1

I found the answer , i did not recognize the logical reason of such behaviour , but the data was not in the success method even if the statuc code was 200 . in fact it was in the error: properties of ajax request . what i have done is : instead of appending the data in success to the html element . i did it in the response text .

Here is the code before not working :

  function GetProfession(elementID) {
$.ajax({
    url: "/Handlers/GlobalHandler.ashx",
    dataType: "JSON",
    contentType: "application/json;charset=utf-8",
    //responseType: ResponseType,
    data: {
        functionName: "GetProfession"
    },
    success: function (data) {
        return $("#" + elementID).html(data);
    }
});
}

Here is the one that works

function GetProfession(elementID) {
    $.ajax({
        url: "/Handlers/GlobalHandler.ashx",
        dataType: "JSON",
        contentType: "text/html; charset=utf-8",
        //responseType: ResponseType,
        data: {
            functionName: "GetProfession"
        },
        success: function (data, fata, meta) {
        },
        error: function (err) {
            $("#Profession").html(err.responseText);
            //alert(err.responseText);
        }
    });
}