Search This Blog

Loading...
Showing posts with label Ajax. Show all posts
Showing posts with label Ajax. Show all posts

Monday, March 03, 2008

Creating a Gmail Like Ajax Status Display

Most of us geeks know and love Gmail. It has a very nice interface and it is an inspiration to constantly improve our own web applications. Today, I set out to create an unobtrusive Gmail like page status message, much like the one shown in the screen shot:

 gmail_screnshot

My requirements were simple:

  1. Should look like the one used in Gmail
  2. Should be able to just include the source JavaScript file without any further configuration
  3. Should allow the user to specify a custom status message to be displayed
  4. Should allow for the use of custom styles but none are required
  5. Integrates with Prototype.js Ajax requests

The only prerequisite is Prototype.js v1.6

Let's get started. If all you care about is the end result. Here how to include it in your page:

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="ajaxStatusDisplay.js"></script>


That's it! Now whenever you make an Ajax request with Prototype, you will see a message popup with the text "Loading...". You can check out the end results at http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Simple.html

Now to the advanced features.

As stated #3 and #4 above, two of our requirements are to allow the user to specify a custom status message and custom CSS styles for the displayed message. Satisfying the first one of those requirements is done by having the user create an element on the page with the custom message like so:

<div id="ajaxStatusDisplay_userMessage">
Loading...Wait a Minute!
</div>


This element does not have to be a div. It could be a any text container such as span or even input (text or hidden). What is important is the id of the element, it has to be set to "ajaxStatusDisplay_userMessage" for the custom message to be picked up.

The next requirement works much in the same way. Custom styles can be specified by creating two CSS classes with certain names: "ajaxStatusDisplay_userStyle" and "ajaxStatusDisplay_userMessageStyle". Here an example that will produce the default look:

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:45%;top:2px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background:#FFF1A8 none repeat scroll 0%;color:#000;padding: 0pt 5px;
	font-family:Arial, Helvetica, sans-serif;font-size:14px;font-weight: bold;
	text-align:center;width:100%
}
</style>

And here is another example that will produce a white text on black background in the top right corner:
 

<style type="text/css">
.ajaxStatusDisplay_userStyle {position:absolute;left:94%;top:0px;height:10px;}
.ajaxStatusDisplay_userMessageStyle {
	background-color:#000;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	padding:2px;
	width:100%;
}
</style>

To use the your own CSS styles, you do not need to do anything but define them as shown above (as compared to the initial version where you needed to edit the file "ajaxStatusDisplay.js" and set the "useUserCssStyles" variable to "true").

A small extra feature is the ability to change the status message at runtime. This is done by using (you guessed it), the "setStatusMessage" function as follows:

// Set the status message based on the value in the "userMessage" input field
ajaxStatusDisplay.setStatusMessage($F('userMessage'));


To see setting the status message in action along with using a custom CSS style, check out http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay-Advanced.html

You can view all the sources at:

JavaScript Source: ajaxStatusDisplay.txt
Simple Example Source: ajaxStatusDisplay-Simple.txt
Advanced Example Source: ajaxStatusDisplay-Advanced.txt

You can download the JavaScript source at:

http://blog.tech-cats.net/examples/ajax/ajaxStatusDisplay.js

Posted by Boyan Kostadinov at 11:06 2 Comments

Share this post:

Categories: , ,

Wednesday, July 18, 2007

Gmail Style Ajax Status Message

Here is some css with a test bed to mimic Gmail's loading indicator. Hopefully it will be useful to somebody. 

<html>
<head>
<style type="text/css">
div#statusContainer {
 position: absolute;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 10px;
}

div#statusMessageContainer {
 position: absolute;
 background-color: #000000;
 color: white;
 width: 80px;
 font-family: Arial, Helvetica, sans-serif;
 padding: 2px;
 left: 0px;
 font-weight: 700;
}
</style>
<script type="text/javascript">
function ToggleStatus() {
 var toggleButton = document.getElementById('toggleButton');

 if (document.getElementById('statusContainer').style.visibility == 'visible') {
  toggleButton.value = 'Show';
  document.getElementById('statusContainer').style.visibility = 'hidden';
 }
 else {
  toggleButton.value = 'Hide';
  document.getElementById('statusContainer').style.visibility = 'visible';
 }
}
</script>
</head>
<body>
<div id="statusContainer" style="visibility: hidden;">
 <div id="statusMessageContainer">Loading...</div>
</div>
<br />
<input type="button" id="toggleButton" name="toggleButton" onclick="ToggleStatus();" value="Show" />
</body>
</html>

Posted by Boyan Kostadinov at 16:06 2 Comments

Share this post:

Categories: ,

Thursday, December 21, 2006

How to make Ajax calls with Prototype

You can get prototype from http://prototype.conio.net/ Some docs and tutorials on using it: http://www.beyondstandards.com/archives/better-event-management-with-prototype/ http://www.sitepoint.com/article/painless-javascript-prototype http://www.sergiopereira.com/articles/prototype.js.html http://www.regdeveloper.co.uk/2006/12/17/ajax_prototype_tutorial/ http://particletree.com/features/quick-guide-to-prototype/ Here is an example of an Ajax call passing form variables. 

/*
Function:  AjaxRequest
Arguments:
   formID    string - the form id to be used in the request
   pageUrl   string - the page url to call for the results
Return Value: None
Description:
   Retrieves the contents of the server side page defined
   in 'pageUrl' using Ajax */
function AjaxRequest(pageUrl, formID)
{
 // Disable the form - 'formID' is the id of the form that was passed in
 Form.disable(formID);

 // Serialize the form parameters to pass them along as part of the form submission
 var params = Form.serialize(formID);

 // Make an ajax request with the 'get' method, passing it the serialized form
 // and using 'ReportErrors' function to show any errors
 // and 'ProcessResults' function to process the retrieved results
 // To use the 'post' method, simply change the method to 'post'
 new Ajax.Request(
  pageUrl,
  { method: 'get', parameters: params, onFailure: ReportError,
  onComplete: function(request) {
   ProcessResults(request.responseText);
  },
  evalScript: false
  }
 );
}

/*
Function:  ProcessResults
Arguments:
   responseTextstring - the response from the Ajax call
Return Value: None
Description:
   Processes the Ajax call results */
function ProcessResults(responseText)
{
 alert(responseText);
}

/*
Function:  ReportError
Arguments:
   request    string - the response from the tracking results call
Return Value: None
Description:
   Shows an error message if an error occurs durring the ajax request */
function ReportErrors(responseText)
{
 alert(responseText);
}

Posted by Boyan Kostadinov at 10:21 0 Comments

Share this post:

Categories: ,

Subscribe to: Posts (Atom)