I've worked by way through a lot of the questions on the site that are asking the same thing, but I can't
I get the following error in the console window from an onClick event in my code:
1 Uncaught ReferenceError: SetName is not defined
From this line:
$("#lstResults").append("<li><a href='#' onClick='SetName()'>" + data.d[i].title + "</" + " a>" + "</" + "li>");
I've worked my way through Uncaught ReferenceError: $ is not defined? to try and track down the problem and a couple of others without any luck.
I've tried:
- Making sure my CSS is above my .js files.
- Making sure that I'm referencing jquery
- Making sure that my other .js files are listed after jquery
- Changing the reference to jquery to http or https or stripping it off and leaving them as //code.
- Made sure that my two functions are all within $(function () {
- Moved the function I'm trying to call with onClick is above the function that I'm in.
I'm really stuck so any help would be appreciated!
Code:
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="CSS/jquery-ui-1.12.1.css" rel="stylesheet" />
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
<link href="CSS/basics.css" rel="stylesheet" />
<link href="CSS/fonts.css" rel="stylesheet" />
<script src="//code.jquery/jquery-1.12.4.js"></script>
<script src="//code.jquery/ui/1.12.1/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () { // this will be called when the DOM is ready
function SetName() {
alert("I hit this!");
}
function findAll(str) {
if (str.length > 2) {
var param = { "searchString": str };
console.log(str.length);
console.log(param);
$.ajax({
type: 'POST',
url: 'adminRightsWebForm.aspx/SearchAppJ',
data: JSON.stringify(param),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function (data) {
$("#lstResults").empty();
for (i = 0; i < data.d.length; i++) {
alert(data.d[i].title);
$("#lstResults").append("<li><a href='#' onClick='SetName()'>" + data.d[i].title + "</" + " a>" + "</"
+ "li>");
}
if (data.d.length == 0)
$("#lstResults").empty();
},
error: function (request, status, error) {
alert(request.responseText);
}
});
}
else
$("#lstResults").empty();
}
});
</script> </head>
I've worked by way through a lot of the questions on the site that are asking the same thing, but I can't
I get the following error in the console window from an onClick event in my code:
1 Uncaught ReferenceError: SetName is not defined
From this line:
$("#lstResults").append("<li><a href='#' onClick='SetName()'>" + data.d[i].title + "</" + " a>" + "</" + "li>");
I've worked my way through Uncaught ReferenceError: $ is not defined? to try and track down the problem and a couple of others without any luck.
I've tried:
- Making sure my CSS is above my .js files.
- Making sure that I'm referencing jquery
- Making sure that my other .js files are listed after jquery
- Changing the reference to jquery to http or https or stripping it off and leaving them as //code.
- Made sure that my two functions are all within $(function () {
- Moved the function I'm trying to call with onClick is above the function that I'm in.
I'm really stuck so any help would be appreciated!
Code:
<head runat="server">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="CSS/jquery-ui-1.12.1.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<link href="CSS/basics.css" rel="stylesheet" />
<link href="CSS/fonts.css" rel="stylesheet" />
<script src="//code.jquery./jquery-1.12.4.js"></script>
<script src="//code.jquery./ui/1.12.1/jquery-ui.js"></script>
<script src="//maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(function () { // this will be called when the DOM is ready
function SetName() {
alert("I hit this!");
}
function findAll(str) {
if (str.length > 2) {
var param = { "searchString": str };
console.log(str.length);
console.log(param);
$.ajax({
type: 'POST',
url: 'adminRightsWebForm.aspx/SearchAppJ',
data: JSON.stringify(param),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: false,
success: function (data) {
$("#lstResults").empty();
for (i = 0; i < data.d.length; i++) {
alert(data.d[i].title);
$("#lstResults").append("<li><a href='#' onClick='SetName()'>" + data.d[i].title + "</" + " a>" + "</"
+ "li>");
}
if (data.d.length == 0)
$("#lstResults").empty();
},
error: function (request, status, error) {
alert(request.responseText);
}
});
}
else
$("#lstResults").empty();
}
});
</script> </head>
- create a fiddle for this. that will be easy to debug the issue – Kaushik Commented Oct 19, 2016 at 9:27
-
2
Uncaught ReferenceError: $ is not defined!==Uncaught ReferenceError: SetName is not defined– Andreas Commented Oct 19, 2016 at 9:29 - Hi @Andreas yeah sorry Uncaught ReferenceError: SetName is not defined is what I'm getting – hlh3406 Commented Oct 19, 2016 at 9:31
1 Answer
Reset to default 8This is actually a scope problem.
The SetName() function is defined inside the $(function(){/* ... */}) anonymous function, but is not reachable at the window level, which the onClick implicitly refers to.
Moving the function above the jQuery stuff should fix this.