Question

关于这个主题有很多Stack Overflow问题，但似乎没有一个对我有用。

这可能是因为我需要在刷新div时调用的PHP函数才能更新信息。

我有一个#tab-project-CD-smt_test div，显示三个版本（生产，登台和最新版本）。用户可以单击分段或最新旁边的箭头将其向上移动。通过使用AJAX请求，这部分工作正常：

    function sendToStaging (dir, type, subtype, version) {
        //Need selected category, selected type, selected subtype 
        $.ajax({
            type: 'POST',
            url: 'configs.php',
            data: 'function=sendToStaging'+'&dir='+dir+'&type='+type+'&subtype='+subtype+'&version='+version, 
            success: function() {
//                 window.location.reload(true);
                $('#deployed').load(document.URL);
            }
        });

    };

    function sendToProduction (dir, type, subtype, version) {
        //Need selected category, selected type, selected subtype 
        $.ajax({
            type: 'POST',
            url: 'configs.php',
            data: 'function=sendToProduction'+'&dir='+dir+'&type='+type+'&subtype='+subtype+'&version='+version
        });

成功之后，我想刷新#deployed div，它是在我的PHP makeInfoSection中创建的。摘录如下：

// list latest, staging, production
$html .= '<h4>Deployed Versions</h4>';
$html .= '<ul class="list-group" id="deployed">';

$html .= '<li class="list-group-item">';
$html .= '<span class="badge">production</span>';
$html .= $production.'</li>';

$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><a href="#" style="color:orange"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true" onclick="sendToProduction('."'$dir', '$type', '$subType', '$staging'".')"></span></a></span>';


$html .= '<span class="badge">staging</span>';
$html .= $staging.'</li>';

$html .= '<li class="list-group-item">';
$html .= '<span class="badge"><a href="#" style="color:orange"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true" onclick="sendToStaging('."'$dir', '$type', '$subType', '$latest'".')"></span></a></span>';



$html .= '<span class="badge">latest</span>';
$html .= $latest.'</li>';
$html .= '</ul>';

在HTML中调用该方法：

<div class="col-md-5 col-md-push-1 col-sm-6">
        <div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em">
            <?php
                foreach ($project_types as $type) {
                    // @TODO remove once folder structure is all setup
                    if ($type !== 'CD') continue;

                    foreach ($project_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-project-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }

                foreach ($workflow_types as $type) {
                    foreach ($workflow_subtypes[$type] as $subType) {
                        $html = "<div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-workflow-".$type."-".$subType."'>";
                        $html .= makeInfoSection($type, $subType, $workflow_versions[$subType], $workflow_dir);
                        $html .= "</div>";
                        echo $html;
                    }
                }
            ?>
        </div>
    </div>
</div>

因此，在AJAX成功之后，我需要刷新它。我试过$('#tab-project-CD-smt_test').load(document.URL);，但似乎没有做任何事情。我也试过调用makeInfoSection方法，但是没有将它添加到HTML中，所以我对它不起作用并不感到惊讶：

$approved_functions = array('sendToProduction', 'sendToLatest', 'sendToStaging');
if(array_key_exists('function', $_POST) && in_array($_POST['function'], $approved_functions)) {
    // call the approved function
    $dir = $_POST['dir']; 
    $type =  $_POST['type']; 
    $subType = $_POST['subtype']; 
    $version = $_POST['version']; 
    $_POST['function']($dir, $type, $subType, $version);
    makeInfoSection($type, $subType, $versions, $dir); 
}

有关如何刷新div的任何想法？

Answer 1

@tibsar，您提到#deployed在您的网页上并不是唯一的。 While you should try to avoid this，为了回答您的问题，您提到#tab-project-CD-smt_test 是唯一的，因此ajax加载应该适合您。

如果您想使用.load，请在success回调中尝试此操作：

$('#tab-project-CD-smt_test').load(document.URL + ' #tab-project-CD-smt_test');

如果有效，请告诉我们。

AJAX成功后刷新Div

1 个答案: