5

when using jquery mobile, and you load an invalid page, an error message is reported elegantly showing loading page failed(then fades out). Check out the attached image.

i want to use this ui to report my own custom error messages and animate them the way its done. any one had any experience doing this?

i would like to report some errors without using dialogs and this method seems appropriate. Can this be done using jquery and if please show the code.enter image description here

1

4 Answers 4

10

In the latest 1.1.0 RC version you can use $.mobile.showPageLoadingMsg to display custom error messages:

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

// hide after delay
setTimeout( $.mobile.hidePageLoadingMsg, 1500 );
3
  • im using jquery.mobile-1.0.1.min.js and it fails. just spins and shows loading, lemme look for that version
    – Sir Lojik
    Mar 3, 2012 at 9:48
  • With 1.0.1 you need to see the answer JackieChiles posted as a comment to your question. Mar 3, 2012 at 15:32
  • Sir Lojik, try to add : $.mobile.loadingMessageTextVisible = true; to your project...that will let you show text on the messages
    – BorisD
    Jul 12, 2012 at 14:13
2

I've had similar problem. I needed to show validation errors after validating submited form. So I've wrote this code:

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

It shows this message: enter image description here

2
  • how is this function used?
    – Smith
    Sep 9, 2013 at 15:25
  • First of all - you must have jQm imported to your html file. Then if something gone wrong just call showErrorMessage("uuups!", $('#error'), 1000); and this popup should appear for one second. I'm not sure if there is something more to do, because I have not seen this project since March Sep 18, 2013 at 12:44
2

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

Usage:

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

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

1
  • This seems to work for me in jqm 1.4. The accepted answer didn't seem to work.
    – bowerm
    Oct 29, 2014 at 21:04
1

You can use this for hiding the error div:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.