View in php and javascript files - MVC

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?

Ypu should use ajax only for both Opening table and closing.why u need php + js /? use ajax only — Pratik Joshi
– Pratik Joshi, Commented Nov 7, 2014 at 16:53
Simplest solution? Don't spit your data out as json. Have your PHP code build the full html and then it's a simple matter of $('#contact-messages').load('contact-messages.php'). If you DO need the individual bits of data kept separate, then do send json, but include a full copy of the html and use that in a .html() call to replace the original table. — Marc B
– Marc B, Commented Nov 7, 2014 at 16:53
@jQueryAngryBird But how? If I use ajax only it has to send two request for the first time that it loads. (one for opening the page and the other for ajax request.) — Milad
– Milad, Commented Nov 7, 2014 at 17:12
@MarcB But I want that it sends one request the first time that it loads. (and also I want that replace the content with JSON). That's how Google works! One request for the first time. and the rest is JSON. — Milad
– Milad, Commented Nov 7, 2014 at 17:44

Pankaj Kumar · Accepted Answer · 2014-11-07 17:05:36Z

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).

answered Nov 7, 2014 at 17:05

Pankaj Kumar

946 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ismnoiet · Accepted Answer · 2014-11-07 17:25:27Z

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');

Collectives™ on Stack Overflow

View in php and javascript files - MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related