CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Mohini Jamdade
Mohini Jamdade

Reputation: 488

How to show message in div after ajax success and location.Reload()

In ajax success call I am doing location.Reload(). After Page reloads I want to show a Message that "Data Uploaded Successfully,". But my page gets reloaded and message get discarded.

var data = {
    "strSelectedIds": selectedArray.join(',')
};
var countofProcessedRecords = selectedArray.length;
$("#divLoader").removeClass("display-none");
$.ajax({
    url: UrlSettings.ProcessSubscriptioData,
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "html",
    data: JSON.stringify(data),
    success: function (response) {
        location.reload();
        $("#msg").append(
            '<div class="alert alert-success hideit alertSuc">' + countofProcessedRecords + 'subscriptions uploaded successfully.</div >')
        setTimeout(function () {
            $("#divLoader").addClass("display-none");
        }, 500);

    },
    error: function (e) {
        $("#divLoader").addClass("display-none");
    }
});

Can anyone please help me with this.

Thank you in advance..

Upvotes: 0

Views: 5212

Answers (4)

Zahra Badri
Zahra Badri

Reputation: 2034

That can have some delay before you reload the page. like this:

$.ajax({
    type: 'POST',
    url: 'url',
    data: { id: id },
    success: function() { 
        $('#alertMessage').html('<p>success message</p>'); 
        setTimeout(function(){
           location.reload(); 
        }, 800);
    }
});

Upvotes: 0

testovic
testovic

Reputation: 51

I think you shoud use load() instead of location.reload() because load() will display the content you want in a div while location.reload will refresh whole your page Here they're some examples for load() : In HTML code :

<div id="display-content"></div>

In Jquery you will need something like this :

$("#display-content").load().fadeIn("fast");

And as you can also load files inside load() for example :

var id = "<?php echo $_GET['id'];?>";
                                                                          
$('#display-content').load('view.php?id='+id).fadeIn("slow");

Upvotes: 1

Piyali Das
Piyali Das

Reputation: 76

Use SessionStorage to keep track like this :

    var data = {
    "strSelectedIds": selectedArray.join(',')
    };
    var countofProcessedRecords = selectedArray.length;
    $("#divLoader").removeClass("display-none");
    $.ajax({
    url: UrlSettings.ProcessSubscriptioData,
    type: 'POST',
    contentType: "application/json; charset=utf-8",
    dataType: "html",
    data: JSON.stringify(data),
    success: function (response) {
    sessionStorage.successMessage= true;
        location.reload();

        setTimeout(function () {
            $("#divLoader").addClass("display-none");
        }, 500);

    },
    error: function (e) {
        $("#divLoader").addClass("display-none");
    }
});

$( function () {
        if ( sessionStorage.successMessage) {
             $("#msg").append(
            '<div class="alert alert-success hideit alertSuc">' + countofProcessedRecords + 'subscriptions uploaded successfully.</div >');
            sessionStorage.successMessage = false;
        }
    } 
);

Upvotes: 0

Andrii Rudavko
Andrii Rudavko

Reputation: 370

To survive the reload you need to use persistent storage like window.localStorage. You would then save a true value to the storage, and upon reload then check if the value is true.

So, after the successful Ajax call, but before reload you save the value: localStorage.ajaxSuccess = 'true';

Then right after the reload you could check if the value is true, and display the message:

if (localStorage.ajaxSuccess === 'true') {
// Display the message here
}

However this approach is subject to browser compatibility. And some users can have localStorage disabled or use Safari in incognito mode. So another approach would be to load the URL with a parameter instead of page.reload(): www.example.com/uploadPage/?ajaxSuccess

And after reload to check if the URL contains the ajaxSuccess string.

Upvotes: 0

Related Questions