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
– Quentin, Commented Feb 21, 2015 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 xhr.spec.whatwg.org. But I get also the message: XHR finished loading: GET .... — gillesC
– gillesC, Commented Feb 21, 2015 at 22:40
Try $.load() instead of $.get(). Are you aware that both (and also $.post() are just short forms of the $.ajax() method? — cssyphus
– cssyphus, Commented Feb 21, 2015 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
– gillesC, Commented Feb 21, 2015 at 22:46

Community · Accepted Answer · 2017-05-23 12:20:26Z

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, 2017 at 12:20

CommunityBot

11 silver badge

answered Feb 21, 2015 at 22:55

cssyphus

40.4k20 gold badges104 silver badges125 bronze badges

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

9 Comments

gillesC Over a year ago

I've tried both your answers but it still loads the current page shopping-list.html instead of the screenshots.html.

cssyphus Over a year ago

I reproduced it exactly on my end, removing the bootstrap and jquery-extra stuff, and it seems to work. Try this.

cssyphus Over a year ago

In fact, what I meant to say was that your original code seems to work. something else is going on.

gillesC Over a year ago

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!

cssyphus Over a year ago

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.

|

gillesC · Accepted Answer · 2015-02-22 13:33:51Z

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>

Collectives™ on Stack Overflow

How to load html page in div using AJAX and JQuery

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related