View in php and javascript files - MVC - php

Question

This is a .php file that creates a table.
<table id="contact-messages">
<thead>
<tr>
<th>Username</th><th>Category</th><th>Message</th><th>Created at</th>
</tr>
</thead>
<tbody>
<?php
foreach ($contact_messages as $message) {
echo '<tr>'
. '<td>' . htmlentities($message['username']) . '</td>'
. '<td>' . htmlentities(ucfirst($message['category'])) . '</td>'
. '<td>' . nl2br(htmlentities($message['message'])) . '</td>'
. '<td class="created-at" data-created_at="' . htmlentities($message['created_at']) . '"></td>'
. '</tr>';
}
?>
</tbody>
</table>
And this is the .js file for that page. This code changes the content of the table.
$.get("contact-messages.php", { "category": category }, function (data) {
$("#contact-messages").find("tbody").empty(); // Empty the old messages.
for (var i = 0; i < data.length; i++) {
$("#contact-messages").find("tbody")
.append(($("<tr/>")
.append($("<td/>", { text: ((data[i].username === null) ? '' : data[i].username) }))
.append($("<td/>", { text: data[i].category }))
.append($("<td/>", { text: data[i].message }))
.append($("<td/>", {
text: data[i].created_at,
class: 'created-at',
'data-created_at': data[i].created_at
}))
));
}
}, 'json');
So, every time that I want to change the structure of the table I have to change the .php and .js files.
Now, the questions is, Is there any way to store the structure of the table in one file and every times that I want to change the structure, I just change that file?

Answer 1

Create all html in php page and call this php page using $.ajax request and finally use response coming from the ajax request with appropriate method $("#contact-messages").html(reponse) / $("#contact-messages").append(response) / $("#contact-messages").prepend(response).

Answer 2

You can use only ajax as #jQuery Angry Bird said and you should note that it would be better if you do call .append() or .html() just once and not in a loop (to reduce the execution time a little bit)
$.get("contact-messages.php", { "category": category }, function (data) {
$("#contact-messages").find("tbody").empty(); // Empty the old messages.
var tmpStr = '';
for (var i = 0; i < data.length; i++) {
tmpStr = '';
tmpStr+='<tr>';
tmpStr+='<td>'+(data[i].username === null) ? '' : data[i].username)+'<td/>';
tmpStr+='<td>'+data[i].category+'</td>'
tmpStr+='<td>'+data[i].message+'<td>'
tmpStr+='<td class="+created-at+" data-created_at="++">'+data[i].created_at+'</td>'
tmpStr+='</tr>';
}
//call .html() once instead of .append() data.length*5 times
$("#contact-messages").find("tbody").html(tmpStr);
}, 'json');