[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 976
  • Last Modified:

How do I get scrolling database results within php included file using jquery without the usual <div> container trick?

I have an included php file that shows results of a database query on an unattended display board.  When the number of returned rows is less than 12 then the entire list is statically displayed on the screen since it fits perfectly.  After a minute, the query start all over again.  When the query returns more than 11 rows, I want all rows returned to scroll vertically for a minute and then start the process all over again.
0
Sean Ohlrich
Asked:
Sean Ohlrich
  • 15
  • 9
1 Solution
 
Ray PaseurCommented:
Not sure I understand the question, but it sounds a little like the design pattern in this article:
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_11357-Upgrading-the-Marquee-Tag-with-jQuery.html
0
 
Sean OhlrichAuthor Commented:
I have included the code for my display status screen file.  This file is included in a larger package that wraps it up in a div on the screen.  The rest of the screen works fine so I will focus only on this section.  The code example below if you scroll down to the section "BEGIN DISPLAY RESULTS IF NUMBER PENDING IS GREATER THAN 11" you will see where I have tried implementing a java based script to force the resulting data to scroll up but it would never work so I commented it out to show the placement.

<?php
include('display_config.php');
$result11 = 0;
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}
date_default_timezone_set('America/Chicago');
/* START STATUS CONTENT */
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"2\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#000000\" bgcolor=\"#ffffff\">";
echo "<tr class=\"statusheading\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">Name</td>";
echo "<td width=\"200px\" align=\"center\">Order #</td>";
echo "<td width=\"220px\" align=\"center\">Wait Time</td>";
echo "<td width=\"200px\" align=\"center\">Status</td>";
echo "<td width=\"235px\" align=\"center\">Pickup Area</td>";
echo "</tr>";
echo "</table>";
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
// START CUSTOMER DATA AREA HERE
$result11=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2");
$num_rows=mysql_num_rows($result11);

if ($num_rows < 12) {
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
$result1=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
//$result=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
while($row=mysql_fetch_assoc($result1)){
echo "<tr class=\"statusdata\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
//echo "<td width=\"400px\">$row[Shipto_Name]</td>";  // RETURNS FULL SHIPTO NAME FIELD RESULTS
echo "<td width=\"400px\">";echo substr("$row[Shipto_Name]", 0, 16);echo"</td>";  //  RETURNS JUST ENOUGH SHIPTO NAME TO PROPERLY FIT ON THE LINE WITHOUT WRAPPING
echo "<td width=\"200px\" align=\"center\">$row[Order_Num]</td>";
$to_time = strtotime($row[Created_Time]);
$from_time  = strtotime("now");
echo "<td width=\"220px\" align=\"center\">"; if($row['Status']==0) { echo round(abs($to_time - $from_time) / 60). " minutes"; } else { echo "&nbsp;"; } echo "</td>";
echo "<td width=\"200px\" align=\"center\""; if($row['Status']==0) { echo "style=\"color:red\"><b>Pending</b>"; } else { echo "style=\"color:green\"><b>Ready</b>"; } echo "</td>";
echo "<td width=\"235px\" align=\"center\">$row[Pickup_Location]</td>";
echo "</tr>";
}
// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
} else {
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11
//echo "<div id=\"marqueecontainer\" onMouseover=\"copyspeed=pausespeed\" onMouseout=\"copyspeed=marqueespeed\">";
//echo "<div id=\"vmarquee\" style=\"position: absolute; width: 98%;\">";
$result2=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
//$result=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
while($row=mysql_fetch_assoc($result2)){
echo "<tr class=\"statusdata\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
//echo "<td width=\"400px\">$row[Shipto_Name]</td>";  // RETURNS FULL SHIPTO NAME FIELD RESULTS
echo "<td width=\"400px\">";echo substr("$row[Shipto_Name]", 0, 16);echo"</td>";  //  RETURNS JUST ENOUGH SHIPTO NAME TO PROPERLY FIT ON THE LINE WITHOUT WRAPPING
echo "<td width=\"200px\" align=\"center\">$row[Order_Num]</td>";
$to_time = strtotime($row[Created_Time]);
$from_time  = strtotime("now");
echo "<td width=\"220px\" align=\"center\">"; if($row['Status']==0) { echo round(abs($to_time - $from_time) / 60). " minutes"; } else { echo "&nbsp;"; } echo "</td>";
echo "<td width=\"200px\" align=\"center\""; if($row['Status']==0) { echo "style=\"color:red\"><b>Pending</b>"; } else { echo "style=\"color:green\"><b>Ready</b>"; } echo "</td>";
echo "<td width=\"235px\" align=\"center\">$row[Pickup_Location]</td>";
echo "</tr>";
//echo "</div>";
//echo "</div>";
}
// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11
}
echo "</div>";
// END CUSTOMER DATA AREA HERE
echo "</table>";
/* END STATUS SCREEN */
?>

Open in new window

0
 
