9 Replies - 353 Views - Last Post: 21 February 2020 - 07:59 AM

#1 petabyte   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 19-February 20

Loading JSON Data with JQuery

Posted 19 February 2020 - 02:25 PM

Greetings forums,

I have a question concerning the javascript portion of my code. This is my first time using JQuery but I am not understanding why my code isn't running. I've ran it through the console as a debugger but no errors pop up.

Here is the HTML part:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->

    <title>Homework 1</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
    <button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>



I am looking at the line that has "loadJQUERY" as its onclick function. So far, everything html wise is correct.

Here is the JQuery portion of the code. the AJAX/Vanilla portion is fine and the button is working.

console.log("Function does not load");
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
  url: "data/Holder.json",
  type: 'GET',
  dataType: "json",
  success: function (result) {
    $("#jq_ajax").html("<p>" + result.data2 + "</p>");
}
});
}


The third part is the actual JSON data-file, which is short.
{'data':[200,401,404,500,201]}


Can anyone tell me what is causing the JQUERY javascript function not to load? There doesn't seem to be any syntax errors and the web-browser console isn't saying anything about invisible errors.

Is This A Good Question/Topic? 0
  • +

Replies To: Loading JSON Data with JQuery

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2510
  • View blog
  • Posts: 7,607
  • Joined: 15-January 14

Re: Loading JSON Data with JQuery

Posted 19 February 2020 - 02:30 PM

It might not find the function because the function is loaded after the HTML element that tries to use it.
Was This Post Helpful? 0
  • +
  • -

#3 petabyte   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 19-February 20

Re: Loading JSON Data with JQuery

Posted 19 February 2020 - 05:27 PM

Changing the order of where the script loads in the HTML doesn't work. The first method, which is the AJAX does load fine even though the script tags are towards the bottom of the body tags.

I am still unsure what is causing this issue. Clicking the button of the AJAX shows in the console in the network button that it is loading the data. Doing the same for the JQUERY shows that the data file is not launching at all.

Is there anyone that is familar with JQuery? Does there need to be a special syntax involved with declaring a method in JQUERY or can it use the standard function() routine?
Was This Post Helpful? 0
  • +
  • -

#4 Ornstein   User is offline

  • D.I.C Head

Reputation: 57
  • View blog
  • Posts: 103
  • Joined: 13-May 15

Re: Loading JSON Data with JQuery

Posted 20 February 2020 - 03:32 AM

At first glance, I suspect your

onclick="loadJQUERY"


should be

onclick="loadJQUERY()"


I don't think it will work as-is.
Was This Post Helpful? 1
  • +
  • -

#5 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6834
  • View blog
  • Posts: 28,360
  • Joined: 12-December 12

Re: Loading JSON Data with JQuery

Posted 20 February 2020 - 06:15 AM

Yes. If you compare it to "loadAJAX()" then one of the versions must be wrong ;)
Was This Post Helpful? 0
  • +
  • -

#6 petabyte   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 19-February 20

Re: Loading JSON Data with JQuery

Posted 20 February 2020 - 09:03 AM

Hello everyone, thank you for pointing out the missing parameters in the function.

I've added them and now I see in the console networking tab that the JSON data fires, and the button does move downwards as if there is data but its not showing.

function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
  url: "data/Holder.json",
  type: 'GET',
  dataType: "json",
  success: function (result) {
    $("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}


Can anyone tell what is going on just by looking at the Javascript file here? The latest one is in this comment.
Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2510
  • View blog
  • Posts: 7,607
  • Joined: 15-January 14

Re: Loading JSON Data with JQuery

Posted 20 February 2020 - 10:23 AM

Send result to the console to see exactly what you're getting back from the server.
Was This Post Helpful? 0
  • +
  • -

#8 petabyte   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 19-February 20

Re: Loading JSON Data with JQuery

Posted 20 February 2020 - 11:53 AM

When I do console.log(result); in the console I get back a ReferenceError result not defined.

I do believe result is a variable actually inside of the JQUERY library itself which is found on line 1739.

There is a space just above the JQUERY button that looks like it's loading the data just like how the AJAX div container is but not rendering it.

Suggestions?
Was This Post Helpful? 0
  • +
  • -

#9 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2510
  • View blog
  • Posts: 7,607
  • Joined: 15-January 14

Re: Loading JSON Data with JQuery

Posted 20 February 2020 - 02:34 PM

You put the console.log line in the wrong place. Put it in the function, where you're trying to use the variable result.
Was This Post Helpful? 0
  • +
  • -

#10 petabyte   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 12
  • Joined: 19-February 20

Re: Loading JSON Data with JQuery

Posted 21 February 2020 - 07:59 AM

I found the reason:

The JSON 'data' part is suppose to be in double-quotes, not single.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1