Upon running the code below, a GET message is displayed in the Firebug Console. However, the variable appears as undefined, most likely due to its limited scope within the function.
The objective here is to click on a table row, fetch relevant data from the server pertaining to that specific record, populate certain sections of a web form, add additional information, and finally submit the form (refer to image).
The JavaScript function presented below assigns the value of $id as the data attribute ('recordID') of the respective rows, which was initially passed into the <tr> tag during table generation.
Javascript:
$(document).on('click', 'tr', function() {
//Get the ID from the row clicked
var $id = $(this).data('recordId');
//short-hand
$('#section2').load('data_entry_form.php?id='+id);
});
PHP snippet containing the data attribute:
<table = "all_aifs">
<tr>
<th><b>Document ID</b></th>
<th><b>Pubco Name</b></th>
<th><b>Filing Date</b></th>
<th><b>PDF</b></th>
</tr>
<?php foreach($result as $index => $row) : ?>
<tr data-recordId="<?=$row[fee_source_id];?>"
class="<?=$row["match"] ? "match" : "";?>">
<td><?php echo $row[fee_source_id]; ?></td>
<td><?php echo $row[company_name_per_sedar]; ?></td>
<td><?php echo $row[document_filing_date]; ?></td>
<td></td>
</tr>
<? endforeach;?>
</table>
Question: How can I capture data related to the clicked row within my web form using AJAX? Additionally, why does the variable appear as "undefined" in the Console? Shouldn't it be defined as the $id variable (which corresponds to the recordId)?