How to "reload" a div's content?

Question

In my page there is a div element containing a MetroUI listview :

    ...
    <div id="listSalles" class="listview">
        <?php
        $ret = ReservationSalle::lireParCritere([]); // database SELECT query
        if ($ret->count() > 0) {
            $html = '';
            foreach ( $ret as $key => $val ) {
                $html .= '<div class="list" id="salle_'.$ret[$key]->salle_code.'_'.$ret[$key]->flag_reserver.'">
                            <span class="mif-bookmarks list-icon"></span>
                            <span class="list-title">'.$ret[$key]->salle_lib.'</span>
                            <span class="place-right"><button id="reservS_'.$ret[$key]->salle_code.'" class="button default">R&eacute;server</button></span>
                            <br/>
                            <span class="sub-title">'.$ret[$key]->reserver.'</span>
                          </div>';
            }
            echo $html;
        }
        else {
            echo '<br/><div class="sub-header">Aucun enregistrement</div>';
        }
        ?>
    </div>
    ...

As you can see there is a database SELECT query which populates the listview. I want to "reload" this listview's content when a button , outside of the listview , is pressed. How to do that ?

Answer 1

Use javascript to do so.

In your PHP script put your current code:

$ret = ReservationSalle::lireParCritere([]); // database SELECT query
if ($ret->count() > 0) {
    $html = '';
    foreach ($ret as $key => $val) {
        $html .= '<div class="list" id="salle_' . $ret[$key]->salle_code . '_' . $ret[$key]->flag_reserver . '">
                    <span class="mif-bookmarks list-icon"></span>
                    <span class="list-title">' . $ret[$key]->salle_lib . '</span>
                    <span class="place-right"><button id="reservS_' . $ret[$key]->salle_code . '" class="button default">R&eacute;server</button></span>
                    <br/>
                    <span class="sub-title">' . $ret[$key]->reserver . '</span>
                  </div>';
    }
    return $html;
} else {
    return '<br/><div class="sub-header">Aucun enregistrement</div>';
}

Lets call it data.php. Then in your page load jQuery (if you havent yet, because it's easier) and add the following JS:

$.ajax({
    type: 'GET',
    url: 'data.php'
}).done(function (result) {
    $("#listSalles").html(data); //Here you replace the current content with the update
}, "html");

And then wrap this JS in $(document).ready(function() {}) and inside a click listener $(btn).click(function(){ });

Answer 2

I suggest using AJAX.

Make a view with the relevant php code for the task, like this:

<?php
    $ret = ReservationSalle::lireParCritere([]); // database SELECT query
    if ($ret->count() > 0) {
        $html = '';
        foreach ( $ret as $key => $val ) {
            $html .= '<div class="list" id="salle_'.$ret[$key]->salle_code.'_'.$ret[$key]->flag_reserver.'">
                        <span class="mif-bookmarks list-icon"></span>
                        <span class="list-title">'.$ret[$key]->salle_lib.'</span>
                        <span class="place-right"><button id="reservS_'.$ret[$key]->salle_code.'" class="button default">R&eacute;server</button></span>
                        <br/>
                        <span class="sub-title">'.$ret[$key]->reserver.'</span>
                      </div>';
        }
        echo $html;
    }
    else {
        echo '<br/><div class="sub-header">Aucun enregistrement</div>';
    }
    ?>

Let's call it list-view.php.

Then in your page, add the following jquery:

$("#listSalles").load("list-view.php");

That would load the view inside that div.

If you want to reload that content when you press a button you could add a click handler for that button:

$("#id_of_button").click(function(){ $("#listSalles").load("list-view.php"); });