Creating Simple Please Wait Dialog with Twitter Bootstrap

As I was working on my new web project, I decided to use Twitter Bootstrap as the foundation for my styling and components.  One common feature that all web usually have is showing some kind of “Please Wait” dialog to let the user know that application is processing something in the background.  Typically in web applications we show this screen during server communications.

There are many components in the bootstrap package.  I am going to use two to put my “Please Wait” screen together – modal dialog and progress bar.  I am going to use animated striped progress bar and set its value to 100%.  This will look very similar to Silverlight infinite progress bar.  I also have to make sure the user cannot dismiss my dialog manually, so I have to block keyboard.  So, here is how my html for dialog looks like.

<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-header">
            <h1>Processing...</h1>
        </div>
        <div class="modal-body">
            <div class="progress progress-striped active">
                <div class="bar" style="width: 100%;"></div>
            </div>
        </div>
    </div>

I also added a header.  So, here is how the whole thing will look.

image

The black background is the default for modal dialogs in Bootstrap.

Next step is to wrap up this dialog in a reusable JavaScript component.

var myApp;
myApp = myApp || (function () {
    var pleaseWaitDiv = $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
    return {
        showPleaseWait: function() {
            pleaseWaitDiv.modal();
        },
        hidePleaseWait: function () {
            pleaseWaitDiv.modal('hide');
        },

    };
})();

All I did above is mote the html into the JavaScript variable and used jQuery to call Bootstrap’s modal function.  I added two functions to my component – show and hide the please wait.  So, if you are calling the server, call the function to show dialog and when the call complete call the one to hide it. For example:

myApp.showPleaseWait();

Thanks.

Enjoy.

