4 Replies - 248 Views - Last Post: 03 July 2017 - 08:14 AM

#1 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Cross-Origin Request Error

Posted 03 July 2017 - 07:31 AM

I am rewriting my tutorial website and what I want to do is have one web page that will allow the user to load the lesson file into a column located on the page. This is a screenshot of my page layout:
Posted Image
As you can tell the user selects a file on the right-hand side which will then pull up a lesson on the left-hand side. The lesson is an HTML (without the <head> or <body> tags, just the raw HTML) and I tried using the following JQuery function to open the file and append the contents to the left-hand side column:
$(document).ready(function(){
    // by default show the first lesson
    jQuery.get('../../lessons/basics/indroduction.html', function(data) {
        // append the file to the content area
        $('#content').append(data);
    });
    
    $('.panel .panel-body ol li a').on('click', function() {
        // get the root, directory, and file values
        var root = 'lessons';
        var directory = $(this).parent().parent().parent().parent().data('directory');
        var file = $(this).parent().data('file');
        var path = root + '../../' + directory + '/' + file + '.html';

        // clear any existing lesson content
        $('#content').empty();

        // read the lesson file
        jQuery.get(path, function(data) {
            // append the file to the content area
            $('#content').append(data);
        });
    });
});


However, whenever I try to use the code I get the following error:

Quote

XMLHttpRequest cannot load [file name]. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.


The file would be located on the same website as indicated with the local path, but right now I'm just attempting to debug the code. My first question is, am I using the get function incorrectly and my second question is, is there a better way to do this?

Is This A Good Question/Topic? 0
  • +

Replies To: Cross-Origin Request Error

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 4129
  • View blog
  • Posts: 13,023
  • Joined: 08-June 10

Re: Cross-Origin Request Error

Posted 03 July 2017 - 07:34 AM

Quote

My first question is, am I using the get function incorrectly

no. you're yousing your website incorrectly (not through a server, but directly from the filesystem).
Was This Post Helpful? 0
  • +
  • -

#3 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Cross-Origin Request Error

Posted 03 July 2017 - 08:09 AM

So if I understand you correctly, if I were to publish the website and host it on a server then it would work?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 4129
  • View blog
  • Posts: 13,023
  • Joined: 08-June 10

Re: Cross-Origin Request Error

Posted 03 July 2017 - 08:12 AM

you don't need to use a public server. a local server (even inside a virtual machine) would do.
Was This Post Helpful? 1
  • +
  • -

#5 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Cross-Origin Request Error

Posted 03 July 2017 - 08:14 AM

OK thank you!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1