How to "reload" a div's content? - php

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é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é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é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"); });