I am trying to switch from a very basic webpage into anthor one but i face some issues with the result once i click on getAll
My previous webpage (the wroking one )
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="getAll()"> Get All The Users </button>
<div id="users"></div>
<script>
function getAll()
{
$("#users").html("");
$.getJSON("http://localhost:8080/users", function(data)
{
for (var i in data) {
$('#users').append("<p>ID: " + data[i].id + "</p>")
$('#users').append("<p>First name: " + data[i].fname + "</p>")
$('#users').append("<p>Last name: " + data[i].lname + "</p><br>")
}
});
}
</script>
</body>
</html>
Here is the error:
Uncaught ReferenceError: getAll is not defined
at HTMLButtonElement.onclick (testt.html:96)
onclick @ @ testt.html:96
testt.html:145
Uncaught ReferenceError: screenfull is not defined
at HTMLDivElement.<anonymous> (testt.html:145)
(anonymous) @ testt.html:145
EDITED After Nina ́s answer i get the desired result but the homepage looks like this:
So it distorts the upper part of my homepage.
-
"getAll is not defined" - when you’re using "old-school" event handling via HTML attributes, the function must exist before that element occurs in the DOM. But since you are using jQuery already, you should rather deal with the button click event the jQuery way, too.C3roe– C3roe2017年08月10日 13:37:40 +00:00Commented Aug 10, 2017 at 13:37
2 Answers 2
You need to change
<div id="requestfs">/div>
to
<div id="requestfs"></div>
And you need to change this line
$.getJSON("http://localhost:8080/users" , function(data[i])
// ^^^
to (without index)
$.getJSON("http://localhost:8080/users" , function(data)
At least you need to include the library somewhere, before using it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Optional you could use the type attribute as well
<script type="text/javascript">
1 Comment
When you declare a function, the { should be on the same line with the function keyword. For example:
function foo() {
}
You should change all of those(note, they are on line 110 and line 20).
Next, in the line
$.getJSON("http://localhost:8080/users" , function(data[i]) {
function (data[i]) should be function (data)
Also, remember to include the jquery library.
2 Comments
return keyword to return an object, it will cause an error(and it is very hard to find). It is a good coding practice. See youtube.com/… at 19:58.