PHP+Javascript = 'onchange' pb fixed with JPSPAN

GBS · April 19, 2005

Hi there,,

1st, i'm french, so please apologize for my 'bad english', & i hope it is the good section to post for this subject (& a long one,, sorry for that),

After few days of 'active search', i've finally found what i was looking for about the 'onchange' function, using javascript, php & mysql. The challenge was to refresh a web page while you are querying a mysql database without reloading the page using a submit function, & to show automatically the database search result in a txt box.

Most of the answers i've read about this subject was:

no it cant be done,
Java script is client side. PHP is server side,

*special thks to reijnemans for his good explains & to have help me to understand what was the real problem,,

... untill i've read a subject on the same probem & a miraculous answer came to me:

Sephiriz *< i love him/her )
Yes, it IS possible to use Javascript and PHP together and to finally have client-side PHP stuff working.

Look into the JPSpan class. It effectively generates Javascript functions based on PHP code, and makes liberal application of the XMLHTTP protocol to fetch data in a dynamic manner without refreshing the page.

& the solution was there: JPSPAN site

(If some of you know some easiest way to get the same result, any help or comments are welcomed,,)

I post a Zipcode script as example. The script just search in a Zipcode database for zipcode/town & send the town/zipcode wanted.

zipcode.php3 file:

----------------

<script type="text/javascript" src="<?php path(); ?>/zipcode_server.php?client"></script>
<script type="text/javascript">
var intervalId = false;
var LogHandler = {
   getrequesttail: function(result) {
       document.getElementById('requestTail').innerHTML = "<pre>"+result+"</pre>";
   },
   geterrortail: function(result) {
       document.getElementById('errorTail').innerHTML = "<pre>"+result+"</pre>";
   }
}

function GetTown() {
   var obj = new someclass(SomeHandler);
   obj.gettown(document.getElementById('s_zipcode').value);
}

function GetCP() {
   var obj = new someclass(SomeHandler);
   obj.getcp(document.getElementById('s_town').value);
}

var SomeHandler = {
   gettown: function(result) {
if (!result);
else
 {
 document.getElementById('s_town').value = result;
 }
   },

   getcp: function(result) {
if (!result);
else
 {
 document.getElementById('s_zipcode').value = result;
 }
   }
}
</script>
<?
// Just a utility to help the example work out where the server URL is...
function path() {
   $basePath = explode('/',$_SERVER['SCRIPT_NAME']);
   $script = array_pop($basePath);
   $basePath = implode('/',$basePath);
   if ( isset($_SERVER['HTTPS']) ) {
       $scheme = 'https';
   } else {
       $scheme = 'http';
   }
   echo $scheme.'://'.$_SERVER['SERVER_NAME'].$basePath;
}
?>
</head>
<body>
<h1>Town & ZipCode script</h1>
Town: <input type="text" id="s_town" size="39" onchange = "GetCP()">                   
or ZipCode: <input type="text" id="s_zipcode" maxlength="6" size="12" value="" onchange = "GetTown()"> </font>
</body>
</html>

zipcode_server.php file:

----------------

<?php
// $Id: log_server.php,v 1.4 2004/11/23 14:10:56 harryf Exp $
/**
* This is a remote script to call from Javascript
*/
//-----------------------------------------------------------------------------------
require_once 'jps/JPSpan.php';
require_once JPSPAN . 'Server/PostOffice.php';
require_once JPSPAN . 'Types.php';
//-----------------------------------------------------------------------------------
class Logger {
   function success($Data) {
       // Ignore LogReader requests
       if ( $Data['requestInfo']['class'] == 'logreader' ) {
           return;
       }
       $message = '['.$Data['gmt'].'] Successful call to: '.
           $Data['requestInfo']['class'].'.'.$Data['requestInfo']['method']."\n";
       error_log($message, 3, dirname(__FILE__)."/jps/data/request.log");
   }
   
   function error($Data) {
       $message = '['.$Data['gmt'].'] Error: '.
           $Data['errorName'].' - '.
               str_replace(array("\n","\r\n"),'',$Data['errorMsg'])."\n";
       error_log($message, 3, dirname(__FILE__)."/jps/data/error.log");
   }
}

// Setup the monitor
define ('JPSPAN_MONITOR', TRUE);
require_once JPSPAN . 'Monitor.php';
$M = & JPSpan_Monitor::instance();
$M->addObserver(new Logger());
//-----------------------------------------------------------------------------------
class SomeClass {
   function GetTown($cp) {
$dbhost="localhost";
$dbuser="urlogin";
$dbpass="urpass";
$dbname="codepostaux";
@mysql_pconnect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname);
$sql = 'SELECT cpinsee,city FROM fichier WHERE cpinsee = "'.$cp.'"';
$req_ville_cpinsee=mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$rows = mysql_num_rows($req_ville_cpinsee);
if($rows > 0)
 {
 while($res_ville_cpinsee=mysql_fetch_array($req_ville_cpinsee))
 	{ 
 	$town=$res_ville_cpinsee['city'];
 	}
   	return "$town";
 }
   }

   function GetCP($town) {
$dbhost="localhost";
$dbuser="urlogin";
$dbpass="urpass";
$dbname="codepostaux";
@mysql_pconnect($dbhost, $dbuser, $dbpass);
mysql_select_db($dbname);
$sql = 'SELECT cpinsee,city FROM fichier WHERE city = "'.$town.'"';
$req_ville_cpinsee=mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
$rows = mysql_num_rows($req_ville_cpinsee);

if($rows > 0)
 {
 while($res_ville_cpinsee=mysql_fetch_array($req_ville_cpinsee))
 	{ 
 	$cpinsee=$res_ville_cpinsee['cpinsee'];
 	}
 return "$cpinsee";
 }
   }
}
//-----------------------------------------------------------------------------------
function chopLine($line) {
   if ( strlen($line) > 80 ) {
       return substr($line,0,80)."\n";
   }
   return $line;
}
class LogReader {
   function __readLog($fileName) {
       $file = file($fileName);
       if ( count($file) > 10 ) {
           $file = array_slice($file, count($file)-10);
       }
       $tail = array_reverse($file);
       $lines = array_map('chopLine',$tail);
       return implode('',$lines);
   }
}
$S = & new JPSpan_Server_PostOffice();
$S->addHandler(new SomeClass());
$S->addHandler(new LogReader());
//-----------------------------------------------------------------------------------
if (isset($_SERVER['QUERY_STRING']) && strcasecmp($_SERVER['QUERY_STRING'], 'client')==0) {
   define('JPSPAN_INCLUDE_COMPRESS',TRUE);
   $S->displayClient();
} else {
   require_once JPSPAN . 'ErrorHandler.php';
   $S->serve();
}
?>

