Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Display web page loading notification

Posted on 2010-08-19
12
Medium Priority
?
597 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
12 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 1000 total points
ID: 33476918
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 1000 total points
ID: 33477126
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
ID: 33477288
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Expert Comment

by:Snarfles
ID: 33477342
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
ID: 33477893
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
ID: 33479029
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
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 33479154
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
ID: 33481786
"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
ID: 33504518
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
ID: 33504645
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
ID: 33504724
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
ID: 33504866
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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

609 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