How to update html in sidebar template from modal dialog template with javascript in Google Apps Script?

Question

I have a form in a modal dialog. After submiting a form that dialog closes and does some actions in the background. After closing the modal dialog I also want to update html in the sidebar (without refreshing the sidebar). I have a div with "loader" id in the sidebar with class hidden (which prevents it to be visible). On modal dialog close I want to remove class hidden from the "loader" div. How do I access that "loader" div from the modal dialog template?

Answer 1

You could use the browser sessionStorage, set a timer, and continuously "poll" for available information.

Thanks to a comment, a variation was suggested which eliminates the need for polling:

jquery

$(window).bind('storage',
  function(e){if(e.key === "newValuesWereEntered"){doSomething()}});

Script tag:

<script>
  //Use a timer to keep checking for a completed action from another dialog
  var theTimer;

  window.setTheTimer = function() {
    //To Do - Hide the Spinner
    if (typeof(Storage) === "undefined") {
      alert('HTML5 Storage is not supported.  This App will not work in this browser.  Please update your browser.');
      return;
    }

    try {
    window.sessionStorage.setItem("newValuesWereEntered","n"); //Make sure check value is reset
    } catch(e) {
      alert(e.error + ' You may have this apps cookies blocked in this browser, and/or this browser tab.  Check cookie blocking.');
      return;
    };
    theTimer = window.setInterval(monitorForTheResponse, 500); //Every 1/2 second, check for response value
  };

  window.monitorForTheResponse = function() {
    var was_a_newValueEntered,dlgInfo;
    was_a_newValueEntered = window.sessionStorage.getItem("newValuesWereEntered");
    if (was_a_newValueEntered === 'y') {//Dialog just wrote value to window.sessionStorage
      window.sessionStorage.setItem("newValuesWereEntered","n");//Reset
      clearTimeout(theTimer);//turn off timer
      //Get submitted values
      dlgInfo = window.sessionStorage.getItem("newValuesToTransfer");

      //To Do - Run code to display new value
    };
  };
</script>

The dialog that has the value to pass to the sidebar must save that value to session storage

window.theValueWasSavedOrEntered = function() {
  var arry,objectOfNewValues,strJSON;
  try{
  if (typeof(Storage) !== "undefined") {//Browser has local storage      
    window.sessionStorage.setItem("newValuesWereEntered","y"); //Set to yes      
    objectOfNewValues = {};

    objectOfNewValues.valueOne = arry[0];
    objectOfNewValues.valueTwo = arry[1];

    strJSON = JSON.stringify(objectOfNewValues);
    window.sessionStorage.setItem("newValuesWereEntered","y"); //Set to yes
    window.sessionStorage.setItem("newValuesToTransfer", strJSON);
  };

  google.script.host.close();
  } catch(e) {
    SendErr({'message':'ERROR: ' + e.stack + ' message: ' + e.message});
  };
};