Anyone please help me, I have created simple angularJS AJAX postback method.
below my HTML code.
<html xmlns="http://www.w3.org/1999/xhtml" ng-app>
<head runat="server">
<title></title>
<script src="Scripts/angular.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
function myCtrl1($scope) {
$scope.ChkLogin = function () {
alert('Hello...');
$.ajax({
type: "POST",
url: "WebService1.asmx/Test",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
//alert('Success');
alert(msg.d);
},
error: function (msg) {
//alert('Failed');
alert(msg.d);
}
});
};
}
</script>
</head>
<body>
<form id="form1" ng-controller="myCtrl1">
<div>
<input type="button" name="btnTest" value="Test button" ng-click="ChkLogin()"/>
</div>
</form>
</body>
</html>
WebService method :
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string Test()
{
return "Hellow World";
}
Upon clicking Test button, i get alert "Hello..." then failure alert msg, my webservice Test() has not been fired.
You need to Specifiy Type = get
Change this - type: "GET",
Thanks guys for your time, I had removed below line, now webservice method being fired.
contentType: "application/json; charset=utf-8",
Related
so i have a js function that calls a web method on my server,my question is:
can this function be called from an as.net button with a parameter from the server?
because that snippet of code that i got from here basically calls my web method as i want,but i dont know how to call this function from my asp.net code and asp.net button
<div>
<div id="messages">
</div>
<input type="text" id="echo" /><input id="echoSubmit" value="Echo!" type="button" />
</div>
<%-- JAVASCRIPT --%>
<script type="text/javascript">
$(function () {
$('#echoSubmit').click(function () {
var mes = $('#echo').val();
var jsonText = JSON.stringify({ message: mes });
$.ajax({
type: "POST",
url: "ARCAProductsCheat.aspx/SendMessage",
data: jsonText,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#messages").append(msg.d);
}
});
});
});
</script>
Im new at JS and JSON. So I need to send a JSON massive to Google API using POST, and get the answer and show it via alert. I wrote this page, but this code has no result.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Redericting</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
type: "POST",
url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=KEY',
data: '{wifiAccessPoints:["macAddress", "signalStrength"], cellTowers:["cellId", "locationAreaCode", "mobileCountryCode", "mobileNetworkCode"]}',
dataType: "json",
success: function(response) {
alert(response);
}
});
</script>
</body>
</html>
When using AJAX you require to set the content-type of the information you are sending. By default this value is set to application/x-www-form-urlencoded; charset=UTF-8.
$.ajax({
type: "POST",
url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=KEY',
data: JSON.stringify({wifiAccessPoints:["macAddress", "signalStrength"], cellTowers:["cellId", "locationAreaCode", "mobileCountryCode", "mobileNetworkCode"]}),
contentType: "json",
success: function(response) {
alert(response);
}
});
Are you sending the response in JSON format? datatype property refers to the type that you're returning from the server. And if that doesn't match, control will go the error callback. Remove or update the datatype property to match the response type. Make the below changes and try
$.ajax({
type: "POST",
url: 'https://www.googleapis.com/geolocation/v1/geolocate?key=KEY',
data: '{wifiAccessPoints:["macAddress", "signalStrength"], cellTowers:["cellId", "locationAreaCode", "mobileCountryCode", "mobileNetworkCode"]}',
success: function(response) {
alert(response);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("error");
}
});
I keep getting this annoying error pointing to my javascript function klm() and I have absolutely clueless why I get the error. I have checked my starting and closing tags and everything seems to look fine. What could I be doing wrong? The error specifically points to the klm method.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Dtata.aspx.cs" Inherits="Dtata" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function klm() {
$.ajax({
type: "POST",
url: "Dtata.aspx/Hello",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { name: 'hello' },
success: function (result) {
response(result.d);
Counter()
},
error: function (result) {
alert('There is a problem processing your request');
}
});
}
function Counter() {
$.ajax({
type: "POST",
url: "Dtata.aspx/Counter",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
console.log(result.d);
},
error: function (result) {
alert('There is a problem processing your request');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input id="btnGetTime" type="button" value="Show Current Time" onclick = "klm()" />
<div>
</div>
</form>
</body>
</html>
You need to include jQuery. Your script uses a jQuery function ($.ajax()) See: http://jquery.com/
Here is my following code for using AJAX calling a static webmethod on ASPX side. It used to work with jQuery 1.2.0 , but I needed to update my jQuery 2.1.1 and now ajax code doesn't even execute as it the code never falls under 'Failure' section
Can somebody nudge me in the right direction please? I have a feeling that I maybe skipping over a reference with the newer version of jQuery?
<%# Register Assembly="System.Web.Ajax" Namespace="System.Web.UI" TagPrefix="asp" %>
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<link href="../Design/jQueryCSS/bootstrap-select.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="../Design/scripts/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../Design/scripts/bootstrap-select.js"></script>
<script type="text/javascript" src="../Design/scripts/bootstrap.js"></script>
<link href="../Design/jQueryCSS/bootstrap.css" rel="Stylesheet" type="text/css" />
<script src="../Design/scripts/jquery.columnfilters.js" type="text/javascript"></script>
<script type="text/javascript" src="../Design/scripts/ToolBox.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var rtID = $('#<%=ddlRequestType.ClientID%>');
//console.log(rtID[0].value);
var temp = searchFields(rtID[0].value);
console.log(temp);
});
function searchFields(rtID) {
$.ajax({
type: "POST",
url: "Reports.aspx/Search",
data: JSON.stringify({requestTypeID: rtID}),
//data: 'requestTypeID: "' + rtID + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
/*if (response.d == true) {
console.log(response.data);
}*/
alert("hi");
},
failure: function (response) {
console.log(response.data);
}
});
</script>
Error:
And Yes I did validate requestTypeID value :-)
Try to send a JSON object instead of a String:
$.ajax({
type: "POST",
url: "Reports.aspx/Search",
data: {requestTypeID: rtID}, //Here
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
/*if (response.d == true) {
console.log(response.data);
}*/
alert("hi");
},
failure: function (response) {
console.log(response.data);
}
});
I have a page method issue I have this page method on a ASP.net webform
[WebMethod(true)]
public static int GetInt(int id){
return 10;
}
and I call it from JQuery like this
$.ajax({
type: "POST",
url: "webforms.aspx/GetInt",
data: "{id:'1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
},
error: function (err) {
}
});
This all works just fine, when I put a break point on the server side it hits, but for some odd reason I after the PageMethod returns, I get the error call back of the ajax call never success! Any ideas.
I cant use a script manager on this one! I open to any cross browser solution!.
I used your code and am having no issues. Here is my exact code:
WebForm1.aspx
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<script>
$.ajax({
type: "POST",
url: "/WebForm1.aspx/GetInt",
data: "{id:'1'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
alert("SUCCESS: " + msg.d);
},
error: function (err) {
alert("FAILURE");
}
});
</script>
</body>
</html>
WebForm1.aspx.cs
using System.Web.Services;
namespace WebApplication3
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod(true)]
public static int GetInt(int id)
{
return 10;
}
}
}