javascript load JSON file failed - javascript

I am trying to load data from JSON file in the same folder, here is my javascript code:
$.getJSON('JsonFile.json', function(data){
alert("here");
var a = data[0];
});
but when I open this html in chrome, it throws error :
XMLHttpRequest cannot load file:///C:/UserskkDesktopchartsJsonFile.json. Cross origin requests are only supported for HTTP. jquery.min.js:4
o.ajaxTransport.l.cors.a.crossDomain.send jquery.min.js:4
o.extend.ajax jquery.min.js:4
o.each.o.(anonymous function) jquery.min.js:4
o.extend.getJSON jquery.min.js:4
(anonymous function) chart.html:28
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/UserskkDesktopchartsJsonFile.json'. jquery.min.js:4
o.extend.ajax jquery.min.js:4
o.each.o.(anonymous function) jquery.min.js:4
o.extend.getJSON jquery.min.js:4
(anonymous function)
Which shows I fail to load this JSON file, anyone knows the reason, thanks a lot

Related

Why my css isn't working and shows problems in console

Hello my css is not working while it was working 5 minutes ago, i don't really know what's the problem, and i had this error in console :
bootstrap.min.js:6 Uncaught TypeError: Cannot read property 'fn' of undefined
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6
at bootstrap.min.js:6
(anonymous) # bootstrap.min.js:6
(anonymous) # bootstrap.min.js:6
(anonymous) # bootstrap.min.js:6
(anonymous) # bootstrap.min.js:6
DevTools failed to load source map: Could not parse content for http://localhost:8080/GRH/home/assets/js/bootstrap.min.js.map: Unexpected end of JSON input
Network shows everything is fine
even the linking and paths are good
Go download JQuery , just choose the compressed script
then before your bootstrap script, just insert jquery script before it
Clear Chrome Cache by "Ctrl+Shift+R", if it doesn't work, open your website in incognito tab. Maybe it will work.

Error in react build: native code is not a function

I am getting a very strange error in my react build that just breaks everything and all I see is a blank page.
This is the error:
Uncaught TypeError: function call() { [native code] } is not a function!
at 128.4c993361.chunk.js:1
at B (128.4c993361.chunk.js:1)
at e (128.4c993361.chunk.js:1)
at 128.4c993361.chunk.js:1
at Object.<anonymous> (128.4c993361.chunk.js:1)
at Object.<anonymous> (128.4c993361.chunk.js:1)
at l ((index):1)
at Module.701 (main.af07ead1.chunk.js:1)
at l ((index):1)
at Module.827 (main.af07ead1.chunk.js:1)
(anonymous) # 128.4c993361.chunk.js:1
B # 128.4c993361.chunk.js:1
e # 128.4c993361.chunk.js:1
(anonymous) # 128.4c993361.chunk.js:1
(anonymous) # 128.4c993361.chunk.js:1
(anonymous) # 128.4c993361.chunk.js:1
l # (index):1
701 # main.af07ead1.chunk.js:1
l # (index):1
827 # main.af07ead1.chunk.js:1
l # (index):1
826 # main.af07ead1.chunk.js:1
l # (index):1
b # (index):1
e # (index):1
(anonymous) # main.af07ead1.chunk.js:1
Usually, if it's an error in my code react just displays a message with a link with the error details but in this case, it seems that it's an error from the build.
I tried to re-build the project and after that I removed the node_modules folder and ran npm install again but I keep getting that error.
I can't see this error when I run the project locally and it works perfectly fine when I use npm start.
I've build the project on my machine, locally and I'm getting the same error with my local build.
Is there any way to debug it so I can see what exactly is causing this error?

Cannot read property of 'fn' of undefined?

