Insert a php page into div with ajax call (jquery)

Question

This question is more about "good pratices" than a real problem; I just started with php and jquery, but I would know more in details what I'm doing and why.

What I'm trying to get: catch user request (with a form), query database and then show result in a table. All using ajax call and jquery.

Now, I have my controller.php:

class Controller {
public $model;
public function __construct() {
    $this->model = new Model ();
}

public function run() {
    $action = isset ( $_REQUEST ["action"] ) ? $_REQUEST ["action"] : $action = "home";

    switch ($action) {
        case "home" :
            //doing stuff
            break;
        case "search" :
            //this function will take arguments then perform a query and return results.
            $result = $this->search();

            //I put $result into a $prod field of my model.
            $this->model->prod = $result;

            //then I would display acquired data into a table.
            echo include 'view/include/result-table.php';
            break;
    }
}

function search() {
    //query DB etc..
}

}

And this is my table (view/include/result-table.php), I would like insert this into a div in my page.

            <?php
        if (isset ( $this->model->prod )) {
            if (count ( $this->model->prod ) == 0) {
                echo "<h4 class=\"info\"> No product find";
            } else {
                ?>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Descr</th>
                    <th>Qty</th>
                </tr>
            </thead>
            <tbody>
            <?php
                foreach ( $this->model->prod as $p ) {
                    echo "<tr><td> $p->id </td>";
                    echo "<td>" . ucfirst ( $p->name ) . "</td>";
                    echo "<td>" . ucfirst ( $p->descr ) . "</td>"
                    // and so on..
                }
                ?>
            </tbody>
        </table>

        <?php
            }
        }
        ?>

Problem 1: the "echo include "view/include/....php" seems to echoes also a 1 (a digit) at the end of the page (or the div). Why?

"Problem 2": This is working pretty well, but I'm not sure that is the correct way to do this. Are there any other solutions to query a DB and display results in a div, with only jquery/ajax request? (I don't want a page refresh every time). Maybe something that can speed up responses and/or improves security.

Thank you very much!

Answer 1

I don't know how to add a comment and keep formatting... anyway:

Thanks for your reply.

I didn't understand the last part, right now I have my ajax call:

$('#submit-btn').click(function(event) {

event.preventDefault(); 

$.get("index.php", {action : "search" , data : mydata }).done(function(data) {
$('#result').html(data); 

});

Removing echo the 1 disappeared, but I don't understand the flag you're talking about and what I should encode. The page I want to append? Only the result of query?

After querying DB, I update my model with new values (coming from db) and then I want to show updated table, in this way will I see the modified table? I hope my question is clear... :)

Thanks a lot!

Answer 2

For problem 1: include does not require an echo. Its including the content and the echos are inside the included php file. So the echo include is actualy echoing the result of include, which is true or 1 by success.

problem 2: You are right, ajax would be a solution without refreshing the whole page. All you need to do is to make an ajax request to your php script which returns just the html content you want to replace and append this result to your html dom. jQuery has lots of functions for both making ajax calls and appending the result in your html dom.

A good practice is not to return the raw html content and just append it to your site because if something went wrong you might receive error codes from php or warnings or even mysql errors which is bad to show on your website of course. So in order to tell your ajax request that the result is the expected one just send over a status flag with value true. A good way to do this is by sending the result as json encoded string like this:

{
    status : true,  //shows you your call was successfull
    html : "your result html to place on your site"
}

Only if your ajax call returns the correct status (true) everything went well and you can insert it in your page.