Django Send output with Ajax but Javascript doesn't work

Question

I want to query the database and show the result don't refresh the page. So I use the Ajax! But when I append or paste the html code, the javascript isn't work. The style of my table is so ugly.

This is table html part that output will be here (ID=output) :

<div class='fresh-table' id="output">
    <div class='toolbar'>
        <button type='button' id='alertBtn' class='btn btn-info'>Add To Cart</button>
    </div>
    <table id='fresh-table' class='table'>
        <thead>
            <th data-field='state' data-checkbox='true'></th>
            <th data-field='id' data-sortable='true'>id</th>
            <th data-field='name' data-sortable='true'>candidate</th>
            <th data-field='salary' data-sortable='true'>salary</th>
            <th data-field='gpa' data-sortable='true'>gpa</th>
            <th data-field='position'>position</th>
            <th data-field='actions' class='td-actions text-right' data-formatter='operateFormatter' data-events='operateEvents'>Actions</th>
        </thead>
        <tbody>
            {% for candidate in Candidate %}
            <tr data-val='{{candidate.id_number}}'>
                <td></td>
                <td><a href='/filter/{{candidate.id_number}}/' style='color: #ff9800; font-weight: 400;'>{{candidate.id_number}}</a></td>
                <td>{{ candidate.name_title }} {{candidate.firstname}} &nbsp&nbsp {{candidate.lastname}}</td>
                <td>{{candidate.salary}}</td>
                <td>{{candidate.nowEdu_gpa}}</td>
                <td>{{candidate.position}}</td>
                <td></td>
            </tr>
            {% endfor%}
        </tbody>
    </table>
</div>

This is Ajax in template:

$.ajax({
    type: 'POST',
    url: 'testajax/',
    dataType: "json",
    async: true,
    data: {
        filter_option: json_filter_option,
        operator_position: json_operator_position,
        filter_position: json_filter_position,
        csrfmiddlewaretoken: "{{ csrf_token }}"
    },
    success: function(json) {
        console.log(json.message)
        html = "<div class='toolbar'> <button type='button' id='alertBtn' class='btn btn-info'>Add To Cart</button></div><table id='fresh-table' class='table'><thead><th data-field='state' data-checkbox='true'></th><th data-field='id' data-sortable='true'>เลขประจำตัวประชาชน</th><th data-field='name' data-sortable='true'>ชื่อผู้สมัคร</th><th data-field='salary' data-sortable='true'>เงินเดือนที่คาดหวัง</th><th data-field='gpa' data-sortable='true'>เกรดเฉลี่ยสะสม</th><th data-field='position'>ตำแหน่งที่สมัคร</th><th data-field='actions' class='td-actions text-right' data-formatter='operateFormatter' data-events='operateEvents'>Actions</th></thead><tbody>";
        $.each(json.message, function(index, candidate) {
            html += "<tr data-val='" + candidate[0] + "'><td></td><td><a href='/filter/" + candidate[0] + "/' style='color: #ff9800; font-weight: 400;'>" + candidate[0] + "</a></td><td>{{ candidate.name_title }} {{candidate.firstname}} &nbsp&nbsp {{candidate.lastname}}</td><td>{{candidate.salary}}</td><td>{{candidate.nowEdu_gpa}}</td><td>{{candidate.position}}</td><td></td></tr>";
        });
        html += "</tbody></table>";
        $('#output').html(html);
    }
})

Please help me. This project is so important for me.

The style of table that I use is from : https://www.creative-tim.com/product/fresh-bootstrap-table

This is my view.py

def test_ajax(request):
    if request.method == 'POST':
        print("Entryy")
        filter_option = json.loads(request.POST.get('filter_option'))

        operator_position = json.loads(request.POST.get('operator_position'))
        filter_position = json.loads(request.POST.get('filter_position'))
        print("filter_option",filter_option)
        print("operator_position",operator_position)
        print("filter_position",filter_position)

        all_candidate = CandidateBasic.objects.all().values_list('id_number')
        response_data = {}
        try:
            response_data['result'] = "Success"
            response_data['message'] = list(all_candidate)
            print(response_data)

        except Exception as e:
            response_data['result'] = "Fail"
            response_data['message'] = "Fail!"
    return HttpResponse(json.dumps(response_data), content_type="application/json")

Answer 1

This might just be a start, but in your AJAX $.each, you populate a lot of data but don't actually do anything with it. All you put into your page HTML is your html, which doesn't appear to have any view context in it. Maybe you want to consider using JsonResponse instead of HttpResponse