jQuery - AJAX load() method isn't working

Question

I'm trying to load a HTML file into a div section, but the load() method doesn't seem to work as when I click the link, the html file opens in a new tab instead of loading into the div tag.

The script:

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(){
                $('#main-content').load($(this).attr("href"));
                return false;
            });
        });
</script>

The 'a' tag:

<li><a href="about.html">ABOUT</a></li>

Where I want my html file to be loaded:

<div class="col-sm-9 blog-main" id="main-content">
...
</div>

How do I make the load() method work?

I'm using Chrome on Windows.

Try ./about.html Maybe problem similar to this: http://stackoverflow.com/questions/10605200/load-and-relative-paths — Maju, Aug 28 '16 at 07:14

Developer · Answer 1 · 2016-08-28T08:09:41.640

1

That's the default behavior of a tag. Instead of setting the html.file to be loaded in href attribute, its better to keep it in custom attribute.

 <a href="#" data-page="about.html">ABOUT</a>

And in JavaScript,

<script type="text/javascript">
    $(document).ready(function(){
        $('a').click(function(e){
            e.preventDefault();
            $('#main-content').load($(this).attr("data-page"));
            return false;
        });
    });
</script>

Plunker sample

edited Aug 28 '16 at 08:09

answered Aug 28 '16 at 07:26

Developer

5,545
2
16
24

It works, there is one bug - preventDefault() instead of Defaults – Maju Aug 28 '16 at 07:31
it didn't work for me. I don't know why. I've tried it on IE as well. – Marco Aug 28 '16 at 07:34
This should be not problem of the browser. – Maju Aug 28 '16 at 07:34
1

Check in network tab whether the html path is correct or is it returning 404 – Developer Aug 28 '16 at 07:36
apparently, it was the browser's problem. I switched to Firefox and it works perfectly now. – Marco Aug 28 '16 at 08:37
I dont think so...works for me in chrome as well..but there isnt anything browser specific here..did you try that plunker in other browser? – Developer Aug 28 '16 at 08:39

Dev. Joel · Answer 2 · 2016-08-28T07:38:37.210

try about.html ensure that the file is in the root of the project

<li><a href="./about.html">ABOUT</a></li>
<div class="col-sm-9 blog-main" id="main-content"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script type="text/javascript">

$(document).ready(function(){
        $('a').click(function(event){
            event.preventDefault();
            $('#main-content').load($(this).attr("href"));
            return false;
        });
    });
</script>

score 0 · Answer 3 · answered Aug 28 '16 at 07:31

You can use preventDefault to stop default action of the event to triggered.

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(event){
                event.preventDefault();
                $('#main-content').load($(this).attr("href"));
                return false;
            });
        });
</script>

score 0 · Answer 4 · answered Aug 28 '16 at 18:58

<script type="text/javascript">
        $(document).ready(function(){
            $('a').click(function(){
                $('#main-content').load($(this).attr("href") + ' #elementSelectorThatYouWantToLoad');
                return false;
            });
        });
</script>

You have to specify an DOM element that you want to load like,

$('#main-content').load($(this).attr('about.html #body');

jQuery - AJAX load() method isn't working

4 Answers4