jquery mobile: cómo usar el "cuadro de diálogo de informe de error"

Question

al usar jquery mobile, y carga una página no válida, se informa un mensaje de error mostrando elegantemente que la página de carga falló (luego se desvanece). Mira la imagen adjunta.

quiero utilizar esta interfaz de usuario para informar mis propios mensajes de error personalizados y animarlos de la manera en que se hace. alguien tiene alguna experiencia haciendo esto?

me gustaría informar algunos errores sin utilizar cuadros de diálogo y este método parece apropiado. ¿Se puede hacer esto utilizando jquery y si muestra el código?

Answer 1

En la última versión 1.1.0 RC puede utilizar $.mobile.showPageLoadingMsg para mostrar mensajes de error personalizados:

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

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

Answer 2

Se puede usar esta para ocultar el div de error:

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

Answer 3

tengo tuvo un problema similar. Necesitaba mostrar los errores de validación después de validar el formulario enviado. Así que he escrito este código:

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); 
    } 
} 

Se muestra este mensaje:

Answer 4

Una solución sencilla podría ser:

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)); 
} 

Uso:

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

El mensaje Wow!!! se mostrará en el centro de la ventana.