爲什麼我的AJAX不能使用Django？

我有一個頁面，是基本符合項出售店面。我在導航欄中有一些過濾器來過濾產品。當我點擊一個過濾器時，我試圖通過AJAX加載與該過濾器相關的產品（無需刷新頁面）。目前，當我點擊一個過濾器時，商店商品消失，但不會重新填充相關商品。我收到的Chrome瀏覽器開發控制檯以下錯誤：爲什麼我的AJAX不能使用Django？

Uncaught TypeError: Cannot read property 'ownerDocument' of undefined jquery.2.1.1.min.css

我不知道這是怎麼回事，我一直跟着教程http://westiseast.co.uk/blog/django-ajax-update-queryset-introduction/，這實在是過時的，所以我不知道如果我的問題可能是與使用依賴於不推薦使用的庫或實踐的教程相關（我使用的是Django 1.6）。

任何幫助將不勝感激。

VIEWS.PY

def storefront(request): 
    latest_entries = Entry.objects.order_by('-pub_date')[:16] 
    context = {'latest_entries': latest_entries} 

if request.is_ajax(): 
    if request.GET.get('filter') == 'recent': 
     new_list = [] 
     latest_entries = Entry.objects.filter(entrytype=3) 
     new_list.append(render_to_string('storefrontload.html', {'latest_entries': latest_entries})) 
     json = simplejson.dumps(new_list, cls=DjangoJSONEncoder) 
     return HttpResponse(json, content_type='application/json') 
return render(request, 'storefront.html', context)

URLS.PY

urlpatterns = patterns('', 
    url(r"^$", home), 
    url(r"^storefront/", storefront))

STOREFRONT.HTML

<a href="" id=most_recent>Show Recent</a> 

{% include "storefrontload.html" %} 

<script> 
function filter(type) { 
$.getJSON("/storefront/", {xhr: "true", filter: type}, 
    function(data) { 
    $('.container').children().remove(); 
    $(data).appendTo('.container'); 
    }); 
} 

$("#most_recent").click(function() { 
    filter("recent"); 
    $('#most_recent').attr('style', 'font-weight: bold').css('color', '#000'); 
}); 
return false; 
</script>

STOREFRONTLOAD.HTML

<div class="bodydiv"> 
    <div class="container"> 
    {% for i in latest_entries %} 
     <div class="grid_4"> 
     <div class="imgcontainer"> 
      <img src="{{ i.item_picture.url }}" alt="" /> 
      <div class="overlayname">{{ i.headline }}</div> 
      <div class="overlayprice">{{ i.price1 }}</div> 
      </div> 
     <div class="textcontainer"> 
     <p>{{ i.body_text }}</p> 
     </div> 
     <div class="sellerdiv"> 
     <div class="sellerpic"><a href="/accounts/{{ i.author }}"><img src="{{ i.author.get_profile.get_mugshot_url }}"></a></div> 
     <div class="sellerinfo">Sold by <b>{{ i.author }}</b></div> 
     <div class="hearts"><img src="/static/img/stars.png"></div> 
     <div class="reviewnum"></div> 
     <div class="posteddate">Posted {{ i.pub_date|timesince|upto:',' }} ago</div> 
     </div> 
    </div> 
    {% endfor %}

來源

2014-11-25 stephan

你能提供被調用過濾器時返回的HTML/JSON的例子嗎？此外，只是作爲一個說明，我不會理會的HTML轉換成JSON作爲你的代碼正在與HTML單獨工作，這也許可以解釋你看到 – justcompile 2014-11-25 11:34:43

'$的開發控制檯錯誤（「＃most_recent」）。點擊（函數（E）{e.preventDefault（）;' – madzohan 2014-11-25 11:41:17

也進行序列化使用'simplejson.dumps'使用'latest_entries = Entry.objects.filter（entrytype = 3）.values（ 'some_field1'， 'some_field2'， '等'，）''my_json = mark_safe（simplejson.dumps（名單（latest_entries），ensure_ascii = FALSE））' – madzohan 2014-11-25 11:46:57

你不需要JSON實際上，只返回部分HTML

if request.is_ajax(): 
    if request.GET.get('filter') == 'recent': 
     latest_entries = Entry.objects.filter(entrytype=3) 
     context = {'latest_entries': latest_entries} 
     return render(request, 'storefrontload.html', context) 
return render(request, 'storefront.html', context)

和HTML：

function filter(type) { 
    $.get("/storefront/?filter="+type, function(data) { 
    $('.container').children().remove(); 
    $(data).appendTo('.container'); 
    }); 
}

來源

2014-11-25 11:42:44 doniyor

該作品！？完全有使用Ajax實現此類功能的任何優勢，我不知道我可以調用一個新的查詢，而無需刷新頁面（不使用AJAX） – stephan 2014-11-25 20:23:35

@ Dr.Donnaloia是的AJAX是非常好的事情。拿看看這裏：http://stackoverflow.com/questions/2583223/w帽子是最優勢 - 和劣勢 - 的決策阿賈克斯通話，使用，jquery的 – doniyor 2014-11-25 20:40:20

爲什麼我的AJAX不能使用Django？

回答

相關問題