lenamtlCommented:
I'm using Datatable.js this is very powerful for table and this is possible to set a refresh and poll interval

It is easy, you can set the interval like this
setInterval(function() { oTable.fnDraw; }, 5000);

http://datatables.net/plug-ins/api/
http://datatables.net/forums/discussion/6650/server-side-auto-refresh-table
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!

 
Ray PaseurCommented:
Wow, you may have a lot of work ahead of you.  PHP is doing away with support for the MySQL extension.  I know it's not directly related to your question, but you may want to read this article and build it into your future planning.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/PHP_Databases/A_11177-PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html
0
 
Sean OhlrichAuthor Commented:
lenamtl - I am reading up on the database.js and will try to implement it in my test site.  I will let you know how that goes.

Ray - Man, what a way to ruin someone's weekend... lol.  All kidding aside, this project I am working on is an intranet site on an internal server so I do not have to upgrade beyond mysql functionality for a while and there is no threat of hacking fortunately.  But... I will be retraining myself to start programming for the bump in the road.  I do have a fairly decent size intranet portal site to convert so that will give me plenty of practice.
0
 
Sean OhlrichAuthor Commented:
lenamtl - That solution is not addressing my need for a single query to scroll the results up the page.

When the query runs and there are a large number of rows returned, I want the results to vertically scroll in a looped fashion until a new query is run.  The query being run every minute or two is already coded, it is just the problem of presenting a large number of results in a vertically scrolling page (looped) until the next run.
0
 
Sean OhlrichAuthor Commented:
I found a good example of the end result I am trying to achieve at the following page:

Code Example Here

Demo Page Here - Example #2


I am having trouble getting it to accept each row returned by the database query properly.

Any help would be much appreciated.
0
 
Sean OhlrichAuthor Commented:
If someone can help get me going in the right direction it would be very much appreciated.  I might need some coding help to pull off the syntax properly but I think I am very, very close to a solution.
0
 
Ray PaseurCommented:
The query being run every minute or two is already coded...
I'd like to focus on that for a moment.  The front-end script can repeatedly call the back-end script, and the back-end script can fetch and return a new results set.  This may not be the only way to do it, but it is what I would recommend.

I'll post an explanation of the sample scripts if you want to ask questions.

Please see: http://iconoun.com/demo/temp_ohlrich_client.php

<?php // demo/temp_ohlrich_client.php
error_reporting(E_ALL);

// CREATE VARIABLES FOR OUR HTML
$xyz = date('r');

// TICKER COPIED FROM EXAMPLE 02 AT http://workshop.rs/demo/news-ticker-in-4-lines/
$tkr = <<<EOD
<h2>Example 02</h2>
<ul id="ticker_02" class="ticker">
</ul>
EOD;

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Page in UTF-8 Encoding, Scrolling Ticker</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
// FUNCTION TO LOAD THE TICKER
function ticker_loader(){
	$("#ticker_02").empty();
	$("#ticker_02").load("temp_ohlrich_server.php");
}

// FUNCTION TO SCROLL THE TICKER
function ticker_scroll(){
	$('#ticker_02 li:first').slideUp(function(){
		$(this).appendTo($('#ticker_02')).slideDown();
	});
}

// JQUERY ON PAGE LOAD / DOCUMENT READY LOAD THE TICKER
$(document).ready(function(){
    ticker_loader();
});

// SET INTERVALS TO REPEAT THE FUNCTIONS
setInterval(function(){ ticker_scroll() }, 1000);
setInterval(function(){ ticker_loader(); ticker_scroll() }, 13000);
</script>

<style type="text/css">
.ticker {
	background-color:#eee;
	height:5em;
	width:10em;
	overflow:hidden;
}
.tickerdata {
	font-family:verdana;
	font-size:small;
}
</style>

</head>
<body>

<p>$xyz</p>
$tkr

</body>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

<?php // demo/temp_ohlrich_server.php
error_reporting(E_ALL);

// THIS COULD COME FROM A DATA BASE OR FLAT FILE, SO LONG AS THE MARKUP IS CORRECT
$dat = date('g:i:sa');
$htm = <<<HTM
<li class="tickerdata"> Message #1 $dat</li>
<li class="tickerdata"> Message #2 </li>
<li class="tickerdata"> Message #3 </li>
<li class="tickerdata"> Message #4 </li>
<li class="tickerdata"> Message #5 </li>
<li class="tickerdata"> Message #6 </li>
<li class="tickerdata"> Message #7 </li>
<li class="tickerdata"> Message #8 </li>
<li class="tickerdata"> Message #9 </li>
HTM;
echo $htm;

Open in new window

Please let me know what you think, thanks. ~Ray
0
 
Sean OhlrichAuthor Commented:
I have integrated the sample client code into my existing file.  The structure of the page load is as follows:
index.php - loads scripts, includes status.php (note: ticker loading and interval on lines 94-101)
status.php - client file where, under certain conditions, ticker loading happens (lines 48-53)
temp_ohlrich_server.php - currently flat file with scrolling messages (soon to be replaced with mysql query)

