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);
}
});
Related
I want to call this function in my button. But every time I click the button it always shows error
Microsoft JScript runtime error: Object doesn't support this property
or method
I think the trouble happens because I'm not put jquery.js in my code, but after I put jquery.js, it always conflicts with the DropDown.js. I already tried to use jQuery.noConflict(); but it doesn't work too.
Thank you in advance.
<script type="text/javascript" src="../Script/DropDown.js"></script>
<script type="text/javascript" src="../Script/Common.js"></script>
<script type="text/javascript" src="../Script/DropDown.js"></script>
<script type="text/javascript" src="../Script/Common.js"></script>
<script type = "text/javascript">
function cekData() {
var periode;
periode = document.getElementById('ContentPlaceHolder1_txtTglAwal').value;
$.ajax({
type: "post",
url: "AjaxToolkit.asmx/CekPeriodeData",
data: '{ tgl: "' + periode + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
alert(r.d);
},
failure: function (xhr, status, error) {
alert('Error');
}
});
}
</script>
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/
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",
I'm calling a external JS file having some sample JSON code, when I try to put sample json code in the file, it throws me error at ":", but when I validate that using online tools, it says as valid json. What is going wrong in this code?
Here is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#click').click(function() {
$.ajax({
url: "json.js",
method: "GET",
dataType: 'application/json',
contentType: "application/json",
success: function(result){
console.log(result);
},
error:function() {
alert("Error")
}
});
});
});
</script>
My external json.js
{
"data": [{ ------> throwing error at ":" as Syntax error on token ":", ; expected
"Service": "INSTACC",
"Create Date": "30-Jul-2016"
}, {
"Service": "INSTACC",
"Create Date": "30-Jul-2016"
}]
}
Change your file type to json and dataType to "json"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#click').click(function() {
$.ajax({
url: "json.json",
method: "GET",
dataType: 'json',
success: function(result){
console.log(result);
},
error:function() {
alert("Error")
}
});
});
});
</script>
"application/json" is not a valid value for the dataType property. Change it to dataType: 'json',
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MyDemo</title>
</head>
<body>
<button id="click">Click Me</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#click').click(function() {
$.ajax({
url: "json.js",
method: "GET",
dataType: 'json',
contentType: "application/json",
success: function(result){
console.log(result);
},
error:function(req, status, err) {
console.log(req);
console.log(status);
console.log(err);
}
});
});
});
</script>
</body>
</html>
I am trying to make an AJAX Request through JQuery
The below is my code .
But when i debugged through Mozilla Firebug i observed that ,there is no Request hitting to the Server .
Could anybody please tell me where i am doing wrong .
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery Example</title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'ajax/balances',
processData: false,
timeout: 10000,
type: "POST",
contentType: "application/xml",
dataType: "json",
data: '<MyReq user="' + User + '" katha="' + ivalitiKatha + '" />',
success: function(data) {
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
});
</script>
</body>
</html>
This is my web.xml on server side
<servlet-mapping>
<servlet-name>Jersey Web Application</servlet-name>
<url-pattern>/ajax/*</url-pattern>
</servlet-mapping>
Maybe adding <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> to the head instead of the body helps!
First of all I would recommend moving the CDN JQuery into the head section of the website.
Secondly I have tested the code above and the issue looks to lie with the (data) you are posting in the JSON / AJAX request.
If you remove it or amend to JSON the request returns a result e.g.
$.ajax({
url: 'test',
processData: false,
timeout: 10000,
type: "POST",
contentType: "application/json",
dataType: "json",
data: '{"foo": "bar"}',
success: function(data) {
alert('Success');
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
You will need to format the data as a JSON request
data: '{"foo": "bar"}',
Hope this helps