Salve a tutti, sto da poco imparando ajax e jquery, sto seguendo un esempio ma non riesco a farlo funzionare... Non capisco se è un mio problema o se c'è qualche problema negli script... posto il codice di seguito:
Pagina prova.htm
Pagina GetClient.php
Pagina GetClient2.php (per provare....)
Pagina Prova1.htm
Ed infine lo script ajax.js
Aiutatemi a capire per favore... Sto diventando matto...
Pagina prova.htm
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Proviamo....</title>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
background-image:url('/images/heading3.gif');
background-repeat:no-repeat;
padding-top:85px;
}
fieldset{
width:500px;
margin-left:10px;
}
</style>
<script type="text/javascript" src="/AJAX/ajax.js"></script>
<script type="text/javascript">
/************************************************************************************************************
Ajax client lookup
Copyright (C) 2006 DTHMLGoodies.com, Alf Magne Kalleland
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library 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
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public
License along with this library; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
written by Alf Magne Kalleland.
Alf Magne Kalleland, 2006
Owner of DHTMLgoodies.com
************************************************************************************************************/
var ajax = new sack();
var currentClientID=false;
function getClientData()
{
var clientId = document.getElementById('clientID').value.replace(/[^0-9]/g,'');
if(clientId.length==4 && clientId!=currentClientID){
currentClientID = clientId
ajax.requestFile = 'getClient.php?getClientId='+clientId; // Specifying which file to get
ajax.onCompletion = showClientData; // Specify function that will be executed after file has been found
ajax.runAJAX(); // Execute AJAX function
}
}
function showClientData()
{
var formObj = document.forms['clientForm'];
eval(ajax.response);
}
function initFormEvents()
{
document.getElementById('clientID').onblur = getClientData;
document.getElementById('clientID').focus();
}
window.onload = initFormEvents;
</script>
</head>
<body>
<form name="clientForm" action="ajax-client_lookup.html" method="post">
<fieldset>
<legend>Client information</legend>
<table>
<tr>
<td><label for="clientID">Client ID:</label></td>
<td><input name="clientID" id="clientID" size="5" maxlength="4"></td>
</tr>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input name="address" id="address" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="zipCode">Zipcode:</label></td>
<td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input name="city" id="city" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td><input name="country" id="country" size="20" maxlength="255"></td>
</tr>
</table>
</form>
<p>In this script, AJAX is used to autofill the form fields after a valid client ID is entered. Valid client IDs in this example are 1001,1002,1003 and 1004.</p>
</fieldset>
</body>
</html>
Pagina GetClient.php
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect("localhost","adminteclis","canisciolti");
mysql_select_db("my_adminteclis",$connection);
if(isset($_GET['getClientId'])){
$res = mysql_query("select * from ajax_client where clientID='".$_GET['getClientId']."'") or die(mysql_error());
if($inf = mysql_fetch_array($res)){
echo "formObj.firstname.value = '".$inf["firstname"]."';\n";
echo "formObj.lastname.value = '".$inf["lastname"]."';\n";
echo "formObj.address.value = '".$inf["address"]."';\n";
echo "formObj.zipCode.value = '".$inf["zipCode"]."';\n";
echo "formObj.city.value = '".$inf["city"]."';\n";
echo "formObj.country.value = '".$inf["country"]."';\n";
}else{
echo "formObj.firstname.value = '';\n";
echo "formObj.lastname.value = '';\n";
echo "formObj.address.value = '';\n";
echo "formObj.zipCode.value = '';\n";
echo "formObj.city.value = '';\n";
echo "formObj.country.value = '';\n";
}
}
?>
</body>
</html>
Pagina GetClient2.php (per provare....)
PHP:
<?php
include('connect.php');
$connection = mysql_connect("localhost","adminteclis","canisciolti");
mysql_select_db("my_adminteclis",$connection);
$id=$_GET['cID'];
if (isset($id)) {
$result=mysql_query("SELECT * FROM ajax_client WHERE clientID='$id'") or die("error: ".mysql_error());
while($plist=mysql_fetch_assoc($result)) {
$json = array(array('field' => 'firstname',
'value' => $plist[firstname]),
array('field' => 'lastname',
'value' => $plist[lastname]),
array('field' => 'address',
'value' => $plist[address]),
array('field' => 'zipCode',
'value' => $plist[zipCode]),
array('field' => 'city',
'value' => $plist[city]),
array('field' => 'country',
'value' => $plist[country]) //last item should have no comma
);
}
}
print json_encode($json);
?>
Pagina Prova1.htm
HTML:
1
2
3
4
5
Clint Larraga
jquery implementation of http://www.dhtmlgoodies.com/scripts/ajax-client-lookup/ajax-client-lookup.html
------- index2.html------------
<HTML>
<HEAD>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
background-image:url('/images/heading3.gif');
background-repeat:no-repeat;
padding-top:85px;
}
fieldset{
width:500px;
margin-left:10px;
}
</style>
<!-- script type="text/javascript" src="jquery-1.5.1.min.js"></script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</HEAD>
<BODY>
<form name="clientForm" action="ajax-client_lookup.html" method="post">
<fieldset>
<legend>Client information</legend>
<table>
<tr>
<td><label for="clientID">Client ID:</label></td>
<td><input name="clientID" id="clientID" size="5" maxlength="4"></td>
</tr>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<!-- td><input name="address" id="address" size="20" maxlength="255"></td -->
<td><textarea name="address" id="address" size="20" maxlength="255"></textarea></td>
</tr>
<tr>
<td><label for="zipCode">Zipcode:</label></td>
<td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input name="city" id="city" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<!-- td><input name="country" id="country" size="20" maxlength="255"></td -->
<td>
<SELECT name="country" id="country">
<option value="">--</option>
<option value="PHILIPPINES">Philippines</option>
<option value="NORWAY">Norway</option>
</SELECT>
</td>
</tr>
<tr>
<td><input type="submit" id="submit" value="submit"></td>
<td><input type="reset" id="reset" value="reset"></td>
</tr>
</table>
</fieldset>
<p>Same as index.html, in JQUERY Valid client IDs in this example are 1001 - 1007.</p>
</form>
<form name="blah" action="ajax-client_lookup.html" method="post">
<fieldset>
<legend>Another Form</legend>
<table>
<tr>
<td><label for="test">test:</label></td>
<td><input name="test" id="test" size="20" maxlength="255" value="should not be resetted when you hit reset 1"></td>
</tr>
<tr>
<td><input type="submit" id="submit" value="submit"></td>
<td><input type="reset" id="reset" value="reset"></td>
</tr>
</table>
</form>
</fieldset>
<div id="images"></div>
<script type="text/javascript">
$("#clientID").bind("change", function(e){
$.getJSON("getClient2.php?cID=" + $("#clientID").val(),
function(data){
$.each(data, function(i,item){
if (item.field == "firstname") {
$("#firstname").val(item.value);
} else if (item.field == "lastname") {
$("#lastname").val(item.value);
} else if (item.field == "address") {
$("#address").val(item.value);
} else if (item.field == "zipCode") {
$("#zipCode").val(item.value);
} else if (item.field == "city") {
$("#city").val(item.value);
} else if (item.field == "country") {
$("#country").val(item.value);
}
});
});
});
</script>
</BODY>
</HTML>
Ed infine lo script ajax.js
HTML:
1
2
3
4
5
Clint Larraga
jquery implementation of http://www.dhtmlgoodies.com/scripts/ajax-client-lookup/ajax-client-lookup.html
------- index2.html------------
<HTML>
<HEAD>
<style type="text/css">
body{
background-repeat:no-repeat;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
height:100%;
background-color: #FFF;
margin:0px;
padding:0px;
background-image:url('/images/heading3.gif');
background-repeat:no-repeat;
padding-top:85px;
}
fieldset{
width:500px;
margin-left:10px;
}
</style>
<!-- script type="text/javascript" src="jquery-1.5.1.min.js"></script -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</HEAD>
<BODY>
<form name="clientForm" action="ajax-client_lookup.html" method="post">
<fieldset>
<legend>Client information</legend>
<table>
<tr>
<td><label for="clientID">Client ID:</label></td>
<td><input name="clientID" id="clientID" size="5" maxlength="4"></td>
</tr>
<tr>
<td><label for="firstname">First name:</label></td>
<td><input name="firstname" id="firstname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="lastname">Last name:</label></td>
<td><input name="lastname" id="lastname" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<!-- td><input name="address" id="address" size="20" maxlength="255"></td -->
<td><textarea name="address" id="address" size="20" maxlength="255"></textarea></td>
</tr>
<tr>
<td><label for="zipCode">Zipcode:</label></td>
<td><input name="zipCode" id="zipCode" size="4" maxlength="5"></td>
</tr>
<tr>
<td><label for="city">City:</label></td>
<td><input name="city" id="city" size="20" maxlength="255"></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<!-- td><input name="country" id="country" size="20" maxlength="255"></td -->
<td>
<SELECT name="country" id="country">
<option value="">--</option>
<option value="PHILIPPINES">Philippines</option>
<option value="NORWAY">Norway</option>
</SELECT>
</td>
</tr>
<tr>
<td><input type="submit" id="submit" value="submit"></td>
<td><input type="reset" id="reset" value="reset"></td>
</tr>
</table>
</fieldset>
<p>Same as index.html, in JQUERY Valid client IDs in this example are 1001 - 1007.</p>
</form>
<form name="blah" action="ajax-client_lookup.html" method="post">
<fieldset>
<legend>Another Form</legend>
<table>
<tr>
<td><label for="test">test:</label></td>
<td><input name="test" id="test" size="20" maxlength="255" value="should not be resetted when you hit reset 1"></td>
</tr>
<tr>
<td><input type="submit" id="submit" value="submit"></td>
<td><input type="reset" id="reset" value="reset"></td>
</tr>
</table>
</form>
</fieldset>
<div id="images"></div>
<script type="text/javascript">
$("#clientID").bind("change", function(e){
$.getJSON("getClient2.php?cID=" + $("#clientID").val(),
function(data){
$.each(data, function(i,item){
if (item.field == "firstname") {
$("#firstname").val(item.value);
} else if (item.field == "lastname") {
$("#lastname").val(item.value);
} else if (item.field == "address") {
$("#address").val(item.value);
} else if (item.field == "zipCode") {
$("#zipCode").val(item.value);
} else if (item.field == "city") {
$("#city").val(item.value);
} else if (item.field == "country") {
$("#country").val(item.value);
}
});
});
});
</script>
</BODY>
</HTML>