CODEWITHSUNDEEP
javascriptjqueryhtmlajax
gillesC
gillesC

Reputation: 749

How to load html page in div using AJAX and JQuery

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>

Upvotes: 1

Views: 2094

Answers (2)

gillesC
gillesC

Reputation: 749

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>

Upvotes: 0

cssyphus
cssyphus

Reputation: 40030

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

Upvotes: 1

Related Questions