There are currently 3 other jquery loads going on, a weather ticker, a news ticker, and an image rotator besides this status ticker that I am trying to implement as well.

Current problems so far - document load does not happen for initial set of data so data does not appear until after 13 second timer.  I have not tried combining document load events that are currently separated in the index.php file.

index.php
<?php
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
echo "<html xmlns=\"http://www.w3.org/1999/xhtml\">";
echo "<head>";
echo "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />";
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />";
echo "<meta http-equiv=\"pragma\" content=\"no-cache\">";
echo "<meta http-equiv=\"expires\" content=\"Mon, 22 Jul 2002 11:12:01 GMT\">";
echo "<meta http-equiv=\"refresh\" content=\"3600\">";
echo "<title>Display Panel - Index</title>";
echo "<link href=\"includes/style.css\" rel=\"stylesheet\" type=\"text/css\" />";
echo "<script type=\"text/javascript\" src=\"js/rsspausescroller.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jquery.jgfeed.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jRollingNews.js\"></script>";
/*echo "<script type=\"text/javascript\" src=\"js/jquery-latest.min.js\"></script>"; // Ray's solution for scrolling status page */
?>

<script type="text/javascript">
$(document).ready(function() {
$('#statusDiv').load('includes/status.php');
$.ajaxSetup({cache: false});});
</script>

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#statusDiv').load('includes/status.php');
$.ajaxSetup({cache: false});
}, 30000); // refresh every 10000 milliseconds
</script>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=0 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

<script>
// FUNCTION TO LOAD THE TICKER - Contributed by Ray
function ticker_loader(){
	$("#ticker_02").empty();
	$("#ticker_02").load("includes/temp_ohlrich_server.php");
}

// FUNCTION TO SCROLL THE TICKER - Contributed by Ray
function ticker_scroll(){
	$('#ticker_02 li:first').slideUp(function(){
		$(this).appendTo($('#ticker_02')).slideDown();
	});
}

// JQUERY ON PAGE LOAD / DOCUMENT READY LOAD THE TICKER - Contributed by Ray
$(document).ready(function(){
    ticker_loader();
});

// SET INTERVALS TO REPEAT THE FUNCTIONS - Contributed by Ray
setInterval(function(){ ticker_scroll() }, 1000);
setInterval(function(){ ticker_loader(); ticker_scroll() }, 13000);
</script>




<?PHP
echo "</head>";
echo "<body>";
echo "<div id=\"bar_1\"></div>";
echo "<div id=\"siteContainer\">";

echo "<div id=\"leftContainer\">";

echo "<div align=\"center\" id=\"headerDiv\">";
echo "<img src=\"images/trisupply550x210_bigger.png\"/>";
echo "</div>";  // End header div
echo "<div id=\"statusDiv\">";
include('includes/status.php');
echo "</div>"; // End status div

echo "</div>"; // End left container div

echo "<div id=\"rightContainer\">";

echo "<div id=\"weatherDiv\">";
include('includes/weather.php');
echo "</div>"; // End weather div

echo "<div id=\"advertiseDiv\">";
include('index_ads.php');
// include('includes/advertise.php');
echo "</div>"; // End advertise div

echo "</div>"; // End right container

echo "</div>"; // End site container
echo "<script>$('#bar_1').jRollingNews({'feed':'http://news.yahoo.com/rss/business','background_color':'#000000','text_color':'#ffffff','line_height':'65','scroll_rss_content':'true','hide_title_for_scrolled_content':'true'});</script>";
echo "</body>";
echo "</html>";
?>

Open in new window


status.php
<?php
include('display_config.php');
$result11 = 0;
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}
date_default_timezone_set('America/Chicago');
/* START STATUS CONTENT */
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"2\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#000000\" bgcolor=\"#ffffff\">";
echo "<tr class=\"statusheading\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">Name</td>";
echo "<td width=\"200px\" align=\"center\">Order #</td>";
echo "<td width=\"220px\" align=\"center\">Wait Time</td>";
echo "<td width=\"200px\" align=\"center\">Status</td>";
echo "<td width=\"235px\" align=\"center\">Pickup Area</td>";
echo "</tr>";
echo "</table>";
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
// START CUSTOMER DATA AREA HERE
$result11=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2");
$num_rows=mysql_num_rows($result11);