Getting these error codes on my github pages. I have these as my order of loading scripts:
<script src="../../node_modules/jquery/dist/jquery.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/index.js"></script>
Here are the error messages:
GET https://tmolano.github.io/CareerMod4/node_modules/jquery/dist/jquery.js 404 ()
index.html:115 GET https://tmolano.github.io/CareerMod4/node_modules/popper.js/dist/popper.min.js 404 ()
util.js:56 Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:56
at util.js:10
at bootstrap.min.js:6
at bootstrap.min.js:6
(anonymous) # util.js:56
(anonymous) # util.js:10
(anonymous) # bootstrap.min.js:6
(anonymous) # bootstrap.min.js:6
Heres my page: https://tmolano.github.io/CareerMod4/
Other than the order of loading, what else could be causing this?
Possible reasons for this error:
Uncaught TypeError: Cannot read property 'fn' of undefined
invalid reference to the file addresses or missing files (Your case).
Duplicate reference to the Jquery.
Overriding $ sign of Jquery in 3rd party libraries.
Using Jquery functions before inserting Jquery (Not your case).
Using deprecated syntax for load,error,unload on WINDOW element in jquery without on

Using JQuery to load an html page into a container on click

I am attempting to using the load function to import html from one page into another on click, but nothing seems to be happening when I click the button. How can I fix the problem?
The console error I am receiving is:
jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/Ian/Google%20Drive/Project%20Georgia/history.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
Here is the script:
<script>
$(document).ready(function(){
$("#btn-history").click(function(){
$("#displayed-text").load("history.html");
});
});
</script>
The input button:
<input id="btn-history" type="image" src="img/history.gif" alt="Golden Lion" class="menu-icon">
And the container:
<p id="displayed-text">This is where text will show up.</p>
Edit:
After learning I cannot load from the C drive, I uploaded the page to Google Drive and modified my script as follows:
$("#btn-history").click(function(){
$("#displayed-text").load("https://drive.google.com/file/d/0B7fJXEIdt8OCT2ozTlNaRktOZm8/view?usp=sharing");
});
However, am still receiving errors.
jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send # jquery.min.js:4
ajax # jquery.min.js:4
r._evalUrl # jquery.min.js:4
Ja # jquery.min.js:3
append # jquery.min.js:3
(anonymous) # jquery.min.js:3
T # jquery.min.js:3
html # jquery.min.js:3
(anonymous) # jquery.min.js:4
i # jquery.min.js:2
fireWith # jquery.min.js:2
A # jquery.min.js:4
(anonymous) # jquery.min.js:4
jquery.min.js:4 XMLHttpRequest cannot load
file:///C:/static/file/client/js/1539922584-projector_viewer__ka.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
send # jquery.min.js:4
ajax # jquery.min.js:4
r._evalUrl # jquery.min.js:4
Ja # jquery.min.js:3
append # jquery.min.js:3
(anonymous) # jquery.min.js:3
T # jquery.min.js:3
html # jquery.min.js:3
(anonymous) # jquery.min.js:4
i # jquery.min.js:2
fireWith # jquery.min.js:2
A # jquery.min.js:4
(anonymous) # jquery.min.js:4
VM644:1 Uncaught ReferenceError: _initProjector is not defined
at :1:1
at p (jquery.min.js:2)
at Ja (jquery.min.js:3)
at r.fn.init.append (jquery.min.js:3)
at r.fn.init. (jquery.min.js:3)
at T (jquery.min.js:3)
at r.fn.init.html (jquery.min.js:3)
at Object. (jquery.min.js:4)
at i (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
(anonymous) # VM644:1
p # jquery.min.js:2
Ja # jquery.min.js:3
append # jquery.min.js:3
(anonymous) # jquery.min.js:3
T # jquery.min.js:3
html # jquery.min.js:3
(anonymous) # jquery.min.js:4
i # jquery.min.js:2
fireWith # jquery.min.js:2
A # jquery.min.js:4
(anonymous) # jquery.min.js:4
jquery.min.js:3 GET file:///C:/static/file/client/css/469530624-projector_css_ltr.css net::ERR_FILE_NOT_FOUND
(anonymous) # jquery.min.js:3
Ja # jquery.min.js:3
append # jquery.min.js:3
(anonymous) # jquery.min.js:3
T # jquery.min.js:3
html # jquery.min.js:3
(anonymous) # jquery.min.js:4
i # jquery.min.js:2
fireWith # jquery.min.js:2
A # jquery.min.js:4
(anonymous) # jquery.min.js:4
cb=gapi.loaded_0:48 Failed to execute 'postMessage' on 'DOMWindow': The target
origin provided ('file://') does not match the recipient window's origin ('null').
(anonymous) # cb=gapi.loaded_0:48
Have you tried e.preventDefault():
<script>
$(document).ready(function(){
$("#btn-history").click(function(e){
e.preventDefault();
$("#displayed-text").load("history.html");
});
});
</script>

Chrome browser errors on refresh of grunt serve in angular web app

I'm working on a single page angularjs app and im using grunt and bower as a dev server and dependency injection respectively. My application runs fine when it is first loaded from the "grunt serve" command, but when I refresh the page I get a string of uncaught type and reference errors and the application fails to load:
Uncaught RangeError: Maximum call stack size exceeded
jquery-ui.js:14 Uncaught ReferenceError: jQuery is not defined$.ui # jquery-ui.js:14(anonymous function) # jquery-ui.js:16
(index):1 Uncaught RangeError: Maximum call stack size exceeded
bootstrap.js:8 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.js:8
angular-animate.js:9 Uncaught TypeError: Cannot read property 'noop' of undefined(anonymous function) # angular-animate.js:9(anonymous function) # angular-animate.js:3721
angular-cookies.js:24 Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-cookies.js:24(anonymous function) # angular-cookies.js:321
angular-resource.js:8 Uncaught TypeError: Cannot read property '$$minErr' of undefined(anonymous function) # angular-resource.js:8(anonymous function) # angular-resource.js:669
angular-route.js:24 Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-route.js:24(anonymous function) # angular-route.js:992
angular-touch.js:28 Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-touch.js:28(anonymous function) # angular-touch.js:628
angular-chart.js:11 Uncaught ReferenceError: angular is not definedChart.defaults.global.responsive # angular-chart.js:11(anonymous function) # angular-chart.js:13
angular-aria.js:57 Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-aria.js:57(anonymous function) # angular-aria.js:393
angular-material.js:13 Uncaught TypeError: Cannot read property 'module' of undefined(anonymous function) # angular-material.js:13(anonymous function) # angular-material.js:14(anonymous function) # angular-material.js:17168
angular-sanitize.js:19 Uncaught TypeError: Cannot read property '$$minErr' of undefined(anonymous function) # angular-sanitize.js:19(anonymous function) # angular-sanitize.js:683
(index):1 Uncaught RangeError: Maximum call stack size exceeded
jquery.maskedinput.js:259 Uncaught ReferenceError: jQuery is not defined(anonymous function) # jquery.maskedinput.js:259
app.js:11 Uncaught ReferenceError: angular is not defined(anonymous function) # app.js:11
admin.js:10 Uncaught ReferenceError: angular is not defined(anonymous function) # admin.js:10
deployment.js:10 Uncaught ReferenceError: angular is not defined(anonymous function) # deployment.js:10
home.js:10 Uncaught ReferenceError: angular is not defined(anonymous function) # home.js:10
metrics.js:10 Uncaught ReferenceError: angular is not defined(anonymous function) # metrics.js:10
monitoring.js:10 Uncaught ReferenceError: angular is not defined(anonymous function) # monitoring.js:10
reporting.js:10 Uncaught ReferenceError: angular is not defined(anonymous function) # reporting.js:10
support.js:13 Uncaught ReferenceError: angular is not defined(anonymous function) # support.js:13
support.service.js:2 Uncaught ReferenceError: angular is not defined(anonymous function) # support.service.js:2
metrics.service.js:2 Uncaught ReferenceError: angular is not defined(anonymous function) # metrics.service.js:2
monitoring.service.js:2 Uncaught ReferenceError: angular is not defined(anonymous function) # monitoring.service.js:2
(index):1 Uncaught RangeError: Maximum call stack size exceeded
Has anyone experienced this before or know a solution? I dont think its a problem with the code.
For the "Maximum call stack size exceeded" you might want to check this: http://gruntjs.com/frequently-asked-questions#why-am-i-getting-a-maximum-call-stack-size-exceeded-error

Categories