Django template - ajax response - how to?

NachoMiguel Published at Dev

NachoMiguel

After reading a bunch of blogs about this i can not find the answer, also searched in SO as well.

I have a template that use django template tags:

<div class="box" id="dates">
     <h2 class="h2">Dates</h2>
          <ul class="list-group">
                {% for days in dates %}
                <li class="list-group-item list-group-item-success">{{ days }}</li>
                {% endfor %}
          </ul>
</div>

This div waits for an answer that comes from an ajax response. Here is the ajax code:

$("#formi").submit(function(event){
   event.preventDefault();
    var data = new FormData($('form').get(0));

        $.ajax({
             type:"POST",
             url:"{% url 'dates' %}",
             data: data,
             processData: false,
             contentType: false,
             csrfmiddlewaretoken: '{{ csrf_token }}',

             success: function(data){
                 console.log("YEEEEEEEEEEEEEEEEAAAAAAAAAAAHHHHHHHHHHHHHHHHHHHHHHHH")
                 $("#dates").html({{ data.dates }});
                },
        });
   });

Pretty self explainatory. It sends a form to a view and the view responds a json with the data that is going to be used to fill the for loop in the template.

I can see that the data is getting to the template in th console

But as u can see this is not recognizing my {{data.dates}} tag after $("#dates").htmlin the ajax succes

So, how can i still use this django tags in my template and get the data out of the ajax response?

Thanks in advance for any help provided.

ozgur

data is a plain text, not a python variable so you can't print it out within {{ }}. It looks like a JSON object, so you can do the following:

Assuming you have jQuery installed:

$.each(data.dates, function(i, val) {
    $('ul.list-group').empty().append(
        $('<li>').addClass('list-group-item list-group-item-success').text(val)
    )
});

Collected from the Internet

Please contact [email protected] to delete if infringement.