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>
Related
How do you locate where in a HTML page Javascript initially calls a jQuery event?
I'm attempting to diagnose and track down an obnoxious Datatables bug that has this traceback:
datatables.min.js:50 Uncaught TypeError: Cannot set properties of undefined (setting '_DT_CellIndex')
at fb (datatables.min.js:50:21)
at ia (datatables.min.js:45:1)
at HTMLTableRowElement.<anonymous> (datatables.min.js:45:114)
at jquery-3.5.1.min.js:2:1540
at Function.map (jquery-3.5.1.min.js:2:3509)
at S.fn.init.map (jquery-3.5.1.min.js:2:1508)
at La (datatables.min.js:45:79)
at f (datatables.min.js:123:15)
at HTMLTableElement.<anonymous> (datatables.min.js:123:198)
at Function.each (jquery-3.5.1.min.js:2:2976)
fb # datatables.min.js:50
ia # datatables.min.js:45
(anonymous) # datatables.min.js:45
(anonymous) # jquery-3.5.1.min.js:2
map # jquery-3.5.1.min.js:2
map # jquery-3.5.1.min.js:2
La # datatables.min.js:45
f # datatables.min.js:123
(anonymous) # datatables.min.js:123
each # jquery-3.5.1.min.js:2
each # jquery-3.5.1.min.js:2
u # datatables.min.js:113
(anonymous) # (index):2999
setTimeout (async)
(anonymous) # (index):2997
e # jquery-3.5.1.min.js:2
t # jquery-3.5.1.min.js:2
setTimeout (async)
(anonymous) # jquery-3.5.1.min.js:2
c # jquery-3.5.1.min.js:2
fireWith # jquery-3.5.1.min.js:2
fire # jquery-3.5.1.min.js:2
c # jquery-3.5.1.min.js:2
fireWith # jquery-3.5.1.min.js:2
ready # jquery-3.5.1.min.js:2
B # jquery-3.5.1.min.js:2
Datatables is notoriously buggy, and this error is well-known and can be caused by 'a number of different table configurations that the Datatables devs simply don't want to support. Fortunately, the fix is simple. I need to find where my Datatables call is and modify it to ignore that table.
Unfortunately, the earliest line in the traceback goes to a jQuery call. Nowhere does it touch any of my custom application Javascript, so I can't locate that call in my application code, so I have no idea where it's happening. The call itself isn't even easily recognizable anywhere in my code.
Presumably, I'm launching a jQuery event somewhere, which is touching or updating a table, which is then triggering a Datatables update, causing the error, and because of the use of asynchronous events, the original line of the code is being hidden.
How do I find this?
Hey Everyone I keep getting this error when trying to retrieve data from the server side using Axios. I have flushed my dns etc... cleared browser data but nothings working any idea? thank you
GET http://locahost:5000/api/activities net::ERR_NAME_NOT_RESOLVED
dispatchXhrRequest # xhr.js:184
xhrAdapter # xhr.js:13
dispatchRequest # dispatchRequest.js:52
Promise.then (async)
request # Axios.js:61
Axios.<computed> # Axios.js:76
wrap # bind.js:9
getAllActivities # agent.js:19
(anonymous) # App.js:22
commitHookEffectListMount # react-dom.development.js:19731
commitPassiveHookEffects # react-dom.development.js:19769
callCallback # react-dom.development.js:188
invokeGuardedCallbackDev # react-dom.development.js:237
invokeGuardedCallback # react-dom.development.js:292
flushPassiveEffectsImpl # react-dom.development.js:22853
unstable_runWithPriority # scheduler.development.js:653
runWithPriority$1 # react-dom.development.js:11039
flushPassiveEffects # react-dom.development.js:22820
(anonymous) # react-dom.development.js:22699
workLoop # scheduler.development.js:597
flushWork # scheduler.development.js:552
performWorkUntilDeadline # scheduler.development.js:164````
For those who missed - there's typo in locahost. Should be localhost, or locahost should be configured to resolve locally to 127.0.0.1 (or whatever target IP is, depends on OS used)
I updated npm on my DigitalOcean droplet, now the axios post call in my authentication (log in) function isn't working. I added a console.log and know that the function is triggered, but the axios post request is not working on the live site. The axios post request still works on my localhost.
I'm getting this error code on the live site:
POST https://www.myexamplesite.com/auth/login 504 (Gateway Time-out) - xhr.js:175
(anonymous) # 2.d105a7aa.chunk.js:1
e.exports # 2.d105a7aa.chunk.js:1
e.exports # 2.d105a7aa.chunk.js:1
Promise.then (async)
u.request # 2.d105a7aa.chunk.js:1
r.forEach.u.<computed> # 2.d105a7aa.chunk.js:1
(anonymous) # 2.d105a7aa.chunk.js:1
onClick # main.84d90956.chunk.js:1
l # 2.d105a7aa.chunk.js:1
d # 2.d105a7aa.chunk.js:1
(anonymous) # 2.d105a7aa.chunk.js:1
m # 2.d105a7aa.chunk.js:1
at # 2.d105a7aa.chunk.js:1
ot # 2.d105a7aa.chunk.js:1
lt # 2.d105a7aa.chunk.js:1
dt # 2.d105a7aa.chunk.js:1
D # 2.d105a7aa.chunk.js:1
F # 2.d105a7aa.chunk.js:1
Xt # 2.d105a7aa.chunk.js:1
Zt # 2.d105a7aa.chunk.js:1
t.unstable_runWithPriority # 2.d105a7aa.chunk.js:1
Ho # 2.d105a7aa.chunk.js:1
M # 2.d105a7aa.chunk.js:1
Gt # 2.d105a7aa.chunk.js:1
Again, the axios post request works fine on the localhost. But the live site sends this error since updating npm (I think it was npm that I updated; there's a chance it was something else). Also, every once and a while I think I've gotten an error about something wrong with a Promise. But that error hasn't appeared for a while.
Any thoughts on how to fix this?
The issue with the new update was that it would no longer allow self certification. I had to add this to the server:
process.env.NODE_TLS_REJECT_UNAUTHORIZED='0';
That is a temporary fix until I'm able to get the website certification working properly. I still think there may be an issue with the new npm update because I didn't self-certify my site, I used an official certification system. Don't know why this error happened. Still trying to figure out how to make the app work again without the process.env.NODE_TLS_REJECT_UNAUTHORIZED='0'; in the server.
reset.css Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-migrate.js:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1
jquery-migrate.js:45 JQMIGRATE: jQuery.fn.load() is deprecated
migrateWarn # jquery-migrate.js:45
jquery-migrate.js:47 console.trace
migrateWarn # jquery-migrate.js:47
reset.css Failed to load resource: the server responded with a status of 404 (Not Found)
More info:
Some of my plugins' Javascript is not working but only on the home page. I've tried disabling all non-related plugins but this doesn't solve the problem.
jquery-migrate.js appears to be located in wp-includes/js/jquery/. I'm assuming this is the correct file location.
In the very beginning I including a file called reset.css but long ago deleted the file plus any reference to it (for example, in functions.php) so I'm not sure what the issue is there. It is correct that the file is not available but it also shouldn't be looking for it.
Can any tell me step by step what I need to do/change? If any other info necessary please ask! Many thanks.
EDIT: after deactivating debugging in wp-config the console changed to this:
GET http://match.onesquad.nl/wp-content/themes/match-theme/reset.css
jquery-migrate.js?ver=1.4.1:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1
jquery-migrate.js?ver=1.4.1:45 JQMIGRATE: jQuery.fn.load() is deprecated
migrateWarn # jquery-migrate.js?ver=1.4.1:45
jQuery.fn.(anonymous function) # jquery-migrate.js?ver=1.4.1:560
(anonymous) # (index):368
i # jquery.js?ver=1.12.4:2
fireWith # jquery.js?ver=1.12.4:2
ready # jquery.js?ver=1.12.4:2
K # jquery.js?ver=1.12.4:2
jquery-migrate.js?ver=1.4.1:47 console.trace
migrateWarn # jquery-migrate.js?ver=1.4.1:47
jQuery.fn.(anonymous function) # jquery-migrate.js?ver=1.4.1:560
(anonymous) # (index):368
i # jquery.js?ver=1.12.4:2
fireWith # jquery.js?ver=1.12.4:2
ready # jquery.js?ver=1.12.4:2
K # jquery.js?ver=1.12.4:2
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