CODEWITHSUNDEEP
javascriptjquery
Jimmy
Jimmy

Reputation: 12487

Content loading with Ajax and Jquery

I would like some content to be loaded into my div on page load, but then I would like to have buttons which will load up new content, and replace the content in the DIV currently.

This is my HTML:

<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>

This is my Javascript:

$(document).ready(function(){
    $('#aboutlink').click(function(){
        $('#contentbox').load('/includes/about-info.html');
    });
    $('#testlink').click(function(){
        $('#contentbox').load('/includes/test-info.html');
    });
})

http://jsfiddle.net/spadez/GCg4V/1/

I just wondered what I have done wrong, because when I tried this on my server it didn't load up any content. I was also wondering if there is a better way to achieve something like this, because it doesn't seem like I can do any loading binding to it.

Thank you for any help or advice you can give.

Upvotes: 0

Views: 142

Answers (4)

Nono
Nono

Reputation: 7302

Okay then run this code to check what happening out there:

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>

<script>    
    $(document).ready(function () {
        $('#aboutlink').click(function () {
            $('#contentbox').load('/includes/about-info.html', function(response, status, xhr){
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });
        $('#infolink').click(function () {
            $('#contentbox').load('/includes/test-info.html', function(response, status, xhr){
                if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    $("#error").html(msg + xhr.status + " " + xhr.statusText);
                }
            });
        });

    })  
</script>
<a id="aboutlink" href="#">About</a>
<a id="infolink" href="#">Info</a>
<div id="contentbox">Starting content</div>
<div id="error"></div>

Upvotes: 0

PJR
PJR

Reputation: 443

I think its something to do with how you have specified the urls for the load. Try something like 

$(document).ready(function () {
$('#aboutlink').click(function () {
        $('#contentbox').load('includes/about-info.html');
    });
    $('#infolink').click(function () {
        $('#contentbox').load('includes/test-info.html');
    });
})

without the leading "/"

Upvotes: 0

Miro Markaravanes
Miro Markaravanes

Reputation: 3366

The load method will only set the html of the first matched element if the status is (200 OK).. If it is something other than this, like (404 Not Found) or (403 Forbidden) , then it won't set the html..

To set it regardless of the response, try this jsFiddle I edited.

Upvotes: 1

Mentok
Mentok

Reputation: 597

First try something like this:

$.get('/includes/test-info.html', data, function(data){alert(data);})

And then you'll be able to see exactly what is being returned.

Upvotes: 1

Related Questions