Django Ajax and Looping over Response

Question

I currently have the following template,

{% extends "123/123-base.html" %}
{% block main %}

    <script type="text/javascript">
        $(document).ready(function() {
            $("#button").click(function() {
                    var host = $("#hostinput").val();
                    var record = $("#recordinput").val();
                    $.ajax({
                        url : "/lookup_ajax",
                        type : "POST",
                        dataType: "json",
                        data : {
                            hostinput : host,
                            recordinput : record,
                            csrfmiddlewaretoken: '{{ csrf_token }}'
                            },
                        success : function(json) {
                                $('#mainsection').append( "response" + json.response );
                            },
                        error : function(xhr,errmsg,err) {
                                alert(xhr.status + ": " + xhr.responseText);
                            }
                    });
                    return false;
            });
        });
    </script>

    <div id="mainsection">
    <div id="maininput" class="input-append">
        <form method="post" name="inputlookup" action="/lookup_ajax">
        {% csrf_token %}
            <input class="span2" id="hostinput" name="hostinput" type="text">
            <select title="Record" id="recordinput" name="recordinput" >
                <option value="A">A</option>
                <option value="MX">MX</option>
                <option value="Cname">Cname</option>
            </select>
            <button id="button" class="btn" type="submit">Lookup</button>
        </form>
    </div>
    <div id="mainouput">
    </div>
    </div>
{% endblock %}

However the response I receieve back from the server I want to loop over using the Django template tags, like this,

{% extends "123/123-base.html" %}
{% block main %}
        {% if error %}
            {{ error }}
        {% else %}
        <ul>
            <table class="table table-style table-striped">
            <thead>
            <tr>
                <th>HOSTNAME</th>
                <th>TTL</th>
                <th>CLASS</th>
                <th>TYPE</th>
                <th>DETAILS</th>
            </tr>
            </thead>
            {% for answer in response %}
                <tr>
                {% for field in answer %}
                    <td>{{ field }}</td>
                {% endfor %}
            </tr>
            {% endfor %}
            </table>
        </ul>
        {% endif %}
{% endblock %}

Any ideas on how this should be done ?

Thanks,

Answer 1

It looks to me like you're returning a JSON object for your AJAX call. If that's correct then django doesn't come into it for displaying the result. You'd need to change your success function to something like the following:

success: function(json){
    // Table header
    var table = $('<table>').addClass('table table-style table-striped');
    var thead = $('<thead>');
    var headrow = $('<tr>');
    var head1 = $('<th>').text('HOSTNAME');
    var head2 = $('<th>').text('TTL');
    var head3 = $('<th>').text('CLASS');
    var head4 = $('<th>').text('TYPE');
    var head5 = $('<th>').text('DETAILS');
    $(headrow).append(head1, head2, head3, head4, head5);
    $(thead).append(headrow);
    $(table).append(thead);

    // table body
    var tbody = $('<tbody>');
    num_answers = json.length
    for (i = 0; i < num_answers; i++) {
        var row = $('<tr>');
        var cell1 = $('<td>').text(json[i][0]);
        var cell2 = $('<td>').text(json[i][1]);
        var cell3 = $('<td>').text(json[i][2]);
        var cell4 = $('<td>').text(json[i][3]);
        var cell5 = $('<td>').text(json[i][4]);
        $(row).append(cell1, cell2, cell3, cell4, cell5);
        $(tbody).append(row);
    }
    $(table).append(row);
    $('#mainsection').append(table);
}