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")

I already post my view.py, plz check and help me @CarlBrubaker — Fah Nateecha
– Fah Nateecha, Commented Oct 30, 2018 at 16:16
Are you seeing the correct data in console.log(json.message)? — Will Keeling
– Will Keeling, Commented Oct 30, 2018 at 17:35

Carl Brubaker · Accepted Answer · 2018-10-30 16:32:14Z

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

answered Oct 30, 2018 at 16:32

Carl Brubaker

1,6861 gold badge13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django Send output with Ajax but Javascript doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related