Refreshing a Div After AJAX Success

Question

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 PHP makeInfoSection. 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 the makeInfoSection 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?

One issue I see is that you will have the same `id` `deployed` at least twice in your HTML. The `makeInfoSection` function has `id='deployed'` hard coded into it. This will be a problem when you are attempting to update a specific div because `id`s are supposed to be unique. — Keeleon, Mar 21 '16 at 14:27
AJAX loading of the current page you are on to get some PHP rendered HTML is fairly common. I think you are close with the [`.load`](http://api.jquery.com/load/) function, but when you call it, I believe it tries to load the whole page. Per its documentation, you can try `$('#deployed').load(document.URL + ' #deployed');` This should only take the `#deployed` div and overwrite the innerHTML for your current `#deployed` div in your DOM. — romellem, Mar 21 '16 at 14:27
@Keeleon, that's true it is used multiple times. It's under the div `#tab-project-CD-smt_test`. So I suppose I would want to refresh that div. — Sara Fuerst, Mar 21 '16 at 14:30
@tibsar That would work, yes. It's acting as a parent (container) div to your `deployed` div anyway. Consider using a class for your deployed divs instead. — Keeleon, Mar 21 '16 at 14:35
@romellem Please add your comment as an answer, with a bit more detail and sample code, so OP can accept as answer (or at least upvote) — cssyphus, Mar 21 '16 at 14:39

score 4 · Accepted Answer · edited Apr 12 '17 at 07:31

4

@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.

edited Apr 12 '17 at 07:31

Community

1
1

answered Mar 21 '16 at 15:33

romellem

5,792
1
32
64

I use your answer but when load the div id or class automatically add another same div . so can you help me for this? – Harshil Parekh Sep 06 '17 at 12:08
hey @H_Parekh check this answer https://stackoverflow.com/a/58165233/646922 – dickwan Nov 18 '19 at 09:20

Refreshing a Div After AJAX Success

1 Answers1

Linked