Javascript – dojo dijit dialog underlay not showing

dojojavascript

I'm trying to have three different dialogs on as hidden initially, then depending on the response from the ajax form submit, i wish to show different dialogs.

When the form is submitted and waiting for the response, i can show the "in progress" dialog.
Then if the server returns an error response, I want to hide the first dialog, then display another dialog depending on the error response type.

I can almost achieve what I want to do except when I hide the first dialog and show the next one, the underlay disappears.
If then I scroll inside the browser window, the underlay is displayed properly.
I'm doing something simple like this:

dijit.byId("progress_dialog").hide();
dijit.byId("error_dialog").show();

Anyone have suggestions?

I've seen the following page on dojo website, but it seems to be an interim solution for dojo 0.9?
http://www.dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/showing-dialog-right-after-hiding-another-dialog-while-keeping-u

any help would be appreciated.

Thanks.

[Edit]
okay, I've "solved" the issue by adding a little delay like below.

dijit.byId("progress_dialog").hide();
setTimeout(function() {
    dijit.byId("error_dialog").show();
    }, 500);

This works for me, but I think there could be a better way of solving it.
Any takers?

[Edit again]
The version I'm working with is dojo-1.3.2

Best Answer

There appeared a lot of issues with dialogs' underlay in dojo 1.3 because all dialog objects started to use 1 common underlay object (instead of creating their own underlay).
I suspect the underlay in your case is shown before it gets hidden - you can debug if you wish ;)
As a workaround a timeout is ok(it can be less, I guess). Or you can try to connect to hide method (however not sure this will help):

dojo.connect(dijit.byId("progress_dialog"), "hide", dijit.byId("error_dialog"), "show");
dijit.byId("progress_dialog").hide();

But taking into account all those issues with underlay in 1.3, I would consider using dojo 1.4, as some patches for dijit.Dialog have been committed: http://docs.dojocampus.org/releasenotes/1.4.

Related Solutions

Javascript – the !! (not not) operator in JavaScript

Converts Object to boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, true.

!oObject  // inverted boolean
!!oObject // non inverted boolean so true boolean representation

So !! is not an operator, it's just the ! operator twice.

Real World Example "Test IE version":

const isIE8 = !! navigator.userAgent.match(/MSIE 8.0/);  
console.log(isIE8); // returns true or false

If you ⇒

console.log(navigator.userAgent.match(/MSIE 8.0/));  
// returns either an Array or null

But if you ⇒

console.log(!!navigator.userAgent.match(/MSIE 8.0/));  
// returns either true or false

Javascript – Detect when browser receives file download

One possible solution uses JavaScript on the client.

The client algorithm:

Generate a random unique token.
Submit the download request, and include the token in a GET/POST field.
Show the "waiting" indicator.
Start a timer, and every second or so, look for a cookie named "fileDownloadToken" (or whatever you decide).
If the cookie exists, and its value matches the token, hide the "waiting" indicator.

The server algorithm:

Look for the GET/POST field in the request.
If it has a non-empty value, drop a cookie (e.g. "fileDownloadToken"), and set its value to the token's value.

Client source code (JavaScript):

function getCookie( name ) {
  var parts = document.cookie.split(name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

function expireCookie( cName ) {
    document.cookie = 
        encodeURIComponent(cName) + "=deleted; expires=" + new Date( 0 ).toUTCString();
}

function setCursor( docStyle, buttonStyle ) {
    document.getElementById( "doc" ).style.cursor = docStyle;
    document.getElementById( "button-id" ).style.cursor = buttonStyle;
}

function setFormToken() {
    var downloadToken = new Date().getTime();
    document.getElementById( "downloadToken" ).value = downloadToken;
    return downloadToken;
}

var downloadTimer;
var attempts = 30;

// Prevents double-submits by waiting for a cookie from the server.
function blockResubmit() {
    var downloadToken = setFormToken();
    setCursor( "wait", "wait" );

    downloadTimer = window.setInterval( function() {
        var token = getCookie( "downloadToken" );

        if( (token == downloadToken) || (attempts == 0) ) {
            unblockSubmit();
        }

        attempts--;
    }, 1000 );
}

function unblockSubmit() {
  setCursor( "auto", "pointer" );
  window.clearInterval( downloadTimer );
  expireCookie( "downloadToken" );
  attempts = 30;
}

Example server code (PHP):

$TOKEN = "downloadToken";

// Sets a cookie so that when the download begins the browser can
// unblock the submit button (thus helping to prevent multiple clicks).
// The false parameter allows the cookie to be exposed to JavaScript.
$this->setCookieToken( $TOKEN, $_GET[ $TOKEN ], false );

$result = $this->sendFile();

Where:

public function setCookieToken(
    $cookieName, $cookieValue, $httpOnly = true, $secure = false ) {

    // See: http://stackoverflow.com/a/1459794/59087
    // See: http://shiflett.org/blog/2006/mar/server-name-versus-http-host
    // See: http://stackoverflow.com/a/3290474/59087
    setcookie(
        $cookieName,
        $cookieValue,
        2147483647,            // expires January 1, 2038
        "/",                   // your path
        $_SERVER["HTTP_HOST"], // your domain
        $secure,               // Use true over HTTPS
        $httpOnly              // Set true for $AUTH_COOKIE_NAME
    );
}

Best Answer

Related Solutions

Javascript – the !! (not not) operator in JavaScript

Javascript – Detect when browser receives file download

Related Topic