if (($num_rows > 10) && ($num_rows < 12)){
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
$result1=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
while($row=mysql_fetch_assoc($result1)){
echo "<tr class=\"statusdata\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">";echo substr("$row[Shipto_Name]", 0, 16);echo"</td>";  //  RETURNS JUST ENOUGH SHIPTO NAME TO PROPERLY FIT ON THE LINE WITHOUT WRAPPING
echo "<td width=\"200px\" align=\"center\">$row[Order_Num]</td>";
$to_time = strtotime($row[Created_Time]);
$from_time  = strtotime("now");
echo "<td width=\"220px\" align=\"center\">"; if($row['Status']==0) { echo round(abs($to_time - $from_time) / 60). " minutes"; } else { echo "&nbsp;"; } echo "</td>";
echo "<td width=\"200px\" align=\"center\""; if($row['Status']==0) { echo "style=\"color:red\"><b>Pending</b>"; } else { echo "style=\"color:green\"><b>Ready</b>"; } echo "</td>";
echo "<td width=\"235px\" align=\"center\">$row[Pickup_Location]</td>";
echo "</tr>";
}
// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
} else {
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11



//include('temp_ohlrich_client.php'); // Going to put the file contents below
$xyz = date('r');
echo "<p>$xyz</p>";
echo "<h2>Example 02</h2>";
echo "<ul id=\"ticker_02\" class=\"ticker\">";
echo "</ul>";





// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11
}
echo "</div>";
// END CUSTOMER DATA AREA HERE
echo "</table>";
/* END STATUS SCREEN */
?>

Open in new window


temp_ohlrich_server.php
<?php // demo/temp_ohlrich_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

// THIS COULD COME FROM A DATA BASE OR FLAT FILE, SO LONG AS THE MARKUP IS CORRECT
$dat = date('g:i:sa');
//$htm = <<<HTM
echo "<li class=\"tickerdata\"> Message #1 $dat</li>";
echo "<li class=\"tickerdata\"> Message #2 </li>";
echo "<li class=\"tickerdata\"> Message #3 </li>";
echo "<li class=\"tickerdata\"> Message #4 </li>";
echo "<li class=\"tickerdata\"> Message #5 </li>";
echo "<li class=\"tickerdata\"> Message #6 </li>";
echo "<li class=\"tickerdata\"> Message #7 </li>";
echo "<li class=\"tickerdata\"> Message #8 </li>";
echo "<li class=\"tickerdata\"> Message #9 </li>";
//HTM;
//echo $htm;

Open in new window

0
 
Sean OhlrichAuthor Commented:
While I am waiting to fix the timer issue, I am trying (unsuccessfully) to load a mysql query in the temp_ohlrich_server.php file.  Static html <li></li> tags load just fine but I cannot get the results of a query to load in their place.
0
 
Ray PaseurCommented:
Let's try to debug this one thing at a time.  The good news about the "background" scripts in a jQuery/AJAX exercise like this is that you can run them separately from the jQuery - just load them up in a browser and see what you get.  You may want to read this article, since it deconstructs the whole AJAX thing into components that can be debugged separately.
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/A_10712-The-Hello-World-Exercise-with-jQuery-and-PHP.html

I'll take a look at the background script and post back in a few...
0
 
Ray PaseurCommented:
Let's start with this simplified version of the background script.  I cannot test any of this because I do not have your server with your data base, so I'm kind of flying blind, but I understand the principles and can help you with the testing if you can show me the errors as they come up.

Please run this standalone, then use "view source" in your browser and post the results back here, thanks.

<?php // demo/temp_ohlrich_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

// CONNECT AND SELECT THE DATA BASE OR FAIL ON ERROR
include('display_config.php');
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
    trigger_error('Failed to connect to server: ' . mysql_error(), E_USER_WARNING);
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
    trigger_error("Unable to select " . DB_DATABASE, E_USER_ERROR);
}
/* START STATUS CONTENT */
$top = <<<EOD
<table align="center" style="color:#000000" width="100%" border="2" cellspacing="0" cellpadding="5" bordercolor="#000000" bgcolor="#ffffff">
<tr class="statusheading" bordercolor="#ffffff" bgcolor="#ffffff">
<td width="400px">Name</td>
<td width="200px" align="center">Order #</td>
<td width="220px" align="center">Wait Time</td>
<td width="200px" align="center">Status</td>
<td width="235px" align="center">Pickup Area</td>
</tr>
</table>
<table align="center" style="color:#000000" width="100%" border="0" cellspacing="0" cellpadding="5" bordercolor="#ffffff" bgcolor="#ffffff">
EOD;

// START CUSTOMER DATA AREA HERE
$sql = "SELECT * FROM csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC";
$res = mysql_query($sql) or trigger_error("FAIL $sql BECAUSE " . mysql_error(), E_USER_ERROR);
$num = mysql_num_rows($res);

// TEMPORARY FOR DEBUGGING
var_dump($num);

