Is it possible to stop closing Jquery modal popup on page refreshing?

Question

I am developing one MVC4 application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?

This is my Modal code.

function cancel(upload_Id) {
    if (!$("#formID").validationEngine('validate')) {
        return false;
    }
    $("#id").val(upload_Id);
    $(".reject-popup-inner").parents('div').addClass('reject-popup');
    $("#dialog-form").dialog("open");
}

<div id="dialog-form" title="Reject Reason" class="reject-popup-inner">
    <div>
        <input type="hidden" value="_upload_id" id="id" /><br />
        <label for="name">Select your reason below</label>
        <select id="comments">
            <option value="0">Wrong Document</option>
            <option value="1">Incorrect Document</option>
            <option value="2">document is not clear</option>
            <option value="3">document is not valid</option>
            <option value="4">other document</option>
        </select>
        <input type="button" id="reject" class="btn btn-primary btn-cons blue" value="Ok" onclick="reject();" tabindex="-1" style="float:right;">
    </div>
</div>

jQuery Modal code

 $("#dialog").dialog({
            modal: true,
            title: "Preview of " + FileName,
            width: 850,
            closeOnEscape: false,
            height: 600,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                    deleteFile(FileName);
                }
            },
});
});

You can use sessionStorage to set a flag and on availability of this flag, show popup on page load. — Rajesh, Oct 03 '16 at 12:46
No, you cannot keep popup open. But you can save the state and reopen popup. — Vladimir M, Oct 03 '16 at 12:46
thank you for your message. Can i capture any event when page is refreshed? — Niranjan Godbole, Oct 03 '16 at 12:47
Not refreshes only, no. You can hook to the `onbeforeunload` event, but that fires however the user navigates away from the current page. If you use `sessionStorage` or `localStorage` you don't need to know when the page is refreshed anyway — Rory McCrossan, Oct 03 '16 at 12:48
How are you "refreshing" the page? As it's MVC you could send an ajax 'post' to an action (when you open the dialog) which persists that state (ie in your database) then when you render the view, read the state and render accordingly. — freedomn-m, Oct 03 '16 at 12:53
Whenever Modal is closed(Through close button or X mark) I am calling some function and doing some tasks as i shown in the above code. But whenever i refresh the page Modal will close but where can i catch events? — Niranjan Godbole, Oct 03 '16 at 12:58
The modal doesn't "close" when you "refresh" the page - it's just gone. (depending on exactly what you mean by "refresh", assuming your user presses F5 or similar). What if you copy the url, close the browser and open a new tab with that url? Would you expect it to still be open? If so, you'll need a server-side solution. — freedomn-m, Oct 03 '16 at 13:12
Yes when i hit F5 modal is just gone. why i need this is On opening Modal I am copying some files and doing some calculations. Once popup is closed(on pressing close button or X button or pressing F5) I want to delete the files. So i need to capture some events when the model is just gone! Let me know If you did not understand. Thanks — Niranjan Godbole, Oct 03 '16 at 13:16

Mohit Tanwani · Accepted Answer · 2016-10-03T12:54:56.237

2

Use localStorage() to set the current state of pop up.

function cancel(upload_Id)
{
    if (!$("#formID").validationEngine('validate')) {
         return false;
    }
    $("#id").val(upload_Id);
    $(".reject-popup-inner").parents('div').addClass('reject-popup');
    $("#dialog-form").dialog("open");
    //Set item in localStorage
    localStorage.setItem('popupFlag', 1);
}

On page load you can check the flag

$(document).ready(function(){
   //Get and Check item in localStorage
   if(localStorage.getItem('popupFlag') == 1)
   {
      $("#dialog-form").dialog("open");     
   }
});

Finally, you can remove the item from localStorage item

//Remove item from localStorage
localStorage.removeItem('popupFlag')

FYI, to use localStorage your browser should be HTML5 supported.

Reference

HTML5 Local Storage

edited Oct 03 '16 at 12:54

answered Oct 03 '16 at 12:48

Mohit Tanwani

6,503
1
11
31

Or possibly using a cookie for the older browsers - http://stackoverflow.com/questions/1458724/how-do-i-set-unset-cookie-with-jquery – smoksnes Oct 03 '16 at 12:50
Thank you for your message. – Niranjan Godbole Oct 03 '16 at 12:54
Did you get what you're looking for ? – Mohit Tanwani Oct 03 '16 at 13:01
Whenever Modal is closed(Through close button or X mark) I am calling some function and doing some tasks as i shown in the above code. But whenever i refresh the page Modal will close but where can i catch events? – Niranjan Godbole Oct 03 '16 at 13:11
See my code, I've explained what you need to do, you just need to remove item from localstorage when you want to off the pop up till the time it will check in document ready if localstorage is available then pop up will open on page ready. – Mohit Tanwani Oct 03 '16 at 13:16
Thank you. I will try now. – Niranjan Godbole Oct 03 '16 at 13:23

Is it possible to stop closing Jquery modal popup on page refreshing?

1 Answers1

Linked