Django - フォーム提出時にdivを再ロード

Question

フォームが提出されたときに、djangoアプリケーションで特定のdivをリフレッシュしようとしています。

index.htmlを

<div class="col-md-8" id="notesColumn"> 
    {% crispy note_form %} 
    {% include 'item/item_notes.html' %} 
</div> 

item_notes.html

<div class="panel-group panel-group-simple m-b-0" id="notesList" aria-multiselectable="true" role="tablist"> 
    {% for note in object.itemnote_set.all reversed %} 
     <div class="panel"> 
      <div class="panel-heading" id="noteHeading{{ forloop.counter }}" role="tab"> 
       <a class="panel-title collapsed" data-parent="#notesList" 
        data-toggle="collapse" href="#noteCollapse{{ forloop.counter }}" 
        aria-controls="noteCollapse{{ forloop.counter }}" aria-expanded="false"> 
        <span class="tag tag-default">{{ note.owner.first_name }}</span> 
        {{ note.get_action_display|upper }} 
        <small class="panel-actions">{{ note.date_added }}</small> 
       </a> 
      </div> 
      <div class="panel-collapse collapse" id="noteCollapse{{ forloop.counter }}" 
       aria-labelledby="noteHeading{{ forloop.counter }}" role="tabpanel" aria-expanded="false" 
       style="height: 0px;"> 
       <div class="panel-body"> 
        {{ note.content }} 
       </div> 
      </div> 
     </div> 
    {% endfor %} 
</div> 

app.js（index.htmlの中に含まれる）

$(document).ready(function() { 
    $("#notesTab form").submit(function(event){ 
     event.preventDefault(); 

    $('#notesList').remove(); 

    $.ajax({ 
    url: "{% url item_notes %}", 
    success: function(data){ 
     $('#notesColumn').html('data'); 
    } 
    }) 
}) 

views.py

def item_notes(request): 
    return render_to_response(request, 'candidate/candidate_notes.html') 

urls.py

url(r'item/profile/(?P<pk>[0-9]+)/$', views.ItemProfile.as_view(), name='item_profile'), 
    url(r'item/notes', views.item_notes, name='item_notes'), 

私はクロムから取得するエラーは、次のとおりです。

http://127.0.0.1:8000/crm/item/profile/45/%7B%%20url%20item_notes%20%%7D 
Failed to load resource: the server responded with a status of 404 (Not Found) 

Answer 1

あなたの外部JSファイルでDjangoのテンプレートタグを使用することはできません - Djangoはある、そのファイルを解析しませんリテラルタグがAjax URLに追加されているのがなぜ分かりますか？

テンプレート自体のインラインスクリプト内にグローバルJS varとしてその値を設定する必要があります。

Answer 2

まず、それがエラーを起こしURLだ場合、確認するために絶対URLを使用するようにしてください：

$.ajax({ 
    url: "item/notes", 
    success: function(data){ 
     $('#notesColumn').html('data'); 
    } 
    }) 

あなたはノートのURLをGETなぜ第二に、？あなたは 'item_profile'を使っていませんか？その場合には、そのURLをGETしよう：

$.ajax({ 
    url: "item/profile/" + "{{ object.pk }}", 
    success: function(data){ 
     $('#notesColumn').html('data'); 
    } 
    }) 

第三に、あなたのJSコードをチェックし、あなたは$("#notesTab form").submitに閉じ括弧が欠落しています。

第4に、URLをエスケープしてみてください。私はJSでどのメソッドを使うべきか分かりませんが、エスケープされていないコードのために何度も問題が発生しました。

これは私の頭の上のほんの一部です。希望が役立ちます。