// USE QUERY RESULTS TO CREATE ONE ROW PER ORDER NUMBER
while ($row = mysql_fetch_object($res))
{
    // TRUNCATE TO FIT IN DISPLAY
    $my_ship = substr($row->Shipto_Name, 0, 16);
    
    // IF STATUS IS PENDING
    if ($row->Status == 0)
    {
        $to_time = strtotime($row->Created_Time);
        $fr_time = time();
        $my_time = round(abs($to_time - $fr_time) / 60). " minutes";
        $my_stat = '<span style="color:red;"><b>Pending</b></span>';
    }
    // IF STATUS IS READY
    else
    {
        $my_time = '&nbsp;';
        $my_stat = '<span style="color:green;"><b>Ready</b></span>';
    }
    
    // CREATE THE TABLE ROW
    $out = <<<EOD
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">$my_ship</td> 
    <td width="200px" align="center">$row->Order_Num</td>
    <td width="220px" align="center">$my_time</td>
    <td width="200px" align="center">$my_stat</td>
    <td width="235px" align="center">$row->Pickup_Location</td>
    </tr>
EOD;
    // APPEND ROW TO TABLE TOP
    $top .= $out . PHP_EOL;
}

// CLOSE THE TABLE AND ECHO TO THE BROWSER
$top .= '<table>' . PHP_EOL;
echo $top;

Open in new window

0
 
Sean OhlrichAuthor Commented:
Here ya go.

int(7)
<table align="center" style="color:#000000" width="100%" border="2" cellspacing="0" cellpadding="5" bordercolor="#000000" bgcolor="#ffffff">
<tr class="statusheading" bordercolor="#ffffff" bgcolor="#ffffff">
<td width="400px">Name</td>
<td width="200px" align="center">Order #</td>
<td width="220px" align="center">Wait Time</td>
<td width="200px" align="center">Status</td>
<td width="235px" align="center">Pickup Area</td>
</tr>
</table>
<table align="center" style="color:#000000" width="100%" border="0" cellspacing="0" cellpadding="5" bordercolor="#ffffff" bgcolor="#ffffff">    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">FIRST CUSTOMER</td> 
    <td width="200px" align="center">00365375</td>
    <td width="220px" align="center">23 minutes</td>
    <td width="200px" align="center"><span style="color:red;"><b>Pending</b></span></td>
    <td width="235px" align="center"></td>
    </tr>
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">SECOND CUSTOMER</td> 
    <td width="200px" align="center">00369087</td>
    <td width="220px" align="center">&nbsp;</td>
    <td width="200px" align="center"><span style="color:green;"><b>Ready</b></span></td>
    <td width="235px" align="center">Counter</td>
    </tr>
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">THIRD CUSTOMER</td> 
    <td width="200px" align="center">00369870</td>
    <td width="220px" align="center">&nbsp;</td>
    <td width="200px" align="center"><span style="color:green;"><b>Ready</b></span></td>
    <td width="235px" align="center">Warehouse</td>
    </tr>
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">FOURTH CUSTOMER</td> 
    <td width="200px" align="center">00372044</td>
    <td width="220px" align="center">&nbsp;</td>
    <td width="200px" align="center"><span style="color:green;"><b>Ready</b></span></td>
    <td width="235px" align="center">Counter</td>
    </tr>
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">FIFTH CUSTOMER</td> 
    <td width="200px" align="center">00372048</td>
    <td width="220px" align="center">&nbsp;</td>
    <td width="200px" align="center"><span style="color:green;"><b>Ready</b></span></td>
    <td width="235px" align="center">Warehouse</td>
    </tr>
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">SIXTH CUSTOMER</td> 
    <td width="200px" align="center">00372057</td>
    <td width="220px" align="center">&nbsp;</td>
    <td width="200px" align="center"><span style="color:green;"><b>Ready</b></span></td>
    <td width="235px" align="center">Counter</td>
    </tr>
    <tr class="statusdata" bordercolor="#ffffff" bgcolor="#ffffff">
    <td width="400px">SEVENTH CUSTOMER</td> 
    <td width="200px" align="center">00372132</td>
    <td width="220px" align="center">&nbsp;</td>
    <td width="200px" align="center"><span style="color:green;"><b>Ready</b></span></td>
    <td width="235px" align="center">Warehouse</td>
    </tr>
<table>

Open in new window

0
 
Sean OhlrichAuthor Commented:
The table heading can be removed from the output as I already have the heading row displayed above the data area.
table-sample.png
0
 
Ray PaseurCommented:
Good.   Here's some CSS for the foreground script and the next iteration for the background script.  We have to simplify this and get rid of the tables -- tables were a good formatting option in 1996, but nobody does that any more.
<style type="text/css">
.ticker {
	background-color:white;
	height:auto;
	width:1255px;
	overflow:hidden;
}
ul {
    list-style-type: none;
    padding-left: 10px;
}
span {
	font-family:verdana;
	font-size:small;
}
.cname {
	float:left;
	text-align:left;
	width:400px;
}
.conum {
	float:left;
	text-align:center;
	width:200px;
}
.ctime {
	float:left;
	text-align:center;
	width:220px;
}
.cstat {
	float:left;
	text-align:center;
	width:200px;
}
.cpick {
	float:left;
	text-align:center;
	width:235px;
}
</style>

Open in new window

<?php // demo/temp_ohlrich_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

