Dynamically load data into a Django Template from a Django Modal without page refresh

Question

I have the following Django model and I use the first 3 fields to generate a tree-view in the template as shown below.

class operationTemplates(models.Model):
    templateID = models.IntegerField(primary_key = True)
    templateCategory = models.CharField(max_length=255, blank=True, null=True)
    templateName = models.CharField(max_length=400, blank=True, null=True)
    templatePreopBundle = models.TextField( blank=True, null=True)
    templateIndication = models.TextField( blank=True, null=True)
    templatePosition = models.TextField( blank=True, null=True)
    templateProcedure = models.TextField( blank=True, null=True)
    templateClosure = models.TextField( blank=True, null=True)
    templatePostOpInstructions = models.TextField( blank=True, null=True)

                                <!-- tree view -->
                                <ul class="tree">
                                    <li>
                                        <input type="checkbox" id="c0" />
                                        <label class="tree_label" for="c0">Vascular Surgery</label>
                                        <ul>
                                            {% for k, v in group.items %}
                                            <li>
                                              <input type="checkbox"  id="c{{forloop.counter}}" />
                                              <label for="c{{forloop.counter}}" class="tree_label">{{ k }}</label>
                                              <ul>
                                                  {% for x in v %}
                                                    <li><span class="tree_label"><a href="{{ x.templateID }}">{{ x.templateName }}</a></span></li>
                                                  {% endfor %}
                                              </ul>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </li>
                                </ul>
                                <!-- tree view end-->

Tree-View generated dynamically using date from the above modal

When the user clicks on a particular leaf of the tree, I want to be able to query and display all the fields relevant to that record from the Danjo Model without a page refresh.

What is the best way to achieve this? Do I need to use JSON/JavaScript? Or is there an elegant way to do it just with Django and HTML?

Thanks in advance

Answer 1

Append your response to your div

$("button").click(function() {
    //get the templateID
    var templateID = $(this).val();

    // GET AJAX request
    $.ajax({
        type: 'GET',
        url: "{% url 'loadSelectedTemplate' %}",
        data: {"templateID": templateID},
        success: function (response) {

            // display the template loaded from AJAX
            var instance = JSON.parse(response["template"]);
            var fields = instance[0]["fields"];
            console.log(fields);
           ===>$("#opnoteTextArea")opnoteTextArea.append(fields)
           

        },
        error: function (response) {
            console.log(response)
        }
    })
});