重建的$ .ajaxt

我的產品在模板中的4列的表格功能齊全div標籤的內容，在表中每個項目都有與onclick這樣一個錨：在remove function

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

我有：

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，現在product object已從列表中刪除，但我無法使我的DIV在模板中更新！聽起來像cat object尚未在模板標記中更新。

任何建議表示讚賞

來源

2012-04-11 Asma Gheisari

模板在服務器端編譯並且瀏覽器呈現HTML。

要在ajax調用後更新您的div，您需要使用方法中的javascript代碼更新它。您的服務器端視圖可以返回JSON，XML，HTML或任何其他數據類型，並且您的方法必須呈現該數據。這裏是你的complete方法應該什麼樣子，如果你的服務器端返回的HTML部分（即只是表）的例子：

complete:function(data) { 
     $('#tablepro').html(data); 
},

來源

2012-04-11 06:30:14 Irfan

TNX，現在我想要TU建立相同的字符串在視圖，並返回它this：return HttpResponse（simplejson.dumps（str），mimetype ='application/html'），但我不知道如何在views.py中做到這一點，例如我有這樣的模板str：src =「{ {product.image.url}}，但是我應該怎麼做views.py？ – 2012-04-11 07:16:13

只需製作另一個模板並將其作爲HttpResponse – Irfan 2012-04-11 07:23:25

返回即可，但我聽起來像{{product.image.url}}或{{ product.name}}沒有被渲染！會不會介意給我更多的方向？ – 2012-04-11 07:34:01

記住，模板被編譯在服務器端，然後將生成的HTML被傳遞到客戶端。這意味着您的complete函數（在ajax調用中）中的模板代碼將始終保持不變 - 換句話說，每次刪除元素（並調用remove）時，都會再次顯示所有原始類別，因爲在for循環內生成的HTML在服務器端創建一次 - 不是異步的

來源

2012-04-11 06:20:58

回答

相關問題