このトピックには多くのスタックオーバーフローに関する質問がありますが、私にとってはうまくいくものはありません。AJAX成功後にDivをリフレッシュする
これは、情報を更新するためにdiv
が更新されたときに呼び出されるPHP関数が必要なためです。
私は#tab-project-CD-smt_test
の3つのバージョン(制作、ステージング、最新)を表示しています。ユーザーはステージングまたは最新の横の矢印をクリックしてチェーンの上に移動できます。成功した
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を、リフレッシュしたいと思います:私は、この部分は、AJAX要求を使用して正常に動作しています。抜粋は以下の通りです:
// 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
をリフレッシュするために取得する方法上の任意のアイデアを?
私が見る1つの問題は、あなたのHTMLに少なくとも2回、同じ 'id''配備されているということです。 'makeInfoSection'関数に' id = 'deployed''がハードコードされています。これは、 'id'が一意であると考えられるため、特定のdivを更新しようとするときに問題になります。 – Keeleon
PHPでHTMLをレンダリングするための現在のページをAJAXで読み込むのはかなり一般的です。私はあなたが['.load'](http://api.jquery.com/load/)関数に近いと思いますが、あなたがそれを呼び出すと、ページ全体を読み込もうとします。 load(document.URL + '#deployed'); 'これは、'#deployed' divを取って、現在の '#deployed'のためにinnerHTMLを上書きするだけです。あなたのDOMのdiv。 – romellem
@Keeleon、それは本当に複数回使用されます。 divの '#tab-project-CD-smt_test'の下にあります。だから私はそのdivをリフレッシュしたいと思います。 –