Metio_1993 Metio_1993 - 28 days ago 11
HTML Question

HTML tables with different ID's are receiving sames value form AJAX callback

This problem has driven me crazy!! Here is the situation, I have a callback data from my AJAX post method that I need to pass to different HTML table there will be 7 different tables. I have achieve to receive my data from the controller with the different objects.Earlier today i have made my first table which was working great, but when I want to pass value to different table with different data again from the ajax callback data both the table are receiving the same value even if the ID' are different even if there is no ID on the second one... Honestly this have driven me crazy.

Here is my AJAX post METHOD with the callback data:

$(document).ready(
function() {
$('#call_back_btn').click(function() {
$.post("/app_dev.php/AjaxSearch", {
person_name: $('#input_text').val()
},
function(data) {

objConnectors = data[0];
objContacts = data[1];
var ParseConnector = JSON.parse(objConnectors);
var ParseContacts = JSON.parse(objContacts);
var cycles;

for (cycles = 0; cycles < ParseConnector.length; cycles++) {
$('tbodyCONNECTOR').append('<tr>' + ParseConnector[cycles].id + '</td><td>' + ParseConnector[cycles].n_c + '</td><td>' + ParseConnector[cycles].description + '</td></tr>');
}

for (cycles = 0; cycles < ParseContacts.length; cycles++) {
$('tbodyCONTACT').append('<tr>' + ParseContacts[cycles].id + '</td><td>' + ParseContacts[cycles].n_c + '</td><td>' + ParseContacts[cycles].description + '</td></tr>');
}
}


As you can see there appends are different

Here is the HTML :

div class="bs-example" data-example-id="panel-without-body-with-table">
<div class="panel panel-default">
<div class="panel-heading">Available connectors</div>
<table id="Connectors">
<thead>
<tr>
<th>12NC</th>
<th>Description</th>
</tr>
</thead>
<tbody id="tbodyCONNECTOR">

</tbody>

</table>
</div>
</div>

<div class="bs-example" data-example-id="panel-without-body-with-table">
<div class="panel panel-default">
<div class="panel-heading">Available Contacts</div>
<table id="Contacts">
<thead>
<tr>
<th>12NC</th>
<th>Description</th>
</tr>
</thead>
<tbody id="tbodyCONTACT">

</tbody>
</table>
</div>
</div>


Here are the two tables.
The value that I get is always the first value so: ParseConnector
I'll highly appreciate any help!!!

Answer
$('tbodyCONNECTOR').append("..."); 

and

$('tbodyCONTACT').append("...");

are missing the hash symbol.

Try with $('#tbodyCONNECTOR').append("...");

Same goes for tbodyCONTACT