// CONNECT AND SELECT THE DATA BASE OR FAIL ON ERROR
include('display_config.php');
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
    trigger_error('Failed to connect to server: ' . mysql_error(), E_USER_WARNING);
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
    trigger_error("Unable to select " . DB_DATABASE, E_USER_ERROR);
}
/* START STATUS CONTENT */
$top = NULL;

// START CUSTOMER DATA AREA HERE
$sql = "SELECT * FROM csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC";
$res = mysql_query($sql) or trigger_error("FAIL $sql BECAUSE " . mysql_error(), E_USER_ERROR);
$num = mysql_num_rows($res);

// TEMPORARY FOR DEBUGGING
// var_dump($num);

// USE QUERY RESULTS TO CREATE ONE ROW PER ORDER NUMBER
while ($row = mysql_fetch_object($res))
{
    // TRUNCATE TO FIT IN DISPLAY
    $my_ship = substr($row->Shipto_Name, 0, 16);

    // IF STATUS IS PENDING
    if ($row->Status == 0)
    {
        $to_time = strtotime($row->Created_Time);
        $fr_time = time();
        $my_time = round(abs($to_time - $fr_time) / 60). " minutes";
        $my_stat = '<span style="color:red;"><b>Pending</b></span>';
    }
    // IF STATUS IS READY
    else
    {
        $my_time = '&nbsp;';
        $my_stat = '<span style="color:green;"><b>Ready</b></span>';
    }

    // CREATE THE LIST ITEM
    $out = <<<EOD
  <li>
    <span class="cname">$my_ship</span>
    <span class="conum">$row->Order_Num</span>
    <span class="ctime">$my_time</span>
    <span class="cstat">$my_stat</span>
    <span class="cpick">$row->Pickup_Location</span>
  </li>
EOD;
    // APPEND LIST ITEM
    $top .= $out . PHP_EOL;
}

// ECHO TO THE BROWSER
echo $top;

Open in new window

0
 
Sean OhlrichAuthor Commented:
Database results are now on the screen.  I will work on tweaking the css to make it match the same size/shape of the static display results.  Large font, taller lines, etc...  There is still the pesky initial 13 second delay before the first scrolling result starts.  So much better right now that the database results are being pulled in now.  I am hoping the rest is simple cosmetics.
0
 
Ray PaseurCommented:
Please post the client-side script so I can look for the 13-second delay, thanks.
0
 
Sean OhlrichAuthor Commented:
Here are the updates files index.php that starts the process and ststus.php that controls the display screen portion.

index.php
<?php
echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
echo "<html xmlns=\"http://www.w3.org/1999/xhtml\">";
echo "<head>";
echo "<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />";
echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />";
echo "<meta http-equiv=\"pragma\" content=\"no-cache\">";
echo "<meta http-equiv=\"expires\" content=\"Mon, 22 Jul 2002 11:12:01 GMT\">";
echo "<meta http-equiv=\"refresh\" content=\"3600\">";
echo "<title>Display Panel - Index</title>";
echo "<link href=\"includes/style.css\" rel=\"stylesheet\" type=\"text/css\" />";
echo "<script type=\"text/javascript\" src=\"js/rsspausescroller.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jquery.min.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jquery.jgfeed.js\"></script>";
echo "<script type=\"text/javascript\" src=\"js/jRollingNews.js\"></script>";
/*echo "<script type=\"text/javascript\" src=\"js/jquery-latest.min.js\"></script>"; // Ray's solution for scrolling status page */
?>

<script type="text/javascript">
$(document).ready(function() {
$('#statusDiv').load('includes/status.php');
$.ajaxSetup({cache: false});});
</script>

<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#statusDiv').load('includes/status.php');
$.ajaxSetup({cache: false});
}, 30000); // refresh every 10000 milliseconds
</script>

<script type="text/javascript">

