Want to be on Child Dialog on Page Refresh in jQuery

Question

Here is my working Code:

Working fiddle

 var dialog = $( "#dialog" ).dialog({
      autoOpen: false,
      modal: true,
      buttons: {
        Add: function() {
          addTab();
          $( this ).dialog( "close" );
        },
        Cancel: function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        form[ 0 ].reset();
      }
    });

When I am clicking the Add Tab, It will display a jQuery Dialog and on page refresh I am not able to see Dialog.

I want to retain the jQuery Dialog on Page refresh.

What to do in this case ?

Answer 1

You can use sessionStorage for this purpose as shown below(I am just including required parts of the code here) :-

$(function() { 

var dialog = $( "#dialog" ).dialog({
  autoOpen: false,
  modal: true,
  buttons: {
    Add: function() {
      addTab();
      $( this ).dialog( "close" );
        sessionStorage.setItem('flag','F') //set sessionStorage item to F
    },
    Cancel: function() {
      $( this ).dialog( "close" );
        sessionStorage.setItem('flag','F') //set sessionStorage item to F
    }
  },
  close: function() {
    form[ 0 ].reset();
      sessionStorage.setItem('flag','F') //set sessionStorage item to F
  }
});

if(sessionStorage.getItem('flag') == 'T') 
{
   dialog.dialog( "open" ); // if sessionstorage's flag is T then open the dialog on page load
}

// addTab button: just opens the dialog
$( "#add_tab" )
  .button()
  .click(function() {
    dialog.dialog( "open" );
      sessionStorage.setItem('flag','T')  // set sessionStorage item to T
  });

 $( "#add_tab_link" ).click(function(e) {
    e.preventDefault();
    //alert('clicked');
    dialog.dialog( "open" );
    sessionStorage.setItem('flag','T')  // set sessionStorage item to T
  });
});

Working Fiddle