Ajax/PHP Intigration Small Issue

WoodburyMan · Post by **WoodburyMan** » Mon 09 Apr 2012 12:41 pm

Greetings!

First off thank you thank you thank you for your creation. You've done an amazing job! It's a great script!

I managed to integrate this into Saratoga Weather's Ajax/Php weather site by changing the extension to .php and adding Satatog's header and footer's into the file. To get it to work properly the only real problem I ran into was having to comment out a style sheet line on the original page so that the rest of the page maintained Saratoga's fonts and sizes. The only other major mod was just deleting the UV and Radiation gauges from the file, even though I have it disabled in the config file, just to simplify things.

Here is my page with the Gauges.
http://www.grudzien.us/gauges-ss.php

However I have one odd issue. On the page, wherever the unit ° is used (Any temperature setting, or wind direction) it displays "Â°F" or "Â°" for wind direction. It does this on the gauges themselves as well as the hover-over cumulus graphs that it displays. It does this in Firefox, Chrome, Safari and IE on Windows, Mac OSX 10.7 and Ubuntu. I have also tested this with the css file i had commented out re-enabled and it still does the same thing. This does not occur in the HTM original unmodified version on only in my modified PHP version.

I have also attached my gauges-ssT.php file that Cumulus processes for reference as well.

Here is a unmodified stock template file also running on my site for reference.
http://www.grudzien.us/gauges-ss.htm

I am absolutely no expert as css/html/php/javascript. Enough to be dangerous more or less. Quite frankly I'm surprised I managed to get the page look as nice as it is and still work. If there is anything you can do to point me in the correct direction I would greatly appreciate it. I understand this is not a problem with your gauges at all since they work perfectly on there own, but a result of my botching Saratoga and your script together.

beteljuice · Post by **beteljuice** » Mon 09 Apr 2012 1:35 pm

This looks like one of those nasty charsets / save as / no server char header conflicts, that keep cropping up nowadays - even on the bigboys sites.

In the <head> you have declared charset as ISO-8859-1, but lower down in the body you have a <META tag which tries to make it UTF-8 ?

No doubt Mark will be around later !

mcrossley · Post by **mcrossley** » Mon 09 Apr 2012 4:14 pm

Hi, there are a number of 'issues' integrating the SS gauges with the Saratoga templates.

First off is that the Saratoga templates are written to use charset=ISO-8859-1, and the gauges UTF-8.

Secondly is the Saratoga templates are written in XHTML 1.0 Transitional, and the gauges in HTML5. (Your "Valid XHTML 1.0" is not true for that page).

...and you have possibly introduced a third 'issue' in that it looks like the script files when they were edited were not saved back in their original UTF-8 format - though it is hard to tell without access to the original files, the web server may alter them to fit ISO-8859-1.

As beteljuice has pointed out you also have a <meta> tag with a conflicting UTF-8 (and other META's) in the body on the page for the gauges rather than in the header where they belong.

Now, given the gauges have to be HTML5 as they use new HTML5 features...

The 'proper' fix (which some people on the WD forum have done) is to create new versions of the Saratoga header/footer that are also in HTML5/UTF-8 format (UTF-8 is the default character set for HTML5) just for the gauges page. Then you will have a fully HTML5/UTF-8 page which will pass validation.

Another possible solution is to place the gauges in a frame within the page, the frame can then be pure HTML5.

Or you can try editing the gauges.js file, converting it to ISO-8859-1, fixing the degree and superscript characters (if you ever use Sol. rad.) and saving in that format. It may work, I haven't tried it, it depends on how the <canvas> elements handle text encodings.

WoodburyMan · Post by **WoodburyMan** » Mon 09 Apr 2012 8:00 pm

Thanks Mark and beteljuice!

I took the quick route and simply made a frame. I used a regular Saratoga header and footer and just placed a iframe with the regular original gauge-ss.htm as the source and made it seamless and it does the job! Thanks again!

CSS validation passes fine, and XHTML validation passes for the most part besides some errors I have from my footer with my paypal donate button that have lingered for a while I have yet to fix.

Do you have a donation page set up anywhere? I've given both Steve and Saratoga some beer money and I would certainly love to send some your way for your work.

mcrossley · Post by **mcrossley** » Tue 10 Apr 2012 5:40 pm

No donate page for the gauges, just buy me a beer next time you see me

WoodburyMan · Post by **WoodburyMan** » Fri 20 Apr 2012 12:24 pm

WoodburyMan · Post by **WoodburyMan** » Mon 02 Jul 2012 1:09 pm

I kept having to play around recently to get the border's to work correctly. My prev fix worked on most desktop and iPhone 4S in Safari, but recently started running Chrome on both my ICS Tablet and iPhone 4S and had placement issues. Contents of my gauges.php file that includes a bone stock gauges-ss.htm file is as follows and works perfectly on all devices aligned perfectly.

Code: Select all

<?php
############################################################################
# A Project of TNET Services, Inc. and Saratoga-Weather.org (WD-USA template set)
############################################################################
#
#   Project:    Sample Included Website Design
#   Module:     sample.php
#   Purpose:    Sample Page
#   Authors:    Kevin W. Reed <kreed@tnet.com>
#               TNET Services, Inc.
#
# 	Copyright:	(c) 1992-2007 Copyright TNET Services, Inc.
############################################################################
# This program is free software; you can redistribute it and/or
# modify it under the terms of the GNU General Public License
# as published by the Free Software Foundation; either version 2
# of the License, or (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program; if not, write to the Free Software
# Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA
############################################################################
#	This document uses Tab 4 Settings
############################################################################
require_once("Settings.php");
require_once("common.php");
############################################################################
$TITLE= $SITE['organ'] . " - Gauges";
$showGizmo = true;  // set to false to exclude the gizmo
include("top.php");
############################################################################
?>
</head>
<body>
<?php
############################################################################
include("header.php");
############################################################################
include("menubar.php");
############################################################################
?>
<div id="main-copy">
<!-- Start Original -->
<iframe src="gauges-ss.htm" name="gaugeframe" frameborder=”0″ allowfullscreen scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="900" width="735">You need a Frames Capable browser to view this content.</iframe> 
</div><!-- end main-copy -->

<?php
############################################################################
include("footer.php");
############################################################################
# End of Page
############################################################################
?>

Cumulus Support

Ajax/PHP Intigration Small Issue

Ajax/PHP Intigration Small Issue

Re: Ajax/PHP Intigration Small Issue

Re: Ajax/PHP Intigration Small Issue

Re: Ajax/PHP Intigration Small Issue

Re: Ajax/PHP Intigration Small Issue

Re: Ajax/PHP Intigration Small Issue

Re: Ajax/PHP Intigration Small Issue