AJAX成功后刷新Div

问题描述：

关于此主题有很多堆栈溢出问题，但没有一个对我有用。AJAX成功后刷新Div

这可能是由于我需要刷新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格，这是我的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刷新任何想法？

我看到的一个问题是，您将在HTML中至少两次具有相同的'id'''''部署。 'makeInfoSection'函数将'id ='deployed''硬编码到它中。当您尝试更新特定的div时，这会是一个问题，因为'id's应该是唯一的。 – Keeleon

为获得一些PHP呈现的HTML，当前页面的AJAX加载非常常见。我认为你已经接近['.load']（http://api.jquery.com/load/）函数，但是当你调用它时，我相信它会尝试加载整个页面。根据它的文档，你可以试试'$（'＃deployed'）。load（document.URL +'#deployed'）;'这应该只带''deployed' div并覆盖当前'#define'的innerHTML div在你的DOM。 – romellem

@ Keeleon，这是真的，它被多次使用。它在div＃tab-project-CD-smt_test下。所以我想我会想刷新那个div。 –

答

@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');

让我们知道，如果工程。

我使用你的答案，但当加载div id或类自动添加另一个相同的div 。所以你能帮助我吗？ –

AJAX成功后刷新Div

相关推荐