call ajax function in javascript

Question

I want to call Ajax in javascript but it gives CallPageMethod undefined error. How to define it? and I'm newbie in Ajax. Can you help me?

<script type="text/javascript">    
    function ValidateDelete() {
        var result = CallPageMethod("IsLangExists", success, fail);

        if (result == true) { 
            return confirm('Do you want to continue ?')
        }
        else alert('You can not delete this record');
    }

    function success(response) {
        //alert(response.d);
    }

    function fail(response) {
        //alert("An error occurred.");
    }
</script>
<asp:GridView ID="grdList" OnRowCommand="grdList_RowCommand">
    <Columns>
        <asp:BoundField DataField="LangId" HeaderText="LangId" Visible="false" />            
        <asp:TemplateField HeaderText="Delete">
               <ItemTemplate>
                    <asp:ImageButton ID="imgBtnDelete" runat="server" CommandName="_Delete" CommandArgument='<%#Eval("LangId")%>' ImageUrl="~/Image/delete_icon.gif" OnClientClick="return ValidateDelete();"
                            ToolTip="Delete" />
              </ItemTemplate>
        </asp:TemplateField>
    </Columns>           
</asp:GridView>

code behind

[WebMethod]
public static bool IsLangExists()
{
    return true;
}

Andreas Grech · Accepted Answer · 2013-04-10T09:12:13.137

Is your CallPageMethod defined anywhere?

function CallPageMethod(methodName, onSuccess, onFail) {
    var args = '';
    var l = arguments.length;
    if (l > 3) {
        for (var i = 3; i < l - 1; i += 2) {
            if (args.length != 0) args += ',';
            args += '"' + arguments[i] + '":"' + arguments[i + 1] + '"';
        }
    }
    var loc = window.location.href;
    loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "default.aspx" : loc;
    $.ajax({
        type: "POST",
        url: loc + "/" + methodName,
        data: "{" + args + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: onSuccess,
        fail: onFail
    });
}

To get the return value of your server-side method, you will need to use the onSuccess callback, not by checking the value of result:

function ValidateDelete() {
    CallPageMethod("IsLangExists", success, fail);
}

function success(response) {
    if (response.d) { 
        return confirm('Do you want to continue ?');
    }

    alert('You can not delete this record');
}


function fail(response) {
    //alert("An error occurred.");
}

Here's how it should all look together:

<script type="text/javascript">

    function CallPageMethod(methodName, onSuccess, onFail) {
        var args = '';
        var l = arguments.length;
        if (l > 3) {
            for (var i = 3; i < l - 1; i += 2) {
                if (args.length != 0) args += ',';
                args += '"' + arguments[i] + '":"' + arguments[i + 1] + '"';
            }
        }
        var loc = window.location.href;
        loc = (loc.substr(loc.length - 1, 1) == "/") ? loc + "default.aspx" : loc;
        $.ajax({
            type: "POST",
            url: loc + "/" + methodName,
            data: "{" + args + "}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: onSuccess,
            fail: onFail
        });
    }  

    function ValidateDelete() {
        CallPageMethod("IsLangExists", success, fail);
    }

    function success(response) {
        if (response.d) { 
            return confirm('Do you want to continue ?');
        }

        alert('You can not delete this record');
    }

    function fail(response) {
        //alert("An error occurred.");
    }

</script>
<asp:GridView ID="grdList" OnRowCommand="grdList_RowCommand">
    <Columns>
        <asp:BoundField DataField="LangId" HeaderText="LangId" Visible="false" />            
        <asp:TemplateField HeaderText="Delete">
               <ItemTemplate>
                    <asp:ImageButton ID="imgBtnDelete" runat="server" CommandName="_Delete" CommandArgument='<%#Eval("LangId")%>'
                            ImageUrl="~/Image/delete_icon.gif" OnClientClick="return ValidateDelete();"
                            ToolTip="Delete" />
              </ItemTemplate>
        </asp:TemplateField>
    </Columns>           
</asp:GridView>

I just now added this function but It still gives same error. — baros, Apr 10 '13 at 08:41
That depends where you added it in the page though. Let me update my answer to show you the full example. — Andreas Grech, Apr 10 '13 at 08:43
thanks for your response. 'result' value is still undefined. I debugged the code. IsLangExists method return true. — baros, Apr 10 '13 at 09:01
That's because the `CallPageMethod` is an asynchronous function (since `$.ajax` returns immediately). You need to check for the return value of your server-side function in the `success` function. I'll update my answer once more to show you how it can be done. — Andreas Grech, Apr 10 '13 at 09:05
@baros: Have a look at this answer (http://stackoverflow.com/a/14220323/218196) which explains the difference between synchronous and asynchronous code. — Felix Kling, Apr 10 '13 at 09:22

call ajax function in javascript

1 Answers1