如何使用Django模板中的动态DOM元素通过jquery进行Ajax调用？

Question

I have a sidebar that contains a list of user's favorite stores. I would like to be able to click on the store element (eg stores, address) and be able to pull information on that element (eg store sales) and update the sales table called 'txn_table'.

I am gussing I have to pass the store id to the jquery -> Ajax to pull information on the store and then update the DOM.

The issue is different users may have different stores in their list so I can't preassign id tag to each list element. How do I dynamically pass the store_id to activate the AJAx call?

This is the code for the sidebar:

<nav id="sidebar" role="navigation">
    <ul class="nav">
      <li><a href="#" onclick="???">
      {% for store in store_list %}
        <li><a href="#">
        {{ store.name }}
        {{ store.address }}</a>
      {% endfor %}  
      </li>
    </ul>
</nav>

Here is the jquery/AJAX call:

<script>
$(document).ready(function(){

// Submit post on submit
// Typically I would replace a with a id to specify the element selected.
  $('a').on('click', function(event){
      event.preventDefault();
  });

  function update_txns(account_id) {
    $.ajax({
      type: 'GET',
      url:'update_txns', 
      data: 'store_id',
      success: function(result){
        $('txn_table').html(result);
      } 
    });
}});

</script>

Answer 1

That's easy, just add and id to the tag <a> , then the click event would extract that id and you are all set:

<nav id="sidebar" role="navigation">
    <ul class="nav">
      <li><a href="#" onclick="???">
      {% for store in store_list %}
        <li><a class="store-item" id="store_{{ store.id }}" href="#">
        {{ store.name }}
        {{ store.address }}</a>
      {% endfor %}  
      </li>
    </ul>
</nav>

Then your javascript:

<script>
$(document).ready(function(){

// Submit post on submit
// Typically I would replace a with a id to specify the element selected.
  $('.store-item').on('click', function(event){
     event.preventDefault();
     var store_id = $(this).attr('id').split('_')[1];
     // rest of the logic
  });
}});

</script>