/***********************************************
* Cross browser Marquee II- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var delayb4scroll=2000 //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
var marqueespeed=2 //Specify marquee scroll speed (larger is faster 1-10)
var pauseit=0 //Pause marquee onMousever (0=no. 1=yes)?

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=marqueespeed
var pausespeed=(pauseit==0)? copyspeed: 0
var actualheight=''

function scrollmarquee(){
if (parseInt(cross_marquee.style.top)>(actualheight*(-1)+8))
cross_marquee.style.top=parseInt(cross_marquee.style.top)-copyspeed+"px"
else
cross_marquee.style.top=parseInt(marqueeheight)+8+"px"
}

function initializemarquee(){
cross_marquee=document.getElementById("vmarquee")
cross_marquee.style.top=0
marqueeheight=document.getElementById("marqueecontainer").offsetHeight
actualheight=cross_marquee.offsetHeight
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1){ //if Opera or Netscape 7x, add scrollbars to scroll and exit
cross_marquee.style.height=marqueeheight+"px"
cross_marquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("scrollmarquee()",30)', delayb4scroll)
}

if (window.addEventListener)
window.addEventListener("load", initializemarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", initializemarquee)
else if (document.getElementById)
window.onload=initializemarquee
</script>

<script>
// FUNCTION TO LOAD THE TICKER - Contributed by Ray
function ticker_loader(){
	$("#ticker_02").empty();
	$("#ticker_02").load("includes/temp_ohlrich_server.php");
}

// FUNCTION TO SCROLL THE TICKER - Contributed by Ray
function ticker_scroll(){
	$('#ticker_02 li:first').slideUp(function(){
		$(this).appendTo($('#ticker_02')).slideDown();
	});
}

// JQUERY ON PAGE LOAD / DOCUMENT READY LOAD THE TICKER - Contributed by Ray
$(document).ready(function(){
    ticker_loader();
});

// SET INTERVALS TO REPEAT THE FUNCTIONS - Contributed by Ray
setInterval(function(){ ticker_scroll() }, 1000);
setInterval(function(){ ticker_loader(); ticker_scroll() }, 13000);
</script>




<?PHP
echo "</head>";
echo "<body>";
echo "<div id=\"bar_1\"></div>";
echo "<div id=\"siteContainer\">";

echo "<div id=\"leftContainer\">";

echo "<div align=\"center\" id=\"headerDiv\">";
echo "<img src=\"images/trisupply550x210_bigger.png\"/>";
echo "</div>";  // End header div
echo "<div id=\"statusDiv\">";
include('includes/status.php');
echo "</div>"; // End status div

echo "</div>"; // End left container div

echo "<div id=\"rightContainer\">";

echo "<div id=\"weatherDiv\">";
include('includes/weather.php');
echo "</div>"; // End weather div

echo "<div id=\"advertiseDiv\">";
include('index_ads.php');
// include('includes/advertise.php');
echo "</div>"; // End advertise div

echo "</div>"; // End right container

echo "</div>"; // End site container
echo "<script>$('#bar_1').jRollingNews({'feed':'http://news.yahoo.com/rss/business','background_color':'#000000','text_color':'#ffffff','line_height':'65','scroll_rss_content':'true','hide_title_for_scrolled_content':'true'});</script>";
echo "</body>";
echo "</html>";
?>

Open in new window


status.php
<?php
include('display_config.php');
$result11 = 0;
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
die('Failed to connect to server: ' . mysql_error());
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
die("Unable to select database");
}
date_default_timezone_set('America/Chicago');
/* START STATUS CONTENT */
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"2\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#000000\" bgcolor=\"#ffffff\">";
echo "<tr class=\"statusheading\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">Name</td>";
echo "<td width=\"200px\" align=\"center\">Order #</td>";
echo "<td width=\"220px\" align=\"center\">Wait Time</td>";
echo "<td width=\"200px\" align=\"center\">Status</td>";
echo "<td width=\"235px\" align=\"center\">Pickup Area</td>";
echo "</tr>";
echo "</table>";
echo "<table align=\"center\" style=\"color:#000000\" width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"5\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
// START CUSTOMER DATA AREA HERE
$result11=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2");
$num_rows=mysql_num_rows($result11);

if (($num_rows > 0) && ($num_rows < 12)){
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
$result1=mysql_query("select * from csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC");
while($row=mysql_fetch_assoc($result1)){
echo "<tr class=\"statusdata\" bordercolor=\"#ffffff\" bgcolor=\"#ffffff\">";
echo "<td width=\"400px\">";echo substr("$row[Shipto_Name]", 0, 16);echo"</td>";  //  RETURNS JUST ENOUGH SHIPTO NAME TO PROPERLY FIT ON THE LINE WITHOUT WRAPPING
echo "<td width=\"200px\" align=\"center\">$row[Order_Num]</td>";
$to_time = strtotime($row[Created_Time]);
$from_time  = strtotime("now");
echo "<td width=\"220px\" align=\"center\">"; if($row['Status']==0) { echo round(abs($to_time - $from_time) / 60). " minutes"; } else { echo "&nbsp;"; } echo "</td>";
echo "<td width=\"200px\" align=\"center\""; if($row['Status']==0) { echo "style=\"color:red\"><b>Pending</b>"; } else { echo "style=\"color:green\"><b>Ready</b>"; } echo "</td>";
echo "<td width=\"235px\" align=\"center\">$row[Pickup_Location]</td>";
echo "</tr>";
}
// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS EQUALS OR IS LESS THEN 11
} else {
// BEGIN DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11



//include('temp_ohlrich_client.php'); // Going to put the file contents below
//$xyz = date('r');
//echo "<p>$xyz</p>";
//echo "<h2>Example 02</h2>";
echo "<ul id=\"ticker_02\" class=\"ticker\">";

echo "</ul>";



// END DISPLAY RESULTS IF NUMBER OF PENDING AND READY ROWS IS GREATER THAN 11
}
echo "</div>";
// END CUSTOMER DATA AREA HERE
echo "</table>";
/* END STATUS SCREEN */
?>

Open in new window

0
 
