Referencing a anchor tag in ajax

Question

I am getting an Array of items with jinja2 from a database in an <a> tag, item[0] represent an id while item[1] is an attribute (e.g name).
I would like to make reference to the id in my ajax call so if I click anything in my anchortag it makes reference to the id, now once I click anything in my anchortag, everything just runs with no reference to id

HTML

{% for item in people %}
   <a id="foo" class="foo">{{item[1]}}</a>
{% endfor %}

JAVASCRIPT/AJAX

{% for item in people %}

$(".foo").click(function(evt) {
$.ajax({
 url: "/~s6/cgi-bin/people.py",
 async: true,
 type: "post",
 datatype:"json",
 data: {'peopleid': {{item[0]}}},
      success: function(result) {
        console.log(result)
        //console.log(result.peopleinfo.surname)
       // console.log(result.peopleinfo.othernames)
        console.log(result.familyinfos)

         html = "<table class='table table-striped table-bordered table-condensed'>" + "<tr><th>Old Name</th><td>" + result.peopleinfo.surname  + "</td></tr>"' + "<table>"

$('#infoTab').html(html)

 $("#placenameModal").modal("show");
      }

  });


  });
 {% endfor %} 

Answer 1

You could add the information you need in data attributes.

{% for item in people %}
    <a id="foo" class="foo" data-people-id="{{item[1]}}" data-people-name="{{item[1]}}">{{item[1]}}</a>
{% endfor %}

Then just get the data you need when an anchor is clicked.

function anchorClickHandler(evt) {
    var anchor = $(this)[0];                    // get the anchor DOM element, unwrapped from jQuery
    var peopleId = anchor.dataset.peopleId;     // get the peopleId from the data attribute
    var peopleName = anchor.dataset.peopleName; // you can do the same with the name, if you want
    $.ajax({
        url: "/~s6/cgi-bin/people.py",
        async: true,
        type: "post",
        datatype: "json",
        data: {
            'peopleid': peopleId,   // pass in the peopleId from the specific anchor that was clicked.
        },
        success: function(result) {
            console.log(result)
            // console.log(result.peopleinfo.surname)
            // console.log(result.peopleinfo.othernames)
            console.log(result.familyinfos)

            html = '<table class="table table-striped table-bordered table-condensed">' +
                        '<tr>' +
                            '<th>Old Name</th>' +
                            '<td>' + result.peopleinfo.surname + '</td>' +
                        '</tr>' +
                    '</table>'

            $('#infoTab').html(html)
            $("#placenameModal").modal("show");
        }

    });
}

$(".foo").on('click', anchorClickHandler);

It's also a decent idea to define your handlers outside of the actual assignment.
If you were to define your handlers in a loop, then a copy of your handler would get bound instead of the handler itself.

While you won't notice a difference on smaller pages, it does not scale well at all and can affect performance on larger pages.

Answer 2

Perhaps something like this:

HTML

{% for item in people %}
   <a id="{{item[0]}}" class="foo">{{item[1]}}</a>
{% endfor %}

Javascript

$(document).on('click', '.foo', handleClick)
function handleClick(e) {
  $.ajax({
    url: "/~s6/cgi-bin/people.py",
    type: 'POST',
    data: {
      peopleid: $(this).attr('id')
    },
    success: handleModal
  })
}
function handleModal(response) {
  // Do stuff here with your response
}