Javascript runtime error $ is undefined? - javascript

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/

Related

Call JS Function from asp.net page

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>

AJAX problems with sending POST, and getting result

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

angularJS AJAX postback method not fired

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",

Call JSON data from External file using Ajax

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>

AJAX POST not functioning with jQuery 1.9.0 or greater

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

Categories