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

KevsAI 0
Viewed 26

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

treeview django-models django json
1 Answers

You can use ajax. In your template write the ajax code. In your view render json from your object. If you need an example let me know, its not very hard to do.

Simple example but you get the point:

Put this in your template:

$.ajax({
  url: url,
  type: "GET",
  dataType: "json",
  success: (data) => {
    console.log(data);
  },
  error: (error) => {
    console.log(error);
  }
});

Make a view with request and render json

   if request.method == 'GET':
        objects = list(YourModel.objects.all().values())
        return JsonResponse({'context': objects})

Dont forget to put the url in your urls.py

saro0
Related