Question

在我的页面中有一个div元素，其中包含MetroUI列表视图：

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

正如您所看到的，有一个数据库SELECT查询填充了listview。我想＆＃34;重新加载＆＃34;当按下列表视图之外的按钮时，此列表视图的内容。怎么做？

Answer 1

使用javascript执行此操作。

在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>';
    }
    return $html;
} else {
    return '<br/><div class="sub-header">Aucun enregistrement</div>';
}

让我们称之为data.php。然后在你的页面加载jQuery（如果你还没有，因为它更容易）并添加以下JS：

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

然后将此JS包装在$(document).ready(function() {})和点击监听器$(btn).click(function(){ })内;

Answer 2

我建议使用AJAX。

使用相关的PHP代码创建一个视图，如下所示：

<?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>';
    }
    ?>

我们称之为list-view.php。

然后在您的页面中添加以下jquery：

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

那会在该div中加载视图。

如果您想在按下按钮时重新加载该内容，可以为该按钮添加点击处理程序：

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

如何重新加载＆＃34;一个div的内容？

2 个答案: