jQuery and its .getJSON not working and also how to synchronise the asynchronus .getJSON?
Question
so first of all, Yeah i know there are several answers out there, but none was able to solve my problem. first i will show my code HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shop</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/a565674a9d.js"></script>
<!--MINE-------------------------------->
<script src="JS/jquery.js"></script>
<script src="JS/catalog.js"></script>
</head>
<body>
<nav class="navbar navbar-light">
<div>
<a class="navbar-brand" style="text-align: center;position: fixed; left: 40%;" >
<img src="979709898.png" width="70" height="70" class="d-inline-block align-top" alt="">
Costumer Bay
</a>
<a id="cart" class=" navbar-brand btn btn-danger" style="position: fixed; left: 70%" >
<i class="fa fa-shopping-cart fa-3x" aria-hidden="true"></i>
</a>
</div>
</nav>
<div id="lin1" class="container-fluid" style="padding: 20px;">
</div>
<div id="lin2" class="container-fluid" style="padding: 20px;">
</div>
</body>
</html>
the jquery.js is the uncompressed raw jquery source code
Data.Json is in the JS folder
data.json:
[
{
"id":0,
"name":"Laptop",
"price":50000 ,
"quantity":0
},
{
"id":1,
"name":"Phone",
"price":30000 ,
"quantity":0
},
{
"id":2,
"name":"Desktop",
"price":70000 ,
"quantity":0
},
{
"id":3,
"name":"Headphone",
"price":9000 ,
"quantity":0
},
{
"id":4,
"name":"Tablet",
"price":35000 ,
"quantity":0
},
{
"id":5,
"name":"AntiVirus",
"price":5000 ,
"quantity":0
}
]
Now finally the javascript that is not working
catalog.js
let productinfo=[];
let firsttime = true;
$(function () {
console.log("here");
refreshcatalog();
console.log("now where");
let cart = $('#cart');
cart.click(function () { //NOT!WORKING
loadcart();
})
});
function refreshcatalog() {
console.log("no where");
if (firsttime){
console.log('evenhere');
$.getJSON("JS/data.json",function (data) {
console.log(data); //NOT!WORKING
});
}
if(firsttime){
firsttime=!firsttime;}
}
function loadcart() {
console.log("will load cart");
}
NOT EVEN CLICK EVENT IS RUNNING. please guide me , NO I dont know AJAX, so please dont use ajax method to solve.
Please help
<----Edit1------>
for all those asking for directory structure:
shopping-----
|_ catalog.html
|_ JS(folder) -----
|_ catalog.js
|_ jquery.js
|_ data.json
<---------------------EDIT 2 -__----------->
Click event started running after changing format to :
$(document).on('click','#button2', function()
{
alert("Dynamic button action");
});
A reason why old my old ".click" was not working, will be greatly appreciated .Btw i am using Firefox Developers Edition.
1 answers
solution1
0 ACCPTED 2017-07-01 02:02:49
Below code needs to be changed as your catalog.js & data.json resides in same folder.
$.getJSON("JS/data.json",function (data)
console.log(data);
});
Change the code to
$.getJSON("data.json",function (data) {
console.log(data);
});
Please check and let me know whether you are able to console the data or not, then will solve the other issue.
Lets rearrange the scripts (ordering)
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
I have removed jquery slim, as bootstrap uses that rather I have copied your jquery to the top so that bootstrap can use it.
Here goes the edited part.
Please don't remove JS/data.json from $.getJSON.
Remove your jquery slim & JS/jquery. Try using the below CDN link or I have provided in the comments
It worked for me in my local.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.