I have the following jQuery code
$(document).ready(function () {
$('.data').each(function (i) {
alert('Test' + i);
$(.data #forceclock).click(function () {
console.log('Done');
var id = $('employee_id').attr('value');
$.ajax({
'type': 'POST',
'data': { employee_id: id },
'datatype': 'text',
'success': function (textStatus) {
alert("Successfully logged out a user!" + textStatus);
location.reload();
},
'error': function (textStatus) {
alert("failure" + textStatus);
},
'url': '/clockoutjs',
'cache': false
});
return false;
});
});
});
The HTML is the following:
<table class="table table-striped table-bordered table-condensed table-hover">
<thead>
<tr>
<th style="text-align: center">Employee Name</th>
<th style="text-align: center">Employee ID</th>
<th style="text-align: center">Clocked In</th>
<th style="text-align: center"># of Clock ins</th>
<th style="text-align: center"><a id="tooltip" data-toggle="tooltip" data-placement="top"
title="As of last clock out in hours!">Total Clocked Time
Today</a>
</th>
<th style="text-align: center">Time Since Last Checkin</th>
<th style="text-align: center">Force clock out</th>
</tr>
</thead>
{% for log in logs %}
<tr id="data">
<th style="text-align: center">{{ log.employee_name }}</th>
<th class="employee_id" stlye="text-align: center"> {{ log.employee_id }}</th>
<th style="text-align: center">{{ log.clocked_in|last }}</th>
<th style="text-align: center">{{ log.clocked_in|length }}</th>
<th style="text-align: center">{{ log.total_time|floatformat:2 }} Hours</th>
<th style="text-align: center">{{ potential_times.0|floatformat:2 }} Hours</th>
<th style="text-align: center"><div class="forceclock"><a href="#" class="btn btn-danger">Clock out!</a></div>
</th>
</tr>
{% endfor %}
</table>
The click function makes an ajax request to the server that should clockout a user. Unfortunately I'm not able to supply the proper id nor create the click function for every button I've created.
How do I generate the click function for every element that was created in that table and make take the #employee_id
from that <tr id="data">
?
I'm using webapp2 and GAE to generate the content.