Call $.ajax function in another $.ajax

Question

I have two $.ajax functions. Second function must run in first $.ajax Success function. The code is here:

loadSelectedData = function (id) {
            vex.dialog.buttons.YES.text = 'ویرایش';
            vex.dialog.buttons.NO.text = 'انصراف';

            jQuery.ajax({
                type: "POST",
                url: "LastNewsProfileReport.aspx/GetData",
                data: "{ 'id':'" + id + "'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                //async: false,
                success: function (data) {
                    vex.dialog.open({
                        message: 'اطلاعات کاربر ' + data.d.FirstName + ' ' + data.d.LastName,
                        input: "<style>\n    .vex-custom-field-wrapper {\n        margin: 1em 0;\n    }\n   .vex-custom-field-wrapper-inline-right {\n        margin: 1em 0;\n   \n        float: right;\n    \n        width: 48%;\n    }\n    .vex-custom-field-wrapper-inline-left {\n        margin: 1em 0;\n   \n        float: left;\n    \n        width: 48%;\n    }\n    .vex-custom-field-wrapper > label {\n        display: inline-block;\n        margin-bottom: .2em;\n    }\n</style>" +
                            "\n<div class=\"vex-custom-field-wrapper\">\n    <label for=\"EmailTxt\">ایمیل</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input name=\"EmailTxt\" type=\"email\" value=\"" + data.d.Email + "\" disabled=\"true\" />\n    </div>\n</div>\n     \n<div class=\"vex-custom-field-wrapper\">\n    <label for=\"UsernameTxt\">نام کاربری</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input name=\"UsernameTxt\" type=\"text\" value=\"" + data.d.UserName + "\" disabled=\"true\" />\n    </div>\n</div>\n     <div class=\"vex-custom-field-wrapper-inline-right\">\n    <label for=\"FirstnameTxt\">نام</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input id=\"FirstnameTxt\" name=\"FirstnameTxt\" type=\"text\" value=\"" + data.d.FirstName + "\" />\n    </div>\n</div>\n<div class=\"vex-custom-field-wrapper-inline-left\">\n    <label for=\"LastnameTxt\">نام خانوادگی</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input id=\"LastnameTxt\" name=\"LastnameTxt\" type=\"text\" value=\"" + data.d.LastName + "\" />\n    </div>\n</div>" +
                            "\n<div class=\"vex-custom-field-wrapper\">\n    <label for=\"NickNameTxt\">نام مستعار</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input id=\"NickNameTxt\" name=\"NickNameTxt\" type=\"text\" value=\"" + data.d.NickName + "\" />\n    </div>\n</div>\n      <div class=\"vex-custom-field-wrapper\">\n    <label for=\"MobileTxt\">شماره همراه</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input id=\"MobileTxt\" name=\"MobileTxt\" type=\"text\" value=\"" + data.d.Mobile + "\" />\n    </div>\n</div>\n      <div class=\"vex-custom-field-wrapper-inline-right\">\n    <label for=\"SexList\">جنسیت</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <select id=\"SexList\" name=\"SexList\" value=\"" + data.d.Sex + "\">  \n<option value=\"" + 0 + "\">لطفا انتخاب نمایید</option> \n<option value=\"" + 1 + "\">مرد</option>    \n<option value=\"" + 2 + "\">زن</option>    </select> \n    </div>\n</div>\n    \n<div class=\"vex-custom-field-wrapper-inline-left\">\n    <label for=\"BirthDateTxt\">تاریخ تولد</label>\n    <div class=\"vex-custom-input-wrapper\">\n        <input id=\"BirthDateTxt\" name=\"BirthDateTxt\" type=\"text\" value=\"" + data.d.Birthdate + "\" />\n    </div>\n</div>\n",
                        afterOpen: function() {
                            jQuery('select option[value=\"' + data.d.Sex + '\"]').attr("selected", true);
                        },
                        callback: function (value) {
                            if (value) {
                                alert('Profile id ' + id + ' Update Successed!');
                                updatePerson(id);
                            } else {
                                return false;
                            }
                        }
                    });
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                }
            });
        }

updatePerson function is here:

updatePerson = function (id) {
            jQuery.ajax({
                type: "POST",
                url: "LastNewsProfileReport.aspx/UpdatePerson",
                data: {
                personId: '182',
                nickName: 'test',
                firstName:'test',
                lastName: 'test',
                mobileNo: '12345',
                sex: 'men',
                birthDate: 'test'
            },
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    alert('Success');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(textStatus);
                }
            });
        }

the first $.ajax function is work correctly; but second $.ajax is 500 Internal Server Error

C# class code is here:

[WebMethod]
public static bool UpdatePerson(string personId, string nickName, string firstName, string lastName, string mobileNo, int sex, string birthDate)
{
    var lastNewsProfileReport = new LastNewsProfileReport();
    lastNewsProfileReport.Update(long.Parse(personId), nickName, firstName, lastName, mobileNo, sex, birthDate);
    return true;
}

Answer 1

In Update Person C# Method , there is no "id" parameter. For Ajax call to work, you have to pass on the exact parameter name.

    data: "{ 'id':'182'}", //in update person function javascript

Should be like -

    data: "{'personId': 'value', 'nickName' : 'value', 'firstName' : 'value', 'lastName' : 'value', 'mobileNo' : 'value', 'sex' : 'value', 'birthDate' : 'value'}"

For reference - check this post on Ajax and .NET

http://www.cheezycode.com/2015/08/create-html-table-using-jquery-ajax.html