how to show friendly message while task completes

I don't know if I've even asked the question properly, but I have a codeigniter application that some heaving lifting in the back end. While the app is busy executing commands(ajax commands), I'd like to show some sort of a status / message box / div. When the task is done, I'd like to clear the div / box. What would I need to google to find a solution like this?

Thanks.

Edit: This is what my jquery / ajax call looks like right now...

  $('#availVLANS').click(function()  {
  $(this).attr("disabled","disabled");
  $.ajax({
    url:"<?php echo site_url('controller/methodABC/');?>",
    type:'POST',
    dataType:'json',
    success: function(returnDataFromController) {
    var htmlstring;
    var submitFormHTML;
    htmlstring = "<br><br><B>To reassign the port to a new vlan, click on a VlanId below and then click on the OK button</B><br><table class='table table-bordered table-striped'>";
    htmlstring = htmlstring + "<th>VlanId</th><th>Name</th>";
    for(i = 0; i < returnDataFromController.length; i++) {
        //alert(returnDataFromController[i].VlanId);
        htmlstring = htmlstring +  "<tr><td><a href=>"+returnDataFromController[i].VlanId+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";   

    }
    submitFormHTML = "<form method='post' accept-charset='utf-8' action='" + BASEPATH + "index.php/switches/changeportvlan/"+ $('#ip').val() +"/" + $('#hardwaremodel').val() +"/" + $('#port').val() + "'><input type='text' name='newVlanID' id='newVlanID' style='width:5em;height:1.5em'/>&nbsp;&nbsp;<button type='submit' class='btn' name='saveVlan' id='saveVlan' style='width:10em;height:2em'>Reassign Vlan</button></form>";
    //alert(submitFormHTML);
    $('#clientajaxcontainer').html(htmlstring);
    $('#newvlanform').html(submitFormHTML);                     

  }
});
$(this).removeAttr("disabled");
  });

Answers


Just use an animated GIF image in an absolutely positioned DIV overlayed on top of the whole page. Just make sure that you overlay an invisible DIV over top of the entire page to prevent clicks on interface elements behind the progress window. Something like this;

╔════════════════════╗
║  #progress-overlay ║
║ ╔════════════════╗ ║
║ ║ #progress-indicator
║ ╚════════════════╝ ║
╚════════════════════╝

The #progress-overlay is a background for the indicator and what you're going for is like a LightBox2 effect but using a progress indicator and small box in the middle of the screen.

You can get animated gif's from here; http://preloaders.net/

Make sure that your progress/something-is-happening div sits at the top level of the document structure, so somewhere at the top of the body, before any of your other container DIV's. This is done so that the #progress-overlay is rendered at the same level in the DOM as the top level element of your website. When you absolutely position the #progress-overlay, it will appear overtop of everything else on the page.

<html>
<head>
....
</head>
<body>
<div id="progress-overlay">
    <div id="progress-indicator">
        <img src="images/myprogress.gif" /> Please Wait...
    </div>
</div><!--progress-overlay-->
<div id="website-wrapper">
.... web site, layout, content, etc...
</div>
</body>
</html>

The #progress-overlay is hidden by default and then shown overtop when needed. Something like;

#progress-overlay{
position: absolute;
width: 100%;
height: 100%;
background: #000;
opacity: 0.2;
}

#progress-indicator{
position: relative;
margin: 0 auto;
top: 40%;
width: 200px;
height: 50px;
}

Using JQuery you could easily make this appear on demand using;

$(document).ready(function(){
    $('#progress-overlay').hide();
    });
function showProgressIndicator()
{
    $('#progress-overlay').show();
}

Need Your Help

WPF Animation based on property value

wpf animation binding

I have a dependency property double Text, and what I want to accomplish is to rotate (with animation) a line by Text degrees whenever I change the value of Text property.

Is there a way to dispatch event again in handler?

flex asynchronous urlloader flexunit

For my test I need to load about 1000 files and then perform some actions with each one by one. The problem is that I can not load another file in handler, flexunit just exit after calling load(). It

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.