AJAX成功后刷新Div [英] Refreshing a Div After AJAX Success
问题描述
关于此主题的堆栈溢出问题很多，但似乎没有一个适合我.
There's a lot of Stack Overflow questions on this topic, but none seem to work for me.
这可能是由于我需要刷新div时需要一个PHP函数来更新信息的事实.
This may be due to the fact that I need a PHP function called when the div is refreshed in order for the information to be updated.
我有一个#tab-project-CD-smt_test div，其中显示了三个版本(生产，暂存和最新).用户可以单击暂存或最新暂存旁边的箭头以将其向上移动.通过使用AJAX请求，我可以使这部分工作正常:
I have a #tab-project-CD-smt_test div that shows three versions (production, staging, and latest). The user can click an arrow next to the staging or latest to move it up the chain. I have this part working fine through the use of an AJAX request:
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
});
成功后，我想刷新在我的PHP makeInfoSection中创建的#deployed div.摘录如下:
On success, I would like to refresh the #deployed div, which is created in my PHP makeInfoSection. An excerpt of which is below:
// 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中被调用:
The method is called in the 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中，因此对于它不起作用并不感到惊讶:
So upon the success of the AJAX, I need this to be refreshed. I've tried $('#tab-project-CD-smt_test').load(document.URL); but that doesn't seem to do anything. I've also tried calling the makeInfoSection method but that does not add it to the HTML, so I'm not surprised that it didn't work:
$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的任何想法?
Any ideas on how to get this div to refresh?
推荐答案
@tibsar，您提到#deployed在整个页面中不是唯一的. 虽然您应尽量避免这种情况，但在回答您的问题时，您提到#tab-project-CD-smt_test 是唯一，因此应该适合您的ajax加载.
@tibsar, you mentioned that #deployed isn't unique across your page. While you should try to avoid this, to answer your question, you mentioned that #tab-project-CD-smt_test is unique, so ajax loading that should work for you.
如果您想使用 .load ，请在您的success中尝试此操作回调:
If you'd like to use .load, try this in your success callback:
$('#tab-project-CD-smt_test').load(document.URL + ' #tab-project-CD-smt_test');
让我们知道是否可行.
这篇关于AJAX成功后刷新Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
