title: Refreshing a Div After AJAX Success
body: <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>