如何通过AJAX调用在django模板中更改后更新加载上下文变量?

时间:2016-09-05 13:11:50

标签: javascript jquery python ajax django

customer_items.html页中的我的表格项目:

<table id="tblData" style="width: 100% !important;"
       class="display table table-bordered table-striped table-condensed">
    <thead>
    <tr>
        <th style="display: none">Item ID</th>
        <th>Name</th>
        <th>Supplier Code</th>
        <th>Location Code</th>
        <th>Part Number</th>
        <th>Part Group</th>
        <th>Unit Price</th>
        <th>Currency</th>
        <th style="display: none">Location ID</th>
        <th style="display: none">Currency ID</th>
        <th style="display: none;">Line ID</th>
        <th style="display: none;">UOM</th>
        <th style="display: none;">Supplier ID</th>
        <th></th>
    </tr>
    </thead>
    {% if items_list %}
        <tbody>
        {% for i in items_list %}
            <tr class="gradeX" id="{{ i.line_id }}">
                <td style="text-align: right; display: none;">{{ i.item_id }}</td>
                <td style="text-align: left">{{ i.item_name }}</td>
                <td style="text-align: left">{{ i.supplier_code }}</td>
                <td style="text-align: left">{{ i.location_code }}</td>
                <td style="text-align: left">{{ i.part_no }}</td>
                <td style="text-align: right;">{{ i.part_gp }}</td>
                <td style="text-align: left">{{ i.sales_price }}</td>
                <td style="text-align: left;">{{ i.currency }}</td>
                <td style="text-align: right; display: none;">{{ i.location_id }}</td>
                <td style="text-align: right; display: none">{{ i.currency_id }}</td>
                <td style="text-align: right; display: none">{{ i.line_id }}</td>
                <td style="text-align: right; display: none">{{ i.uom }}</td>
                <td style="text-align: right; display: none">{{ i.supplier_id }}</td>
                <td><input type="checkbox" name="choices"
                           id="{{ i.line_id }}"
                           class="call-checkbox"
                           value="{{ i.sales_price }}"></td>
            </tr>
        {% endfor %}
        </tbody>
    {% endif %}
</table>

在我的主页面中,我在其中包含客户项目页面:

<div class="adv-table" id="myTable">
   {% include 'customer_items.html' %}
</div>

我在更改客户事件运行后使用ajax更新items_list:

function customer_items(hdCustomerId) {
        $.ajax({
            method: "POST",
            url: '/orders/change_customer_items/',
            data: {
                'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val(),
                'customer_id': hdCustomerId,
            },
            responseTime: 200,
            response: function (settings) {
                if (settings.data.value) {
                    this.responseText = '{"success": true}';
                } else {
                    this.responseText = '{"success": false, "msg": "required"}';
                }
            },
            success: function (data) {
                debugger;
                console.log(data);
                $('#myTable').html('').load(data);
            }
        });
    }

但是当我更改客户时,表格仍然是空的,尽管新的items_list包含数据。

views.py:
def customer_items(request):
    if request.method == 'POST':
        if request.is_ajax():
            customer_id = request.POST.get('customer_id')
            items_list = CustomerItem.objects.filter(customer_id=customer_id).values() \
                .annotate(supplier_code=F('item__supplieritem__supplier__code')) \
                .annotate(supplier_id=F('item__supplieritem__supplier')) \
                .annotate(location_code=F('customer__company__location__code')) \
                .annotate(location_id=F('customer__company__location__id')) \
                .annotate(custome_name=F('customer__name')) \
                .annotate(item_id=F('item_id')) \
                .annotate(item_name=F('item__name')) \
                .annotate(part_no=F('item__part_no')) \
                .annotate(part_gp=F('item__part_gp')) \
                .annotate(uom=F('item__sales_measure__name')) \
                .annotate(currency=F('currency__code')) \
                .annotate(currency_id=F('currency_id')) \
                .annotate(line_id=Value(0, output_field=models.CharField()))
            for i, j in enumerate(items_list):
                if (i < items_list.__len__()):
                    i += 1
                    j['line_id'] = i
        return render(request, 'customer_items.html', {'items_list': items_list})
urls.py:
url(r'^change_customer_items/$', views.customer_items, name='change_customer_items'),

如何在ajax成功调用ajax之后运行load函数来将数据填充到我的表中。请帮帮我!

1 个答案:

答案 0 :(得分:0)

在Ajax函数中,

使用$('#myTable').html(data);代替$('#myTable').html('').load(data);

.load()用于加载文件,但这里有源代码。 ;)