Sean OhlrichAuthor Commented:
I have noticed an odd behavior in the script.  Most of the time, the long scrolling log will function properly but then there will be a single row that will pop up at the top by itself, then "scroll" away to an empty page.  This would repeat 3-4 times and then a normal full display would pop back up.

NOTE:  Because I am refreshing the entire container this all happens within, there could be a single pull of the database and then an infinite loop of that data for this script.  That way, when the container refreshes, it will do a new single pull of data and then continuously loop those results.
0
 
Ray PaseurCommented:
I don't think this is going to work if you keep changing back to using tables.  I switched to using <ul> and <li> for a reason (actually a lot of reasons).  I also think you will have a better chance of getting it right if you lose all the echo statements and instead prepare your variables and HTML document in HEREDOC notation, then use the fewest possible echo statements.

There may also be some complex interaction between the several interval timers and the mix of JavaScript from Dynamic Drive and jQuery.  Looking at it all now, I think you may want to break the screen apart into IFrames.  I only recommend this because what you have here is going to be devilishly hard to debug, and if you go with IFrames, you can develop and debug one IFrame at a time.
0
 
Sean OhlrichAuthor Commented:
Sorry for the confusion.  The tables being used are the preexisting ones that are not part of this scripting problem.  I did implement the changes you provided and everything works perfectly except for the glitchyness of the timer.

the contents of the file you gave me where the tables were removed is here...

<?php // demo/temp_ohlrich_server.php
error_reporting(E_ALL);
date_default_timezone_set('America/Chicago');

// CONNECT AND SELECT THE DATA BASE OR FAIL ON ERROR
include('display_config.php');
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
    trigger_error('Failed to connect to server: ' . mysql_error(), E_USER_WARNING);
}
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
    trigger_error("Unable to select " . DB_DATABASE, E_USER_ERROR);
}
/* START STATUS CONTENT */
$top = NULL;

// START CUSTOMER DATA AREA HERE
$sql = "SELECT * FROM csv_import WHERE Location=101 AND Status < 2 ORDER BY order_num ASC";
$res = mysql_query($sql) or trigger_error("FAIL $sql BECAUSE " . mysql_error(), E_USER_ERROR);
$num = mysql_num_rows($res);

// TEMPORARY FOR DEBUGGING
// var_dump($num);

// USE QUERY RESULTS TO CREATE ONE ROW PER ORDER NUMBER
while ($row = mysql_fetch_object($res))
{
    // TRUNCATE TO FIT IN DISPLAY
    $my_ship = substr($row->Shipto_Name, 0, 16);

    // IF STATUS IS PENDING
    if ($row->Status == 0)
    {
        $to_time = strtotime($row->Created_Time);
        $fr_time = time();
        $my_time = round(abs($to_time - $fr_time) / 60). " minutes";
        $my_stat = '<span style="color:red;"><b>Pending</b></span>';
    }
    // IF STATUS IS READY
    else
    {
        $my_time = '&nbsp;';
        $my_stat = '<span style="color:green;"><b>Ready</b></span>';
    }

    // CREATE THE LIST ITEM
    $out = <<<EOD
  <li>
    <span class="cname">$my_ship</span>
    <span class="conum">$row->Order_Num</span>
    <span class="ctime">$my_time</span>
    <span class="cstat">$my_stat</span>
    <span class="cpick">$row->Pickup_Location</span>
  </li>
EOD;
    // APPEND LIST ITEM
    $top .= $out . PHP_EOL;
}

// ECHO TO THE BROWSER
echo $top;

Open in new window

0
 
Sean OhlrichAuthor Commented:
Success!  I moved the following script to the top of the status.php file from the index.php file and the delay went away and everything is running much more as expected.

<script>
// FUNCTION TO LOAD THE TICKER - Contributed by Ray
function ticker_loader(){
	$("#ticker_02").empty();
	$("#ticker_02").load("includes/temp_ohlrich_server.php");
}

// FUNCTION TO SCROLL THE TICKER - Contributed by Ray
function ticker_scroll(){
	$('#ticker_02 li:first').slideUp(function(){
		$(this).appendTo($('#ticker_02')).slideDown();
	});
}

// JQUERY ON PAGE LOAD / DOCUMENT READY LOAD THE TICKER - Contributed by Ray
$(document).ready(function(){
    ticker_loader();
});

// SET INTERVALS TO REPEAT THE FUNCTIONS - Contributed by Ray
setInterval(function(){ ticker_scroll() }, 1000);
setInterval(function(){ ticker_loader(); ticker_scroll() }, 13000);
</script>

Open in new window

0
 
Ray PaseurCommented:
Great!
0
 
Sean OhlrichAuthor Commented:
Kudos goes out to Ray for his "above and beyond" approach to this problem.  He has opened my eyes to the fact that my late 90's style of coding just can't pull off all the new bells and whistles I want to program today.  Back to school.....   :-)
0

Featured Post

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!

  • 15
  • 9
Tackle projects and never again get stuck behind a technical roadblock.
Join Now