jQuery fadeIn div after page reload

Question

i have a form that stores user data via an ajax call.

On success i normally have a div fade in with a success message. However i want to reload the page so that the page is updated, and then fade in the success message.

I was using a .load() to update the div, and then toggle the form to hide itself etc. But the .load was causing some other js scripts to not work after it was called etc so for now im going to just reload the page.

However, i want to show the success message div after the page has been reloaded.

This is an example:

    if (check) {
    $.ajax({
    type: "POST",
    url: "process/updateuserpref.php",
    data: $('.updatepref').serialize(),
    dataType: "json",
    success: function(response){

    if (response.updatePrefSuccess) {
        location.reload();
        $('#successdisplay').fadeIn(1000);
        $('#successdisplay').delay(2500).fadeOut(400);
    }

    }
    });
    }

I know obviously the

     $('#successdisplay').fadeIn(1000);
     $('#successdisplay').delay(2500).fadeOut(400);

Doesnt currently work, but any help on how i can do what i want?

Thanks, Craig.

Answer 1

Instead of simple reloading you could sent a GET variable with the reload, then check if the GET variable exist show the success message if not, do nothing

I do the same thing, so this is how I do it:

intead of reload() I do:

window.location.href = document.location.protocol +"//"+ document.location.hostname + document.location.pathname + '?success=1';

Then in my PHP script I do a conditional output:

<?php if( $isset( $_GET['success'] ) && $_GET[ 'success' ] == 1 )  { ?> 
    <div id="successdisplay">
        Changes performed Successfully
    </div>
<?php }?>