89 Comments

  1. Thanks for the post Sergey! I am also looking in to using Twitter Bootstrap for my project as well, so this is nice to know.

    I do have one question though… Did you use jQuery to create the “pleaseWaitDialog” div because of portability, or is there another reason?

  2. A couple of reasons really. One is to keep all the code together, js and html. The other one is that I found that my _Layout.cshtml continued to grow with system wide reusable html, and I wanted to cut down on that.

  3. Cheers for this – a very useful bit of jquery. I separated my HTML and jQuery out and also had a confirm as part of it. So I had the following jquery function:


    (function ($) {
    $.confirmProcessingDialog = function(question, dialogId) {
    if (confirm(question)) {
    $(dialogId).modal();
    return true;
    } else {
    return false;
    }
    };
    })(jQuery);

    So then you have to include the modal html in the pages you want to use, but then you can put the following:

  4. Pingback: Building Message Dialog with Angular, Bootstrap and TypeScript | Sergey Barskiy's Blog

  5. Pingback: Clever use of Bootstrap to Show “Please Wait…” | DevBlog

  6. It did not work for me too. I am calling showPleaseWait on ajax beforeSend and hidePleaseWait on always (aka complete). Like Deepan mentioned, I am also not seeing progress bar. Entire screen becomes black.

  7. Sergey,

    I am new to angular & bootstrap. I am trying to create a modal window as a confirmation message box. Basically, customers enter their information and click on a button, which brings up the modal window. This window has some messages displayed and when they click on the close button on modal, it should take them to home page.

    Everything is working except when the home page comes in, backdrop is still active and everything on home page is greyed out and non-editable. I have to manually refresh this page to get it working.

    How can I remove the back drop when I close the modal window?

    2)I am also not able to run any plain javascript statements. If I just call – alert(“test”); inside tags, it doesn’t work. Is there anything extra I need to do to incorporate javascripts or jQuery?

    Any help would be great as I am kind of stuck with this for couple days now.

    Thanks in advance.

    -Suma

  8. @Suma,
    I think maybe your dialog HTML is incorrect that is why backdrop does not work. Just compare your HTML with an example in the bootstratp web site api pages. I think you will find a problem. I always recommend to create a very simple demo for these types of problem, that will help you pinpoint the issue. Alert should always work, maybe your code is not hit? Use browser tools to debug your JS code to make sure your code is hit. Hard to provide more help without looking at the code….

  9. Hi Sergey,
    1. I have written the below script in head section of the page

    var myApp;
    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘Processing…’);
    return {
    showPleaseWait: function() {
    pleaseWaitDiv.modal();
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },

    };
    })();

    2. and on click of this button i wants to open the modal window Open

    But the page is refreshing on click of the submit button. This submit button is inside another modal window. Where as when i give hyperlink to an text like below the modal window is opening perfect.
    Please Wait Dialog in this #pleasewaitDialog i have kept it in the document itself not in script.

    But i wants to call somehow this modal dialog on click of a button or input submit button

  10. Thanks for your quick response Sergey.

    I did post a code sample to your response..but I don’t see it here.

    Anyway, I was able to resolve my issue. I was calling jQuery.js in the wrong spot and hence was not being referenced. Since that got resolved, I used a jQuery snippet to redirect the button click to homepage. I am using MEAN stack with bootstrap for my coding efforts.

    Thanks
    Suma

  11. Sorry, I am late in my response. You are right, I am using bootstrap v 3.0, c# mvc 5.0.

    Here’s the code:

    ///
    ///
    ///

    function ProcessDataController() {
    var self = this;

    this.OnBeforeAjaxRequest = function () {
    alert(‘in beforeSend’);
    myApp.showPleaseWait();
    };

    this.ProcessLongData = function() {

    $.ajax({
    beforeSend: self.OnBeforeAjaxRequest,
    type: “GET”,
    url: “/Home/SomeLongRunningProcessForDemo”,
    cache: false,
    contentType: “application/json; charset=utf-8”
    })
    .always(function () {
    alert(‘in always’);
    myApp.hidePleaseWait();
    })
    .done(function () {
    alert(‘Viola!!!’);
    });
    };
    }

    And c# MVC controller:
    public class HomeController : Controller
    {
    public ActionResult Index()
    {
    return View();
    }

    public JsonResult SomeLongRunningProcessForDemo()
    {
    try
    {
    Thread.Sleep(new TimeSpan(0,0,2,0));
    return Json(new {DidSucceed = true}, JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
    return Json(new { DidSucceed = false}, JsonRequestBehavior.AllowGet);
    }
    }
    }

    And on ViewsHomeIndex.cshtml, I created a button as follows:

    !!!Click Me!!!

    @section scripts
    {

    $(document).ready(function () {
    $(‘#btnDemo’).on(‘click’, function () {
    var controller = new ProcessDataController();
    controller.ProcessLongData();
    });

    });

    }

    I want to email the mvc test project code, could you share your email address?

    Thank you in advance for your time.

  12. I am sorry, I tried second time also to send email with attachment but it seems something went wrong.

    But I am figure it out why its not working for me. Like you said, its the difference between Bootstrap v2 and v3.

    I am posting the reasons here if they might help others.
    1) Remove hide from tag.
    2) It seems, bootstrap v3 modal HTML template requires, “” and which needs to around model-header and model-body divs.

    Bootstrap v3 modal template is


    var pleaseWaitDiv3 = $("" + // 1) There is no hide in class here
    "" + // 2) We need this for Bootstrap v3
    "" + // 2) We need this for Bootstrap v3
    "" +
    "Processing..." +
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    "" +
    "");

  13. Hello Sergey, I am sorry that I could not find about Bootstrap version information in the post. Anyways, to answer your question, yes I had to change little bit.

    First thing, I did was removing hide class from the first div.

    And then I added a div with class modal-dialog as a child to the first div (for which class is set to modal). And then another div with class modal-content as a child to the div with class modal-dialog.

    So, the hierarchy that helped me to fix this issue is: modal => modal-dialog => modal-content => modal-header and modal-body as children to modal-content.

    Hope this might help others who are also seeing backdrop like me.

    Thank you sergey for your time and the post. It really is very helpful and a smart thought.

  14. Pingback: Modal Approach | DiscVentionsTech

  15. Hi, I copied javascript into my jsp and calling the myApp.showPleaseWait(); before ajaxCall. My screen geting dark (not clickable) but cannot see progress bar. Can you please help ? Thanks!

  16. All I see is the black background, no actual model with:

    Load

    Then:

    var myApp;
    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘Processing…’);
    return {
    showPleaseWait: function() {
    pleaseWaitDiv.modal();
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },

    };
    })();

    This is loaded after my bootstrap v3 js and jquery files. Any ideas why?

  17. Same thing happened to me, grey background and no text or progress.

    Using bootstrap 3.1.1 and MVC.NET

    Fixed the following –
    added modal-dialog and modal-content div containers
    removed the ‘hide’ from the outer ‘modal hide’ div class
    replaced the ‘bar’ with ‘progress-bar’

    So the new line should be:

    var pleaseWaitDiv = $(‘Processing…’);

    I use it on a form so i added to my button the following onclick attribute

    onclick=”myApp.showPleaseWait(); return true;”

  18. $(document).ready(function(){

    var myApp;
    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘Processing…’);
    return {
    showPleaseWait: function() {
    pleaseWaitDiv.modal();
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },

    };
    })();
    myApp.showPleaseWait();

    };

    sorry it is not working as expected: the bar and the label Processing is not visible. I tried to see the dom …
    Processing….

    This part is hidden … i tried to remove manually in the dom “hide” but anyway is not correct

  19. For those of you running MVC 5 and bootstrap 3 here is the updated code.

    var myApp;
    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘Processing…60% Complete’);
    return {
    showPleaseWait: function () {
    pleaseWaitDiv.modal();
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },

    };
    })();

  20. For those who are not able to see model.
    Solution Is:

    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘Please Wait…’);
    return {
    showPleaseWait: function() {
    pleaseWaitDiv.modal(‘show’);
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },

    };
    })();

  21. Pingback: Find out the Front-end framework resouces | Pixelsgrid

  22. Thanx for your code Sergey,
    But I have an issue.
    Every time I call it before AJAX request, the modal will show right after the AJAX call finish.

    myApp.showPleaseWait();
    //AJAX Request Here
    myApp.hidePleaseWait();

    can it actually called like that ?

  23. Pingback: twitter bootstrap xaml - Search Yours

  24. Was a very good example, but no modal popup was happening to me. Finaly get it to work with latest bootstrap & jquery.

    var myApp;

    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘ Please Wait <!– –> Processing ‘);
    return {
    showPleaseWait: function() {
    pleaseWaitDiv.modal();
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },
    };
    })();

    function showLoading(){
    myApp.showPleaseWait();
    }

    function removeLoading(){
    myApp.hidePleaseWait();
    }

  25. This is my working code.

    var loadingPannel;
    loadingPannel = loadingPannel || (function () {
    var lpDialog = $(“” +
    “” +
    “” +
    Processing…” +
    “” +
    “” +
    ” “+
    “Please Wait…”+
    “”+
    “”+
    “” +
    “” +
    “” +
    “”);
    return {
    show: function () {
    lpDialog.modal(‘show’);
    },
    hide: function () {
    lpDialog.modal(‘hide’);
    },

    };
    })();

  26. Codes are gone after posting..

    var loadingPannel;
    loadingPannel = loadingPannel || (function () {
    var lpDialog = $(”

    Processing…

    “Please Wait…

    “);
    return {
    show: function () {
    lpDialog.modal(‘show’);
    },
    hide: function () {
    lpDialog.modal(‘hide’);
    },

    };
    })();

  27. This will work with Bootstrap 3

    var myApp;
    myApp = myApp || (function () {
    var pleaseWaitDiv = $(‘Processing…’);
    return {
    showPleaseWait: function () {
    pleaseWaitDiv.modal();
    },
    hidePleaseWait: function () {
    pleaseWaitDiv.modal(‘hide’);
    },

    };
    })();

  28. Hello everybody, I need a help in ajax update progress in asp.net c#. I am developing a web application in which on button click a job executed in SQL server in through job s stored procedure execute where different queries and condition applied for long running data upload insertion process.

    Basically i need a loader which should shown on button click and it will be displayed until job executed completely because here page post-back logic not applied i have that’s why create a job.

    Please help in this if anybody knows to do that in simplest way, it will be very grateful.

    Best Regards,
    Imtiaz Malik

  29. Its working fine on chrome but not working on IE.
    I am using this like below.

    $(function () {
    $(“#upload”).bind(“click”, function () {
    myApp.showPleaseWait();
    //Long operation include multiple ajax calls.
    myApp.hidePleaseWait()
    });
    });

  30. If you are making ajax calls, this will not work. You need to put hide call into last ajax call back. Since ajax calls are asynchronous, this will show and immediately hide your please wait window.

  31. Pingback: How to show loading indicator in web page | AndyCnZh Blog

  32. Pingback: twitter-bootstrap - Twitter Bootstrap - Centro De Diálogo Modal

  33. Pingback: asp.net-mvc - Bootstrap Barra de Progreso para MVC de Carga de Archivos

  34. Pingback: asp.net-mvc - Bootstrap Barra di Avanzamento per MVC Upload di File

  35. Pingback: modal-dialog - Twitter Bootstrap - Centro Della Finestra Di Dialogo Modale

  36. Pingback: Load mask plugin for twitter bootstrap – inneka.com

Leave a Reply to Seevali H Rathnayake Cancel reply

Your email address will not be published. Required fields are marked *