Refreshing a Div After AJAX Success
@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.
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');
Let us know if that works.
Sara Fuerst
I am the Founder and Lead Developer of Tibsar Software LLC. I have always had a passion for software development. Today I use this passion to help aspiring business owners build their software based business. I focus on creating quality software products that can scale with their business and meet their unique needs.
Updated on June 14, 2022Comments
-
Sara Fuerst almost 2 years
There's a lot of Stack Overflow questions on this topic, but none seem to work for me.
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.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 });
On success, I would like to refresh the
#deployed
div, which is created in my PHPmakeInfoSection
. 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>';
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>
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 themakeInfoSection
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); }
Any ideas on how to get this
div
to refresh? -
H_Parekh over 6 yearsI use your answer but when load the div id or class automatically add another same div . so can you help me for this?
-
dickwan over 4 yearshey @H_Parekh check this answer stackoverflow.com/a/58165233/646922