Toast in Jquery Mobile

Toast is the great feature in the mobiles to show the message. Most of the mobile development frameworks support Toast feature, but jquery mobile don’t. So I am going to let you know how we can accomplish this feature in the jquery mobile very easily.

Here the simple code below, which you can use to show a toast with the success or error message to the user, whenever he performed any type of action with jquery mobile app. It looks really good and more attractive app.

function OnSuccess(response) {
               var $toast = $('<div class="ui-loader ui-overlay-shadow ui-body-e ui-corner-all"><h3>' + response.message + '</h3&lgt;</div>');

                $toast.css({
                    display: 'block',
                    background: '#fff',
                    opacity: 0.90,
                    position: 'fixed',
                    padding: '7px',
                    'text-align': 'center',
                    width: '270px',
                    left: ($(window).width() - 284) / 2,
                    top: $(window).height() / 2 - 20
                });

                var removeToast = function () {
                    $(this).remove();
                };

                $toast.click(removeToast);

                $toast.appendTo($.mobile.pageContainer).delay(2000);
                $toast.fadeOut(400, removeToast);

            }

In the above example I showed the Toast on the ajax success function. But you can put where its fit best in you code. You can even customize it as per you requirements.

Please feel free to contact me, if need any type of help.

Happy Coding….

Posted by | View Post | View Group