Refresh a django subtemplate with javascript - reload only part of the page

user_6268172 0
Viewed 842

I'm trying to refresh a subtemplate by calling a view with js. Nothing seems to happen, though the server gets hit and seems to return a response.

The goal is to refresh the included part without refreshing the whole page.

Minimal example:

views.py

def ajax_view(request):
    context = {}
    context['data'] = 'data'
    return render(request, "test.html", context)// <-- reaches here, but no rendering

test.html

{{data}}

main.html

<script type="text/javascript">

    function getQuery() {
        var request = new XMLHttpRequest(),
        method = 'GET',
        url = '/ajax/';

        request.open(method, url);
        request.send();
    }
</script>

{% include "test.html" %} // <-- does not update
django javascript
1 Answers

With the help of a friend, I solved this.

I'm going to answer my question with some detail, because I am 100% sure someone is going to need to figure out how to do this later. Happy to save you the trouble.

I had to change my mental model about how this works.

I still send a request to the server with javascript, and the view returns the templated HTML.

However, and this is the important part, what I do is take the rendered HTML (from the response, what is returned with return render(response, "your_template.html", context)) and replace that part of my page with that HTML.

Here's the Javascript.

function getQuery(item) {
  // Sends a request to the API endpoint to fetch data

  let request = new XMLHttpRequest();
  let method = 'GET';
  let query = // omitted

  let url = '/ajax/?' + query;
  request.open(method, url);
  request.onload = function () {
    // the response is the rendered HTML
    // which django sends as return render(response, "your_template.html", context)
    let myHTML = request.response;
    // This is the important part
    // Set that HTML to the new, templated HTML returned by the server
    document.getElementById('flex-container-A').innerHTML = myHTML;
  };
  request.send();
}

and for completeness, here's the view: views.py

def ajax_view(request):
    """
    Server API endpoint for fetching data
    """

    context = {}
    queryset = Form.objects

    if request.method == 'GET':
        query = request.GET.get('q')

        # do some stuff and get some data
    
        context['data'] = data

        return render(request, "my_template.html", context)

Hope this helps you! This is a common pattern but not often mentioned so explicitly.

user_62681720
Related