How to change DIV contents in django app

Question

I want to replace the DIV contents with the new contents through ajax GET method. The problem is the whole page is loading into the DIV. But i want to load only new contents.

    function demoButton(){

        var forData = $('#For').text();
        var ageData = $('#Age').text();
        var occasionData = $('#Occasion').text();
        var URL ="http://127.0.0.1:8000/result/?age="+ ageData +"&occasion="+ occasionData +"&relationship="+ forData;

$.ajax({
    type: "GET",
    url: URL,
    success: function (response) {
        $("#testDIV").html(response);
    }
}); 
}

And my DIV block is :

<div id="testDIV"> 
 <ul id="products">
 {% for deal in deals %}
  <li data-price="{{ deal.price }}" > 
   <div class="product" >
          <div class="inner"> 
           <a href="/dailydeals/{{ deal.id }}/"><img src="{{ STATIC_URL }}/images/cimages/{{ deal.image }}" alt="image" style='width:177px;height:175px;' /> </a>
            <div class="similarProd"><a href="#">View similar product</a></div>
            <div class="heart"><a href="/usersl/{{user.id}}/{{ deal.id }}"><span>Engraved plaque fsor your<br>

              girlfriend</span></a></div>

            <div class="quickView"><a href="#qv_form{{ deal.id }}" id="fb_pop">QUICK VIEW</a></div>
            <div class="socialMedia"><a href="#"> <img src="/static/images/like.jpg" alt="Like" /></a></div>
          </div>
          <div class="description" style='width:177px;height:50px;'> <span class="price">{{ deal.price }}</span> {{ deal.description|safe }} <br />
           </div>
           <a href="/usersl/">Add to SL</a>
        </div>
                     </li>
   {% endfor %}
  </ul> 

        </div>

I am developing an e-commerce app based on Django. I want to replace the contents of the DIV with the content got from the server in response from the GET request made to the server. But the problem is whole page is getting loaded into the DIV .

Answer 1

Have your view just return HTML suitable for your div, not a complete page.

For example, if your http://127.0.0.1:8000/result/ URL is only intended to be used from your AJAX call, then have the view for that URL just render a template without the HEAD, BODY tags etc.

You might have a template something like this:

<ul>
  <li>
    {{ object.value }}
  </li>
<ul>

Note that is doesn't extend from base.html or any other template so when the template is rendered, only the template contents you've specified are rendered. There is nothing stopping a user from hitting your URL though, in which case the results returned will not be valid HTML for display in a browser.

There are alternatives. You could serve out the data from your server using JSON in the AJAX response and build up the DOM from the JSON data. Or, you could allow the full page to be served as it is now, and use jQuery to replace the contents of your div with only a subsection of the returned page, something like this:

$('#result-div').load(URL + ' #container-div');

The jQuery load() function allows you to specify a fragment of the loaded HTML to insert into your div. In the above example, the contents of the #container-div element in the served HTML would be inserted into the #result-div . The remainder of the served HTML will be discarded.