在Ajax成功调用上重新加载页面后追加DOM元素

Question

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

Answer 1

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.

Answer 2

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();                
        }
    });