Question

A noob question to be sure. I have a template that has several moving parts and I’m looking for direction on the best way to structure this django response.

Consider the template like this:

<div> Display results of complex_calculation_1 + a button to update the data for this div <\div>

<div> Display results of complex_calculation_2 + a button to update the data for this div <\div>

<div> Display results of complex_calculation_3 + a button to update the data for this div <\div>

<div> Display results of complex_calculation_4 + a button to update the whole page <\div>

The output of each calculation is easily saved. Currently, every time a button is pushed, I re-calculate the particular calculation then re-render the whole page which causes many forloop iterations in all of the parts.

I would like to be able to cache each part of the template in an optimal manner (what would that be?), provide a response which updates only the part of the page which needs to be updated and renders the updated page appropriately.

So my question is: how should I proceed to handle this in a manner which would create the greatest efficiency?

Answer 1

Use jquery and ajax to update just the specific part of your template, suppose:

<div>
    <span id="data_1"> Display results of complex_calculation_1 + </span>
    <button class="data_btn" span_id="data_1">Update</button>
<\div>

<script>
 $('.data_btn').click(function(){
    // send post data which you need in `data` variable
    $.ajax({
        type: 'POST',
        url: '{% url 'url_name_for_your_view_here' %}',
        data: {'csrfmiddlewaretoken': '{{csrf_token}}'},
        dataType: "text",
        success: function(response) {
            $($(this).attr('span_id')).text(response.data);
            //where response.data is the data which you want to display
        },
        error: function(rs, e) {
            alert(rs.responseText);
            alert('Oops! something went worng..');
         }
     });
  });
</script>