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

Question

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

Welcome to Stack Overflow. One quick question, is your history.html in the same directory as your script/page you are trying to load it into? — Paul Stoner, May 02 '17 at 12:19
http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local read here. maybe it will help — Mihai T, May 02 '17 at 12:21
@IanBurns You can by disabling it from jquery but you shouldn't!! — yogi970, May 02 '17 at 12:43

score 0 · Answer 1 · answered May 02 '17 at 12:19

0

Have you tried e.preventDefault():

<script>
$(document).ready(function(){
    $("#btn-history").click(function(e){
        e.preventDefault();
        $("#displayed-text").load("history.html");
   });
});
</script>

answered May 02 '17 at 12:19

Sandman

2,247
1
13
26

I put this answer up _before_ edits were made to the original question (cross origin errors etc). Follow the link provided by @Mihai T – Sandman May 02 '17 at 12:26

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

1 Answers1