Trouble loading external html file with jQuery .load

Question

I'm trying to dynamically load content on a simple page. I want to fade in the content.html I'm trying to link, then any other link I click will load a div from the content.html and fade in. I think I do this with .load("html.html #section"); but this is as far as I've gotten.

This is in my <head>

    <!-- JQUERY -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <!-- SCRIPTS -->
    <script type="text/javascript">
    $(document).ready(function(){
        // $(".content").load("content.html");
        // $(".content").fadeIn(800);
        $(".menu ul li a").click(function(){
            $(".content").load("content.html");
        });
    });
</script>

body page with the content div im trying to load into

<body>
    <div class="wrapper">
        <div class="gradient">
            <div class="header">
                <div class="nav">
                    <div class="logo">
                        <strong>
                            <a href="index.html">
                                <img src="images/logo.png" alt="Sam Jarvis logo"/>
                            </a>
                        </strong>
                    </div>
                    <div class="menu">
                        <ul>
                            <li><a href="#home">HOME</a></li>
                            <li><a href="#about">ABOUT</a></li>
                            <li><a href="#work">PORTFOLIO</a></li>
                            <li><a href="#clients">CONTACT</a></li>
                        </ul>
                    </div>  
                </div>
            </div>
            <div class="content">

            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footerText">    
            <div class="footerCopyright">
                <p>© 2013 Sam Jarvis | Design and Development. All Rights Reserved.</p>
            </div>
            <div class="menu">
                <ul>
                    <li><a href="#home">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#work">PORTFOLIO</a></li>
                    <li><a href="#clients">CONTACT</a></li>
                </ul>
            </div>
        </div>
    </div>
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>

console says

OPTIONS file://localhost/Users/eveo/Projects/Sites/Sam/content.html Origin null is not allowed by Access-Control-Allow-Origin. jquery.min.js:6
send jquery.min.js:6
x.extend.ajax jquery.min.js:6
x.fn.load jquery.min.js:6
(anonymous function) index.html:21
x.event.dispatch jquery.min.js:5
v.handle jquery.min.js:5
XMLHttpRequest cannot load file://localhost/Users/eveo/Projects/Sites/Sam/content.html. Origin null is not allowed by Access-Control-Allow-Origin. index.html:1

You appear to be requesting from file://localhost rather than http://localhost. Work from a webserver and you won't have this problem. XAMP, WAMP, etc. — Kevin B
– Kevin B, Commented Jul 9, 2013 at 16:24

DevlshOne · Accepted Answer · 2013-07-09 16:26:59Z

1

$(document).ready(function(){
     $(".menu ul li a").click(function(e){
            e.preventDefault();
            $(".content").load("content.html",function() {
                $(".content").fadeIn(800);
            });
      });
});

Always use the preventDefault() if you are dynamically loading from a link to prevent any possible page refreshes. Also, you can use the .load() callback to .fadeIn() the content. Of course, this is all for naught if you're trying to load HTML content from your filesystem.

answered Jul 9, 2013 at 16:26

DevlshOne

8,4671 gold badge31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

eveo Over a year ago

Hey thanks for editing the response, I would have taken a much more pioneered approach.

Collectives™ on Stack Overflow

Trouble loading external html file with jQuery .load

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related