Link to home
Start Free TrialLog in
Avatar of shtaffa
shtaffa

asked on

Display web page loading notification

I have written a custom dashboard that displays my open trouble tickets and the statuses of hosts and services in Nagios.  I have set it to refresh every minute.  Up to this point, I have been using meta refreshes and bouncing back and forth between two pages.  The first page is the dashboard itself and the second is a page that is identical with the exception of a graphic showing that the page is being refreshed.  I'd like to spiff the page up a little bit and have only one page that refreshes every minute and while it is doing all of the refreshing of the statuses, have it display an image or some text to signify that it is refreshing.

In case it matters, the page is written in PHP and is hosted on IIS 6.0.  I also have an existing onLoad in my body tag to show a clock.
ASKER CERTIFIED SOLUTION
Avatar of Designbyonyx
Designbyonyx
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of shtaffa
shtaffa

ASKER

I think that this may be a bit too involved for what I'm trying to accomplish.  This is just a dashboard page that is connected to a monitor mounted on a wall.  There is no user interaction so I don't care about user input or page position being lost.

When the page loads, it grabs my Nagios status.dat file, parses through it and uploads the results to an MSSQL database.  The page then displays a summary of host and service statuses as well as any details for hosts and services that are in an error state.  It also performs some queries of the database behind my homebrew ticketing system and displays the status for any open issues.

Forgive me for being ignorant, but is this something that can be done easily with Ajax?  I can get my way around pretty well with PHP, but am really inexperienced when it comes to javascript.
Yep its pretty easy and very powerful. It adds that wow factor as you start getting stuff that can auto update on pages and it allows you to change small bits of the page, with any server side code without having to refresh the whole page. I love using ajax so I always recommend it if I can :)
Well the neat thing about it is this... for each "widget" on your dashboard, you can have (and probably should have) a php file which echos the HTML of the widget.  The your dashboard page can look like this (syntax adjusted for readability):

Dashboard.php

include header.php;
include nav.php;
include staticContent.php;
include widgets/widget1.php;
include widgets/widget2.php
include widgets/widget3.php
include footer.php;

Then with AJAX (and jQuery if you want life to be simple), you can call on the widgets individually to update their content:

(Note: I am writing this by hand, and simply trying to give you an ideo of how simple this can be)

Here a good resource to get you started:
http://articles.sitepoint.com/article/ajax-jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>

<script type="text/javascript">
jQuery(function($) {
    setTimeout(loadWidges, (1000 * 60));

    function loadWidgets() {
        $('#widget1').load('widgets/widget1.php');
        $('#widget2').load('widgets/widget2.php');
        $('#widget3').load('widgets/widget3.php');
    }
});
</script>

<!-- Dashboard.php -->
<div id="header"><div>
<div id="nav"></div>
<div id="staticContent"></div>
<div id="widget1"></div>
<div id="widget2"></div>
<div id="widget3"></div>
<div id="footer"></div>

Open in new window

Avatar of shtaffa

ASKER

This is all fine.  I think that I may be able to use some of these concepts in some other pages.  I'll just have to do some self study.

However, I don't think that Ajax is what I want to use on this page.  I want the all of the information on this page to refresh every minute.  I don't want individual items to load separately.  I want the database to refresh and then the latest status to be displayed for all items.  I suppose I could do this using the widget concept, but it seems like it's a lot of unnecessary code.

What I was originally hoping for was a solution to show a loading notification on the page at the time that the page started loading and once all of the information was displayed the notification would disappear.
That's AJAX my friend.  

When you see the loading graphic on a page, and then the page content refreshes, it's AJAX doing the work behind the scenes.  What you are wanting is not possible with a page refresh/reload/redirect.

You can do the AJAX method on the entire BODY tag if you want.  Just load your dashboard.php file into the body tag.

$('body').load('dashboard.php');

Believe me, once you try it you will see how easy it really is, and you will reuse this countless of times, probably on every future project you ever work on.  Plus, it looks good on the resume that you can do AJAX ;)

Cheers.
"Believe me, once you try it you will see how easy it really is, and you will reuse this countless of times, probably on every future project you ever work on. "  <-- Haha my exact same thoughts :)
Avatar of shtaffa

ASKER

Darn it!  You guys are going to force me to learn something.  Oh well, off to brush up on Java.
whoa whoa... no Java involved... Javascript is completely different.  Check out that link I sent you, and you can be up in going in an hour or two.

http://articles.sitepoint.com/article/ajax-jquery
Avatar of shtaffa

ASKER

From http://articles.sitepoint.com/article/ajax-jquery: "To complete this tutorial, you'll need some basic JavaScript knowledge."

Then I see this:
<script type="text/JavaScript">
   $(document).ready(function(){
     $("#generate").click(function(){
       $("#quote p").load("script.php");
     });
   });
   </script>

I can see that it's a function that is waiting for a click and when that click happens it is loading script.php, but I don't understand all of the syntax.  I've resolved that I'm going to teach myself javascript.  I agree that ajax is very powerful, but without a basic understanding of java, I'm lost.
No worries.

The $(document).ready() thing tells jQuery not to run the script until the closing HTML tag has loaded.

Basically, that code can be read "When the document is ready (when the closing HTML tag has been loaded) then find an element with an ID "generate".  Whenever "generate" is clicked, then load "script.php" and put the content inside the element with an ID of "quote".

If you are going to be using jQuery, you can skip right here:

http://docs.jquery.com/Main_Page
http://docs.jquery.com/Tutorials
<!-- When someone clicks the link "Generate a Quote", then jQuery is going to load "scripts.php".  Scripts.php should echo some HTML code for a quote.  Once jQuery receives this HTML, it will inject it into the paragraph tag inside the "quote" div. -->

<a id="generate">Generate a Quote</a>
<div id="quote"><p>The quote will be loaded here</p></div>

<script type="text/JavaScript"> 
   $(document).ready(function(){ 
     $("#generate").click(function(){ 
       $("#quote p").load("script.php"); 
     }); 
   }); 
</script>

Open in new window