Page Unable to execute a $("#..").load()

Question

Functionality:

When Users tap on an image button, it is suppose to bring the user from the current page to the next page.

What has been done:

I have made use of jQuery method call: .load(url), hence the syntax will look something like : $("#divID").load("***.html");

Issue:

When I clicked on the image button, it gives the following error msg:

XMLHttpRequest cannot load
jquery-1.11.3.min.js:5 file:///Users/trinax/Documents/Ernest/Project/ToysRUs/ToyRUs(main)/TapAStar.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

and furthermore, the resultant page is blank and doesn't display anything.

what has gone wrong?please help

$("#tapButton").click(function() {
  // Enter Link here (Tap A Star Game)
  $("#load_tapGame").load("Tap.html");

  $("#menu").fadeOut(function() {
    $("#load_tapGame").fadeIn();
  })
})

<div id="load_tapGame"></div>
<div id="menu">
  <img style="position: absolute; top: 2150px; left: 185px; z-index: 2" src="library/image/tapAStarButtonCloud.png" />
  <div class="button">
    <button id="tapButton" class="buttonProperty">
      <img src="library/image/tapButton.png" />
    </button>
  </div>
</div>

This helps you. http://stackoverflow.com/questions/15005500/loading-cross-domain-html-page-with-ajax — Bhojendra Rauniyar, Dec 14 '15 at 03:13
@BhojendraNepal Thanks!!I was wondering if it is more apt if i use: `location.href="***.html";` instead? — Luke, Dec 14 '15 at 03:17

score 0 · Answer 1 · answered Dec 14 '15 at 03:41

You need to use a server. Trying to load things using javascript when working locally will fail due to CORS. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

I like to use Live Server for local testing. You can find instructions on how to install it using npm here: https://github.com/tapio/live-server

You can find instruction on installing npm (Node Package Manager) here: https://nodejs.org/en/download/

Page Unable to execute a $("#..").load()

1 Answers1