2

I am trying to load a part of an html file with the content from another html file using jQuery. The codes are working fine with Mozilla Firefox but not with Google Chrome or Windows Internet Explorer. In the last two browsers, the page stays as it is. What am I doing wrong?

index.html

<html>
    <head>
        <script src="jquery-3.1.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                 $("#clickhere").click(function(){
                     $("#partialdisplay").load("sourcepage.html");
                 });
            });
        </script>
    </head>
    <body>
        <div id="header">
            This is the header.
            <a href="#" id="clickhere">Click here</a>
        </div>

        <div id="partialdisplay">
            <!--Content from other page will be loaded here -->
        </div>

        <div id="footer">
            This is the footer.
        </div>
    </body>
</html>

sourcepage.html

<html>
<head>
</head>
<body>
    <div id="partialdisplay">
        This part will be called back to index.html.
    </div>
</body>
</html>
halfer
  • 19,824
  • 17
  • 99
  • 186
PS Nayak
  • 409
  • 8
  • 20
  • put only the `
    This part will be called back to index.html.
    ` into your _sourcepage-html_ file     – Martin E Jan 07 '17 at 13:57
  • Should work fine...are any errors thrown in dev tools console? Note that you will have duplcate ID in page – charlietfl Jan 07 '17 at 13:58
  • You are only referring to `src="jquery-3.1.1.js"`. Try giving the complete path, starting with `http://`... in the `src` reference. – Sablefoste Jan 07 '17 at 13:58
  • http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Ankush G Jan 07 '17 at 14:00
  • You should use `$("#partialdisplay").load("sourcepage.html #partialdisplay");` - include the ID. See http://api.jquery.com/load/#loading-page-fragments – Mottie Jan 07 '17 at 14:03
  • Thanks to you all for your concern, but I am sorry to say that the above mentioned suggestions did not help. – PS Nayak Jan 07 '17 at 14:08
  • and can you tell us why? are there any errors thrown in the console, like asked from @charlietfl? – Martin E Jan 07 '17 at 14:10
  • No errors, just the index.html page stays as it is. – PS Nayak Jan 07 '17 at 14:13
  • 3
    Are you testing this code from your hard drive? Or are you using a server? Only Firefox will load files from your hard drive. – Mottie Jan 07 '17 at 14:16
  • O' I see. I am testing on my hard drive. Then I will go for server. – PS Nayak Jan 07 '17 at 14:18
  • Thanks Mottie for the information. I uploaded the files to my server and it is working fine with all the browsers. – PS Nayak Jan 07 '17 at 14:31
  • http://stackoverflow.com/questions/2990518/jquery-load-not-working-in-chrome – epascarello Jan 07 '17 at 14:54

2 Answers2

1

Chrome (ie I do not know) does not support reading local files if using offline pages.There's three ways you can check:

  1. Use a web server.

  2. Before using these commands be sure to end all running instances of Chrome.

    On Windows:

    chrome.exe –allow-file-access-from-files

    On Mac:

    open /Applications/Google\ Chrome.app/ --args --allow-file-access-from-files

  3. Change your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
    <head>
        <script src="jquery-3.1.1.js"></script>
        <script type="text/javascript">
            var  sourcecontent = '<div id="partialdisplay">This part will be called back to index.html.</div>'; 
            $(document).ready(function(){
                 $("#clickhere").click(function(){
                     $("#partialdisplay").html(sourcecontent);
                 });
            });
        </script>
    </head>
    <body>
        <div id="header">
            This is the header.
            <a href="#" id="clickhere">Click here</a>
        </div>

        <div id="partialdisplay">
            <!--Content from other page will be loaded here -->
        </div>

        <div id="footer">
            This is the footer.
        </div>
    </body>
</html>
Cin Stev
  • 36
  • 2
1

Chrome, along with some other browsers, do not allow cross origin requests, the bottom line being it won't load a file if its origin is not trusted (in your case here loading a file directly from the disk). You can bypass this security check by running a simple http server using python (using some unused port like 1234). Transfer your files into a seperate directory, then run the following inside of it.

Linux/Mac :

python -m SimpleHTTPServer 1234

Windows :

python -m http.server 1234

You can now access your application using http://localhost:1234.

M0nst3R
  • 5,186
  • 1
  • 23
  • 36
  • Probably that is the reason. sometimes Chrome also doesn't execute inline scripts, so copying the inline code to a file and then saying ` – atakanyenel Jan 09 '17 at 20:56