Refreshing a Div After AJAX Success
<p>There's a lot of Stack Overflow questions on this topic, but none seem to work for me.</p>

<p>This may be due to the fact that I need a PHP function called when the <code>div</code> is refreshed in order for the information to be updated.  </p>

<p>I have a <code>#tab-project-CD-smt_test</code> 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: </p>

<pre><code>    function sendToStaging (dir, type, subtype, version) {
        //Need selected category, selected type, selected subtype 
        $.ajax({
            type: 'POST',
            url: 'configs.php',
            data: 'function=sendToStaging'+'&amp;dir='+dir+'&amp;type='+type+'&amp;subtype='+subtype+'&amp;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'+'&amp;dir='+dir+'&amp;type='+type+'&amp;subtype='+subtype+'&amp;version='+version
        });
</code></pre>

<p>On success, I would like to refresh the <code>#deployed</code> div, which is created in my PHP <code>makeInfoSection</code>. An excerpt of which is below: </p>

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

$html .= '&lt;li class="list-group-item"&gt;';
$html .= '&lt;span class="badge"&gt;production&lt;/span&gt;';
$html .= $production.'&lt;/li&gt;';

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


$html .= '&lt;span class="badge"&gt;staging&lt;/span&gt;';
$html .= $staging.'&lt;/li&gt;';

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



$html .= '&lt;span class="badge"&gt;latest&lt;/span&gt;';
$html .= $latest.'&lt;/li&gt;';
$html .= '&lt;/ul&gt;'; 
</code></pre>

<p>The method is called in the HTML: </p>

<pre><code>&lt;div class="col-md-5 col-md-push-1 col-sm-6"&gt;
        &lt;div id="tabs" class="tab-content" style="padding:0em 0em 0em 1em"&gt;
            &lt;?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 = "&lt;div role ='tabpanel' class='tab-pane'";
                        $html .= "id='tab-project-".$type."-".$subType."'&gt;";
                        $html .= makeInfoSection($type, $subType, $project_versions[$subType], $project_dir);
                        $html .= "&lt;/div&gt;";
                        echo $html;
                    }
                }

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

<p>So upon the success of the AJAX, I need this to be refreshed.  I've tried <code>$('#tab-project-CD-smt_test').load(document.URL);</code> but that doesn't seem to do anything.  I've also tried calling the <code>makeInfoSection</code> method but that does not add it to the HTML, so I'm not surprised that it didn't work: </p>

<pre><code>$approved_functions = array('sendToProduction', 'sendToLatest', 'sendToStaging');
if(array_key_exists('function', $_POST) &amp;&amp; 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); 
}
</code></pre>

<p>Any ideas on how to get this <code>div</code> to refresh?</p>