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;
}

Answer 1

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>

• baros: I just now added this function but It still gives same error.
• Andreas Grech: That depends where you added it in the page though. Let me update my answer to show you the full example.
• baros: thanks for your response. 'result' value is still undefined. I debugged the code. IsLangExists method return true.
• Andreas Grech: 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.
• Felix Kling: @baros: Have a look at this answer (stackoverflow.com/a/14220323/218196) which explains the difference between synchronous and asynchronous code.