Solved

Display web page loading notification

Posted on 2010-08-19
12
590 Views
Last Modified: 2012-05-10
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.
0
Comment
Question by:shtaffa
  • 5
  • 4
  • 3
12 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 250 total points
Comment Utility
The problem with your thinking is that if the page "refreshes" or reloads, then any information that the user has input into a form, or any scrolling they have done will be lost/reset.  Also, meta refresh is just bad practice in general.

What you really want to do is have some AJAX calls which update buckets of content on the page asynchronously.  Basically what would happen is you have a page like this:

header
navigation
static content
dashboard widget1
dashboard widget2
dashboard widget3
footer

Then each widget would use javascript (AJAX) to load its content.  Each widget could have it's own PHP file which returns the new and updated HTML.  Then the javascript would insert the new HTML into it's appropriate widget.

widget1.php
widget2.php
widget3.php

Each of these would return HTML with new and updated information to replace the old outdated information.  The HTML returned by the php files could be as simple as this:

(ps.  check out jQuery and AJAX for some easy examples of how to implement this)


// widget1.php

<?php



echo rand(1, 100);



?>



// widget2.php

<?php



echo rand(101, 1000);



?>



// widget3.php

<?php



echo rand(1001, 10001);



?>

Open in new window

0
 
LVL 9

Assisted Solution

by:Snarfles
Snarfles earned 250 total points
Comment Utility
Designbyonyx is right. I was going to suggest ajax. What I would add is that in the widgets you can  get them to auto refresh by using the settimeout javascript function. (http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/)

I would do it like so.

function start(){
//write code that changes the widget from whatever is in there to an <img> tag with your animated gif to signify loading
//immediately call the next function
}

function dotheajax(){
//all the ajax code you need to update the widget
//use the settimeout function to call the start function after x seconds
}
0
 

Author Comment

by:shtaffa
Comment Utility
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.
0
 
LVL 9

Expert Comment

by:Snarfles
Comment Utility
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 :)
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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

0
 

Author Comment

by:shtaffa
Comment Utility
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.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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.
0
 
LVL 9

Expert Comment

by:Snarfles
Comment Utility
"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 :)
0
 

Author Comment

by:shtaffa
Comment Utility
Darn it!  You guys are going to force me to learn something.  Oh well, off to brush up on Java.
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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
0
 

Author Comment

by:shtaffa
Comment Utility
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.
0
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now