How to load html page in div using AJAX and JQuery

Question

I'm trying to load an HTML page in a div with AJAX. I have the following code

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
    <div id="wrapper">
        {% include "header.html" %}

        <div id="content">

            <div class="jumbotron">
                <div class="container">
                    <h2 class="text-center">MOMENTEEL IN VOLLE ONTWIKKELING</h2>
         {% block content %}{% endblock %}
                </div>
            </div>

             <button>Toon de Screenshots!</button>

            <div id="loadHere"></div>
    </div>

    <div class="push"></div>
    <a href="#" class="back-to-top hidden-sm hidden-xs"><span class="glyphicon glyphicon-chevron-up pull-right top"></span></a>


   {% include "footer.html" %}

</div>




<script src="../static/js/bootstrap.js"></script>
<script src="../static/js/jquery-extra.js"></script>

<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get('screenshots.html').success(function(data)
 {
     $('#loadHere').html(data);
 });
    });
});
</script>


</body>

Don't mind the Django (python framework) code. When I click on the button it should display the screenshots.html page in de the div but it doesn't... Instead it loads the current page. I've also tried the load function, but with no success. Extra info: I'm running my django-website on localhost.

Screenshots.html code:

<div class="container">
                <div class="push"></div>
                <div class="page-header">
                    <h2>Screenshots</h2>
                </div>
                <div class="row">
                <div class="col-md-3 col">
                        <img src="../media/Shopping-list/2014-09-02 10.08.11.png"/>
                    </div>
                    <div class="col-md-3 col">
                     <img src="../media/Shopping-list/2014-09-02 10.08.17.png"/>
                 </div>
                 <div class="col-md-3 col">
                    <img src="../media/Shopping-list/2014-09-02 10.08.31.png"/>
                </div>
                <div class="col-md-3 col">
                    <img src="../media/Shopping-list/2014-09-02 10.08.40.png"/>
                </div>
            </div>

        </div>

Looks like it should work. Look at your browser's developer tools. Look at the JavaScript console. Does it report any errors? Look at the Net tab. Is the request being made? Does it get a response? Do they contain the data you expect? Look at the DOM inspector, is the HTML being added to the DOM? (Maybe the images are just failing to load) — Quentin, Feb 21 '15 at 22:28
Thanks for the fast reply! The request has being made but I'm getting a message in the console: @Quentin Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/. But I get also the message: XHR finished loading: GET .... — gillesC, Feb 21 '15 at 22:40
Try `$.load()` instead of `$.get()`. Are you aware that both (and also `$.post()` [are just short forms of the `$.ajax()` method](http://stackoverflow.com/questions/3870086/difference-between-ajax-and-get-and-load)? — cssyphus, Feb 21 '15 at 22:44
@gibberish Jup I know. But as I said I've tried the load function, the result I got was that the current page had been loaded in the div instead of the 'screenshots.html'... — gillesC, Feb 21 '15 at 22:46

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

After comment discussion, it appears the problem is related to framework or other code, as the stripped down code posted above works satisfactorily once django, bootstrap and jquery-extra.js were removed.

Sources:

Selector load vs get

edited May 23 '17 at 12:20

Community

1
1

answered Feb 21 '15 at 22:55

cssyphus

37,875
18
96
111

I've tried both your answers but it still loads the current page shopping-list.html instead of the screenshots.html. – gillesC Feb 21 '15 at 22:58
I reproduced it exactly on my end, removing the bootstrap and jquery-extra stuff, and it seems to work. [Try this.](http://cssyphus.com/cv/sotest.php) – cssyphus Feb 21 '15 at 23:27
In fact, what I meant to say was that **your original code** seems to work. something else is going on. – cssyphus Feb 21 '15 at 23:35
Maybe it is because I use the django-framework (would be odd but you never know) or maybe a localhost problem. But thank you very much for your contribution! – gillesC Feb 21 '15 at 23:39
Glad to help. Now that you've seen them, I'll remove those test pages in the next little while. Good luck on your project. – cssyphus Feb 21 '15 at 23:55
After your help I was able to solve the problem, it was indeed a 'problem' with the framework. Thank you! – gillesC Feb 22 '15 at 13:34
Thanks for the feedback. It would be great if you accepted this as the correct answer, then. And keep the questions coming. – cssyphus Feb 22 '15 at 21:03
ah I've posted to solution so others with the same problem could solve it too. So I thought that would be the 'accepted answer'. I would give you an upvote but I'm new to StackOverflow and I'm not able to upvote answers (requires 15 reputations) ... – gillesC Feb 23 '15 at 07:14
Exactly the right thing to do. Thanks gillesC, and good job. Please remember to come back in a couple of days to mark your answer as the accepted answer. Good luck with your project. – cssyphus Feb 23 '15 at 12:15

score 0 · Accepted Answer · answered Feb 22 '15 at 13:33

The problem was indeed with the Django-framework. My solution:

In view.py of my application I added the following code to def current_page:

if request.is_ajax():
        return render_to_response("screenshots.html",
                              locals(),
                              context_instance=RequestContext(request)
                             )

The current_page is the page where the button is located, in my case it is def shop(request) (shopping-list.html). So when I've an ajax request from that page he gives the screenshots.html as data. This isn't the optimal way to do it, but it works! :D

My jQuery script:

<script>
$(document).ready(function(){
 $("button").click(function(){
  $('#loadHere').load('screenshots');
  });
});
</script>

How to load html page in div using AJAX and JQuery

2 Answers2