|
|
Posted by one man army on 01/22/06 22:18
In article <AuSdnS-Ieqrk-E7enZ2dnUVZ_vydnZ2d@comcast.com>,
Randy Webb <HikksNotAtHome@aol.com> wrote STUFF
The following describes three situations:
a) a javascript demo and its structure
b) the attempt at using JS/PHP, and what went wrong
c) the proposed finished product
========================================================================
A - A Demo Site in Javascript/CSS/HTML
There are two pages, lets call them Intro and Main. There is a single
Javascript core, which is shared by both pages by means of a script
include in the <HEAD>. The same JS functions are called in both Intro
page and Main page.
<script type="text/javascript" src="lHd.js" DEFER> </script>
The Intro page consists of a table with a form in its center. It is
named index.html. Along with sharp graphics and a logo, there is a
single INPUT, type=TEXT.
<input size="10" id="zipRaw_id" name="zipRaw_name">
(TEXT by default,apparently. I added TYPE later)
The form looks like this:
<form name="ZipEnterText" method="get"
onsubmit="return mainZipCheck()"
action="aBasicSearchResult.html" >
--
Javascript function mainZipCheck() {
var zipFld = null;
// use a cover func with compatability code
zipFld = getElementById_s( "zipRaw_id");
if ( zipFld == null ) return;
// do a simple RegEx check for digits
if ( false == checkZipValid( zipFld.value))
return false;
if ( false == lkupZip( zipFld.value)) {
window.alert( "Is that a valid California Zip Code?");
return false;
}
return true;
}
--
// (this is one of two places the SQL will come in later)
Javascript function lkupZip() {
uses a global called gzZip_DataSrc
a javascript data object loaded by rote with 3000 zip codes inline
search the gzZip_DataSrc
return found
}
function zipDataObj( inZip) { this.zdZip = inZip;}
function makeZipArray() {
var i = 0;
this[i++] = new zipDataObj( 90001 );
...
}
--
Intro page is complete. When mainZipCheck() return true, the browser
gets the url xxx/aBasicSearchResult.html?zipRaw_name="90000"
==========
Main Page
Upon entering the page, onLoad() checks for a URL with a tail. If
present, the tail is read for zipRaw_name. Call the same lkupZip() for
sanity check. This time, another global data object is initialized,
gaAddr_DataSrc the Addr object. Same rote javascript inline data
technique - the second place where SQL will be needed. The function take
the ZipStr, an Array that will be filled out with indexes into the
gaAddr_DataSrc, and returns the count of items found.
function doAddrSearch( inZipStr, ioResArray)
If addresses are found, a function is called to show the results on the
Main page.
On the Main page, there is a form in the sidebar with an identically
named input and a submit button. Additional criteria are there also,
which were defaulted from the intro page.
<form name="EnterData" method="get" onsubmit=" return mainZipCheck()">
<input size="10" id="zipRaw_id" name="zipRaw_name" maxlength="10" >
So when the submit button is pressed, the browser gets a new URL
xxx/aBasicSearchResult.html?zipRaw_name="90000" The Action apparently
defaults to the current page.
Main Page is complete.
========================================================================
B- What I tried and How it Went Wrong
I found by reading USENET and some web sites that there was a hack
that allowed a dynamic appending of a script element, which then
executes. By specifying that script element as Javascript, but calling
the file xxx.php, an arbitrary amount of JS/PHP can be executed, eg
Dynamically Loaded Scripts.
I created a MySQL database with a table of Zip Codes, and the PHP
snippet which calls the database and executes a simple query. I used
phpMyAdmin to load the database and create the query string.
In the Intro page I experimented with onSubmit() and the Action in the
form. I was having problems, so I added a button which simply called a
javascript function for testing purposes.
I intended to call PHP to do the query, then read the result back in
Javascript. Since I could not find a way of passing a PHP var into
something Javascript can read, I set the content of a hidden field to
the number of items found, or the error msg on SQL error.
This all worked. But in the next line of Javascript, upon returning
from the execution of the PHP via document.body.appendChild(
scriptElement), the result of the query was not there yet. Apparently
there is some kind of event loop or somesuch that queued the execution
of the PHP. The result was there visibly in the browser window, and on
inspection with the Firefox DOM inspector.
I do not know how to queue an event to chain calls in this
environment. So the Intro page failed, and I did not get to the Main
page.
The Javascript looks like this:
// jsHack Setup - Get base url
var url = document.location.href;
var xend = url.lastIndexOf("/") + 1;
var base_url = url.substring(0, xend);
var jsHack_get_error = false;
function introZipCheck()
{
var tUrlStr = 'zipLkUp.php';
// add ZipStr to URL for the PHP code
tUrlStr = tUrlStr + '?' + 'z=' + getElementById_s('zipRaw_id').value;
jsHack_do( tUrlStr );
// check return result in a hidden field
var elem = getElementById_s('divZipCheckRes');
if ( null == elem ) {
window.alert( "introZipCheck() - Problem finding result?");
return false;
}
var tNode = elem.firstChild;
if ( "1" != tNode.data) {
window.alert( tNode.data + " Is that a valid California Zip
Code?");
return false;
}
return true;
}
//----------------------------------------
function jsHack_do (url) {
// Does URL begin with http?
if (url.substring(0, 4) != 'http') {
url = base_url + url;
}
// Create new JS element
var jsel = document.createElement('SCRIPT');
jsel.type = 'text/javascript';
jsel.src = url
// Append JS element (therefore executing the the PHP call)
document.body.appendChild (jsel);
return true;
}
-------------
The PHP file that is called looks like this
<?php
include_once("./connect.inc.php");
// defines $database, $map_testC
$zip = $_GET['z'];
$sql = 'SELECT `cazZip` FROM `zips_CA` WHERE cazZip = ' . $zip;
$selected = mysql_select_db($database, $map_testC) ;
if ( !$selected ) {
$res = 'Not connected : ' . mysql_error();
} else {
$Result1 = mysql_query($sql, $map_testC) ;
if ( !$Result1 ) {
$res = 'No query : ' . mysql_error();
} else {
$res = mysql_num_rows($Result1);
}
}
?>
// a javascript function which sets text content of a DOM element
// use an inline PHP snippet to read the result string
setTextContent( getElementById_s('divZipCheckRes'),
"<?php echo $res; ?>" );
========================================================================
C- The Desired Result
I am attempting to dynamically update a page, based on local databases
in Main. I tried an experiment with XMLHttpRequest() earlier, but found
I was not able to call outside of my own domain without purchasing an
digital signature certificate from Verisign or someone. That led me down
the path of jsHack(), Dynamically Loaded Scripts. Due to the nature of
my problem, I believe I can preprocess any data I will need and rely on
local databases. I have put a large amount of effort into the jsHack()
approach. Since I have all the parts working and am just missing reading
the result from PHP back into Javascript, it seems like the right idiom
might finish the puzzle.
Also, I want to minimize the URL passing. Eventually there will be
data that the solution requires is not publicly visible and putting that
into the URL seems sloppy. Primarily though I am looking for the dynamic
page updates that are the mark of current browser software.
This is my first Javascript program so I am more than willing to
change the design approach as appropriate. I appreciate thoughful
comments or suggestions, and do appreciate the answers I have read on
USENET that let me get as far as I have.
Navigation:
[Reply to this message]
|