CODEWITHSUNDEEP
jqueryload
eveo
eveo

Reputation: 2833

Trouble loading external html file with jQuery .load

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

Upvotes: 0

Views: 3199

Answers (1)

DevlshOne
DevlshOne

Reputation: 8457

$(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.

Upvotes: 1

Related Questions