href onclickを使用してDjangoのページをリロードせずにテーブルを更新しますか？

Question

私はリストを持っています国のすべての都市を表示するためのリンクタグとテーブルを使用した国の表示。どのように私はajaxをクリックして国を選択し、djangoでページをリロードせずに、私がテーブルで選択した国のすべての都市を表示することができます。これは私のコードです：

<div class="row"> 
    <div class="col-md-3"> 
     <section class="panel"> 
      <header class="panel-heading"> 
       Country List 
      </header> 
      <div class="panel-body"> 
       {% if country_list %} 
        <ul class="nav prod-cat"> 
         {% for c in country_list %} 
          <li><a href=""><i 
            class=" fa fa-angle-right query-link"></i>{{ c.name }}</a></li> 
         {% endfor %} 
        </ul> 
       {% endif %} 
      </div> 
     </section> 
    </div> 
    <div class="col-md-9"> 
     <section class="panel"> 
      <header class="panel-heading" style="font-size: 20px"> 
       City List 
      </header> 
      <div class="panel-body"> 
       <div class="adv-table"> 
        <form class="form-horizontal" action="{% url 'city_of_country' c.id %}" role="form" 
          method="post" 
          enctype="multipart/form-data"> 
         {% csrf_token %} 
         <div class="form-group last"> 
          <div class="col-md-12"> 
           <div class="adv-table"> 
            <table class="display table table-bordered table-striped" 
              id="dynamic-table"> 
             <thead> 
             <tr> 
              <th>Name</th> 
              <th>Postal Code</th> 
              <th>Address</th> 
             </tr> 
             </thead> 
             {% if city_list %} 
              <tbody> 
              {% for i in city_list %} 
               <tr class="gradeX"> 
                <td>{{ i.name }}</td> 
                <td>{{ i.postal_code }}</td> 
                <td>{{ i.address }}</td> 
               </tr> 
              {% endfor %} 
              </tbody> 
             {% endif %} 
            </table> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </section> 
    </div> 
</div> 

これは私のAJAXコード：アンカータグで

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    jQuery(document).ready(function() { 
     jQuery('a.query-link').on('click', function (e) { 
      e.preventDefault(); 
      alert(); 
      jQuery.ajax({ 
       url: '{% url 'city_of_country' c.id %}', 
       method: POST, 
       data: {id: jQuery(this).data('id')}, 
       success: function (data) { 
        jQuery('#dynamic-table').append(data); 
        alert(data) 
       } 
      }) 
     }) 
    }) 

</script> 

Answer 1

あなたが欠落しているクラス名「クエリリンク」！

<li><a href="" class="query-link"> 
<i class="fa fa-angle-right"></i>{{ c.name }}</a></li>