1

我在模板中有一个 4 列的产品表，表中的每个项目都有一个锚点，onclick如下所示：

<div id="tablepro">
    <table>
        <tr>
        {% for product in cat.products.all %}
            {% if forloop.counter|divisibleby:4 %}
                </tr>
                <tr>
                    <td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
            {% else %}
                    <td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>
            {% endif %}
        {% endfor %}
    </table>
</div>

在remove function我有：

function remove(id)
{
    var URL='{% url CompanyHub.views.catDetails company.webSite,cat.id %}';
    URL+='delpro/'+id+'/';
    $.ajax({
        url:URL,
        type:'POST',
        complete:function(){
            var str='<table><tr>';
            {% for product in cat.products.all %}
                {% if forloop.counter|divisibleby:4 %}
                    str+='</tr><tr>';
                    str+='<td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
                {% else %}
                    str+='<td><center><a href="#" onclick="remove({{product.pk}});">delete</a></br><img style="width:200px;height:200px;" class="magnify" src="{{product.image.url}}" /></center></td>';
                {% endif %}
            {% endfor %}
            str+='</table>';
            $('#tablepro').html(str);
        },
        error:function(){
            alert('Error');
        }
    });
}

在views.py：

def deleteProduct(request,key,cat_id,pro_id):
    try:
        company=Company.objects.get(webSite__iexact=key)
    except Company.DoesNotExist:
        Http404
    cat=Category.objects.get(pk=cat_id)
    if pro_id:
        try:
            product=Product.objects.get(pk=pro_id)
            product.delete()
        except Product.DoesNotExist:
            Http404
    return render_to_response('CompanyHub/Company/%s/cat_details.html'%(company.theme),{'company':company,'cat':cat}, context_instance=RequestContext(request))

正如你所见，我已经返回cat object，现在 aproduct object已从其列表中删除，但我无法在模板中更新我的 Div！听起来cat object模板标签中没有更新。

任何建议表示赞赏

4

2 回答 2

1

请记住，模板是在服务器端编译的，然后将生成的 HTML 传递给客户端。这意味着您在complete函数中（在 ajax 调用中）拥有的模板代码将始终相同 - 换句话说，每次您删除一个元素（并被remove调用）时，您都会再次重新显示所有原始类别，因为在循环中生成的 HTML 在for服务器端创建一次 - 不是异步的

于 2012-04-11T06:20:58.903 回答
1

模板在服务器端编译，浏览器呈现 HTML。

要在 ajax 调用后更新您的 div，您需要在complete方法中使用 javascript 代码更新它。您的服务器端视图可以返回 JSON、XML、HTML 或任何其他数据类型，您的complete方法必须呈现该数据。这是一个示例，complete如果您的服务器端返回部分 h​​tml（即仅表），您的方法应该如何：

complete:function(data) {
        $('#tablepro').html(data);
},
于 2012-04-11T06:30:14.717 回答