Jquery mobile - how to use the "error reporting dialog"

Question

when using jquery mobile and you load an invalid page, the error message is elegantly reported until the download page is displayed (then disappears). Check the attached image.

I want to use this ui to report my own error messages and animate them the way it is done. Does anyone have any experience?

I would like to report some errors without using dialogs, and this method seems appropriate. Can this be done using jquery and if you look at the code.

Answer 1

1.1.0 RC $.mobile.showPageLoadingMsg :

// show error message
$.mobile.showPageLoadingMsg( $.mobile.pageLoadErrorMessageTheme, $.mobile.pageLoadErrorMessage, true );

// hide after delay
setTimeout( $.mobile.hidePageLoadingMsg, 1500 );

Answer 2

. . :

function showErrorMessage(message, $container, delay) {
    $err = $('<div/>', {
        id: 'error_message'
    });
    $err.attr('data-role', 'popup');
    $err.attr('data-theme', 'e');
    $err.attr('data-overlay-theme', 'a');
    $err.attr('data-position-to', 'window');
    $err.addClass('ui-content');
    $err.text(message);

    $container.children().detach();
    $container.append($err);

    $err.popup( );
    $err.popup( "open" );

    if(delay > 0) {
        setTimeout(function() {
            $err.popup( "close" );
        }, delay);
    }
}

:

Answer 3

One simple solution could be:

function show_error_message(message, delay) {
    $.mobile.loading('show',
                     { theme: "e", text: (message || 'ERROR'),
                       textonly: true, textVisible: true });
    setTimeout(function() {
        $.mobile.loading('hide');
    }, ((delay && delay > 0) ? delay : 1000));
}

Using:

show_error_message("Wow!!!", 1500);

The message Wow!!!will be displayed in the center of the window.

Answer 4

You can use this to hide the div error:

div.ui-loader.ui-overlay-shadow { display: none !important; }