CODEWITHSUNDEEP
javascriptjqueryajaxdomreload
user3662516
user3662516

Reputation: 79

Appending DOM elements after page reload on ajax success call

        $.ajax({
        type        : 'POST',
        url         : requesturl,
        data        : data,
        dataType    : 'json',
        success     : function(data) {
            location.reload();
            $('#status').append(
                                // append something here!!
            );
            $('#loader').hide();                
        }
    });

I'm having some issues forcing the page to reload first and then appending my elements. I need this functionality to occur since the page will initialize again on reload and wipe out the elements I'm trying to append.

Upvotes: 0

Views: 773

Answers (2)

vani saladhagu
vani saladhagu

Reputation: 184

you should not use location.reload() here Instead use $('.yoursubClass').remove() and then call append method.

 $.ajax({
        type        : 'POST',
        url         : requesturl,
        data        : data,
        dataType    : 'json',
        success     : function(data) {
            $('#status').find('yourRemovableElements').remove(); //modify yourRemovableElements accordingly 
            $('#status').append(
                                // append something here!!
            );
            $('#loader').hide();                
        }
    });

Upvotes: 0

doctororange
doctororange

Reputation: 11810

Once you call location.reload() it's too late. The scripts won't continue to run after the page has reloaded.

It sounds like you may need to rethink your general approach here. A common approach would be to not use AJAX at all (since you plan to reload the page anyway), or have the server render the page in the desired new state, including whatever you were going to append to it.

Upvotes: 1

Related Questions