Close Jquery dialog when the user presses browser's back button

Question

I have this problem where the Jquery UI dialog does not close when the use presses the browser's back button. I've looked around for an answer and I found onhashchange event which I'm unable to use because the page that I have doesn't send an httprequest when the dialog is open so back button wouldn't send a new request either.

Can anyone help explaining to me why it doesn't send an httprequest when the dialog is opened? And how can I close the dialog on back button pressed?

Thanks

Below is my JavaScript code.

// Functions to open VM popups
    function openVMDialog(vmId) {
        fetch.Ajax(vmDetailUrl + '?vmId=' + vmId, beforeDialogSend, onDialogSuccess, onDialogError);
        // Not using pushState on browsers that don't support pushState (IE<10), pjax can fail gracefully without $.support.pjax check
        // but IE causes pjax to scroll to top. Check support.pjax here to prevent that from happening on IE.
        if ($.support.pjax) {
            @Model.AccountId.HasValue.ToString().ToLower()
            ? window.history.pushState(null, null, indexUrl + "&vmId=" + vmId )
            : window.history.pushState(null, null, "?vmId=" + vmId);
        }

    };
    function beforeDialogSend() {
        $("#popup").html('<div class="loader"><img src="@Links.Content.loader_gif" alt="loader" /></loader>').dialog('open');
    };
    function onDialogSuccess(data) {
        $("#popup").html(data).hide().fadeIn(1000).dialog({position: 'center'});
    };
    function onDialogError() {
        $("#popup").html('<p class="loader">Uh oh! A <em>Server Error</em> Occurred</p>');
    };

    function openDialogRestrictions(vmId) {
        // Disable background scroll when dialog is open
        if ($(document).height() > $(window).height()) {
            var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop();
            $('html').addClass('disableScroll').css('top',-scrollTop);
        }
        //Click anywhere to close
        jQuery('.ui-widget-overlay').bind('click', function() {
            jQuery('#popup').dialog('close');
        })
        setGifVisibility("live-gif", false);
    };

    function closeDialogRestrictions() {
        // Enable background scroll when dialog is close
        var scrollTop = parseInt($('html').css('top'));
        $('html').removeClass('disableScroll');
        $('html,body').scrollTop(-scrollTop);
        if ($.support.pjax) window.history.pushState(null, null, indexUrl);
        setGifVisibility("live-gif", true);
    };

    $(document).ready(function() {

        // Prevent pjax from scrolling to top.
        if ($.support.pjax) $.pjax.defaults.scrollTo = false;

        // Dialog settings for VMs
        $("#popup").dialog({
            autoOpen: false,
            position: 'center',
            width: 450,
            maxHeight: 600,
            minHeight: 450,
            resizable: false,
            draggable: false,
            closeOnEscape: true,
            modal: true,
            closeText: null,
            show: { effect: "clip", duration: 300 },
            hide: { effect: "clip", duration: 300 },
            dialogClass: 'fixed-dialog',
            open: openDialogRestrictions,
            close: closeDialogRestrictions
        });

        setHeight();
        loadContent();

        if (@Model.VMId.HasValue.ToString().ToLower()) openVMDialog(@Model.VMId);

        // Refreshes the page every 1 minute
        setInterval(loadContent, 60000);
    });

pro · Answer 1 · 2015-09-26T03:33:51.200

try this

assuming on click of popup-btn, popup-panel will be shown.

Actions to be taken

Click on Open Popup Panel link.
The red popup-panel will be shown
Click on browser back button.
The red popup-panel will be gone

<style>
    .popup-panel
    {
        display:none;
        width:100px;
        height:100px;
        background:red;
    }
</style>

<a class="popup-btn" style="cursor:pointer;color:blue">Open Popup Panel</a>

<div class="popup-panel"></div>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
<script>
  
  $(document).ready(function(){
    
      $(".popup-btn").click(function () {
          location.hash = "popup";
          $(".popup-panel").show();
      });
    
  });
  
  $(window).bind('hashchange', function () {
    
      if (location.hash == null || location.hash == "") {
          $(".popup-panel").hide();
      }
    
  });
  
</script>

score 0 · Answer 2 · answered May 15 '14 at 17:55

0

Try this

<script language="javascript">
$(document).ready(function () {
        $( window ).unload(function() {
          //alert( "Bye now!" );
            jQuery('#popup').dialog('close');
         });
});
</script>

answered May 15 '14 at 17:55

malkam

2,337
1
14
17

I've tried it but it doesn't work the problem with it is that it doesn't send an httprequest so the unload function is not triggered when back button is pressed. – TheBokiya May 15 '14 at 17:57
When I press Browser back button event was fired and I'm able to alert 'Bye now!' – malkam May 15 '14 at 18:00
@malkam Which browser are you testing on? I did a quick check and found that unload() is deprecated, also it's not properly supported on ff, opera or chrome. Works fine IE though. – TheBokiya May 15 '14 at 18:09
@arvic.rivera that is my initial impression, I tried looking into it and disabling cache and what not but got no luck. – TheBokiya May 15 '14 at 18:10
Check this http://stackoverflow.com/questions/12182559/i-cant-trigger-the-unload-event-in-chrome – malkam May 15 '14 at 18:18
unload() or onunload() wouldn't work for my case because the page just opens up a dialog and places content in the dialog without loading a new page. – TheBokiya May 15 '14 at 21:20

Close Jquery dialog when the user presses browser's back button

2 Answers2

try this

Actions to be taken

Linked