Issue with .html() JQuery method

Hello there!

Following with the workspace of the previous video, the given files are index.html, javascript-example.html, jquery-example.html and sidebar.html plus the css folder.

In the file jquery-example.html, the next line of JQuery goes okay and it injects the content of sidebar.html inside the tag identified as ajax.

  function sendAJAX() {
    $('#ajax').load('sidebar.html');
    $('#load').hide();
  }

But, when I replace that with the code below, the sidebar.html content won't show and I got this error: TypeError: a is null.

  function sendAJAX() {
    $.get('sidebar.html', function (response) {
          console.log(typeof response);
          console.log(response);
          $('#ajax').html(response);
          $('#load').hide();
   });
}

The complete output when I press the button 'Bring it!' is

object jquery-example.html:      16:1
XMLDocument jquery-example.html:     17:11
TypeError: a is null
 jquery-1.11.0.min.js:      2:12398

If I replace response with for example

"<p>Hello again</p>"

It injects the paragraph all right

I checked the JQuery doc and I can't see what am I doing wrong. Any help please?

UPDATE

From the workspace It works properly.

Locally I tried different browsers as Liam told me to do it. In Google Chrome, everytime we try to load a local page using a XMLHttpRequest object, the startup must be done with --disable-web-security, for more details see the following link to a thread at stackoverflow's site

In Firefox, I used the third parameter of the get method, the data type parameter, in which I specified "html".

function sendAJAX() {
    $.get("sidebar.html", function (response) {
          console.log(typeof response);
          console.log(response);
          $('#ajax').html(response);
          $('#load').hide();
   },"html");
   }