the database to create:

----------------

CREATE TABLE `fichier` (
 `zipcode` text NOT NULL,
 `cpinsee` text NOT NULL,
 `city` text NOT NULL
) TYPE=MyISAM;

INSERT INTO `fichier` VALUES ('750100', '75000', 'PARIS');
INSERT INTO `fichier` VALUES ('750101', '75001', 'PARIS 1ER ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750102', '75002', 'PARIS 2EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750103', '75003', 'PARIS 3EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750104', '75004', 'PARIS 4EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750105', '75005', 'PARIS 5EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750106', '75006', 'PARIS 6EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750107', '75007', 'PARIS 7EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750108', '75008', 'PARIS 8EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750109', '75009', 'PARIS 9EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750110', '75010', 'PARIS 10EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750111', '75011', 'PARIS 11EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750112', '75012', 'PARIS 12EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750113', '75013', 'PARIS 13EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750114', '75014', 'PARIS 14EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750115', '75015', 'PARIS 15EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750116', '75016', 'PARIS 16EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750116', '75116', 'PARIS 16EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750117', '75017', 'PARIS 17EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750118', '75018', 'PARIS 18EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750119', '75019', 'PARIS 19EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('750120', '75020', 'PARIS 20EME ARRONDISSEMENT');
INSERT INTO `fichier` VALUES ('780646', '78000', 'VERSAILLES');
INSERT INTO `fichier` VALUES ('', '', '');

You also need to download JPSPAN functions to make it works:

JPSPAN dl link

As i'm quite n00b in php+javascript+mysql, i couldn't help & explain how it works,... but it works !

Hope it helps some,,

l8tr,,

dedogs · June 14, 2005

Bonjour,

Could you save the current progress of the form to a cookie. Refreash the page with the dynamic content and then reload where the user left off from the cookie?

if multiple dynamic content is needed - check if the value has changed in the refreshed form compared to the data in the cookie. If it has then send a varible to php asking for the new dynamic content.

good luck, but what your doing sounds way to complicated for what it is.

GBS · September 2, 2005

Bonsoir,

& sorry, the answer is quite in late,

Could you save the current progress of the form to a cookie. Refreash the page with the dynamic content and then reload where the user left off from the cookie?

Hmm,... I'm not too good about cookies,... but what you've suggested could be an idea,... yep,... if some could show me how to start to get the same result with cookies/dynamic content,, I'll be glad to learn,,

good luck, but what your doing sounds way to complicated for what it is.

Maybe it's a little complicated, but, finally, it's working as I wanted,...

I put a link to see it in action: testing script

just to comment, on the test-page, the part after:

>And you can test it also for select:<

the first select input 'select a town' is defined normally,, but onchange event, it queries the database and gets the result shown (is my english improving ?,, lol) in the second select input,

Hoping it helps,

l8tr,,

OLG · September 2, 2005

you know we cant visit local host right? lol

GBS · September 2, 2005

Ooooops sorry,.... little mistake there,,... lol

link updated,,

davidoff · October 11, 2005

AJAX: http://en.wikipedia.org/wiki/Ajax_%28programming%29

GBS · October 21, 2005

Hi,

davidoff,

Thanks for the link,, AJAX looks very usefull & nice to use too,

l8tr,

hrtz · October 23, 2005

Real opportunity..

I am glad to be in this forum...

If you have any hacking script plz let me know...

How they works etcc...

Plz PM me for any such info...

Thanks

GBS · April 19, 2006

Hi there,

I know that's not really a kind of 'php hacking', it's more about the way to use javascript... but maybe it could gives some ideas for some of you,....

I put a link on a website I've made [english version is for soon,, I promise,, ]

[a href=\"http://vic.loc.free.fr/\" target=\"_blank\"]webpage[/a]

There is none < table > tag used (only CSS used) & the navigation is just made with innerHTML function / javascript, so the navigation is quite fast to me,, (no need to refresh the all page, clicking on a link),

I'm still working on it, about the way to resize the elements/photos, depending of the screen resolution,... work is on the way,,

Hoping it will give some ideas,,

l8tr,,

Sign In

PHP+Javascript = 'onchange' pb fixed with JPSPAN

Recommended Posts

GBS

Link to comment

Share on other sites

dedogs

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

OLG

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

davidoff

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

hrtz

Link to comment

Share on other sites

GBS

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information