How to update load context variable after change in django template via AJAX call?
<p>My Table Items in page <code>customer_items.html</code>:</p>

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

<p>In my main page, I include the customer items page inside it:</p>

<pre><code>&lt;div class="adv-table" id="myTable"&gt;
   {% include 'customer_items.html' %}
&lt;/div&gt;
</code></pre>

<p>I used ajax to update items_list after change customer event run:</p>

<pre><code>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);
            }
        });
    }
</code></pre>

<p>But when I change customer the table still empty although the new items_list has data.</p>

<pre><code>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 &lt; 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'),
</code></pre>

<p>How can I run the load function after the ajax call successfully in the ajax to fill data to my table. Please help me!</p>

<p>In your Ajax function,</p>

<p>use <code>$('#myTable').html(data);</code> instead of <code>$('#myTable').html('').load(data);</code></p>

<p><code>.load()</code> is used for loading files but here you have source code. ;) </p>

javascript jquery python ajax django