Problema con autocompletamento e nuovi campi....

Emix

Utente Attivo
15 Feb 2010
596
0
16
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

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>
Aiutatemi a capire per favore... Sto diventando matto...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
richiamare due versioni di jquery diverse puo creare conflitti
HTML:
<!-- 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>
o una o l'altra, sempre meglio quella aggiornata
metti degli alert() nel codice javascript in modo da vedere dove ti fermi
 

Emix

Utente Attivo
15 Feb 2010
596
0
16
richiamare due versioni di jquery diverse puo creare conflitti
HTML:
<!-- 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>
o una o l'altra, sempre meglio quella aggiornata
metti degli alert() nel codice javascript in modo da vedere dove ti fermi

Ho cambiato nelle due pagine html il codice di lettura ajax, lasciando solamente :

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

Ma ugualmente non mi funziona... non legge un cavalo...
Se vuoi provare, o vedere il sorgente :

http://adminteclis.altervista.org/prove/prova.htm
http://adminteclis.altervista.org/prove/prova1.htm

sono le due pagine html scritte sopra con il codice script cambiato...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
questo file non esiste
HTML:
<script type="text/javascript" src="/js/ajax.js"></script>
controlla meglio il percorso
 

Emix

Utente Attivo
15 Feb 2010
596
0
16
ho sistemato anche quello ed ora controllando cn firebug mi scrive questi errori:

SyntaxError: syntax error
showClientData()prova.htm (riga 68)
onreadystatechange()ajax.js (riga 176)

che sarebbero rispettivamente :

HTML:
function showClientData()
	{
		var formObj = document.forms['clientForm'];	
		eval(ajax.response);
	}

e il secondo :

HTML:
if (self.responseStatus[0] == "200") {
								self.onCompletion();
							} else {
								self.onError();
							}


Che significa???
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
significa Errore di sintassi
prova a vedere cosa contiene la risposta ajax con un alert
Codice:
function showClientData()
	{
		var formObj = document.forms['clientForm'];	
                alert(ajax.response);
		eval(ajax.response);
	}
 

Emix

Utente Attivo
15 Feb 2010
596
0
16
Funziona cosi... Nel senso che questo è il risultato :

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>Documento senza titolo</title>
</head>

<body>
formObj.firstname.value = 'John';
formObj.lastname.value = 'Alastname';
formObj.address.value = 'Queens street 15';
formObj.zipCode.value = '4000';
formObj.city.value = 'STAVANGER';
formObj.country.value = 'NORWAY';
 
</body>
</html>

Però non si compilano i vari campi.... da soli....
 

Emix

Utente Attivo
15 Feb 2010
596
0
16
sembra come se non compilasse il form da solo... ma in realta legge e fa tutto il resto...
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ho fatto delle prove in locale e sono riuscito a farlo funzionare
l'effetto non è male pero credo che ci si poteva arrivare anche in maniera piu semplice
cmq togli tutto l'html da getClient.php, lascia solo cio che c'è tra i tag <?php
 

Emix

Utente Attivo
15 Feb 2010
596
0
16
si sembrerebbe che funziona... sei stato gentilissimo.... se volessi integrarlo ad un mio script per completare altri campi, mi basta cambiare i campi utilizzo? Inoltre... io ho una pagina con una riga formata da 4 campi dinamici, nel senso che l'utente decide quanti campi gli servono ed in automatico crea righe da 4 blocchi (ti do link faccio prima www.laviadellanima.com/prove/ddt1.htm ) io questo script lo integro a quello gia esistente per la creazione dei 4 blocchi e il riempimento automatico tramite barcode... Ma come faccio poi a mandare il tuo in un DB?
 

Emix

Utente Attivo
15 Feb 2010
596
0
16
nada?
io sto provando a modificare includendo mio DB e campi da me scelti
 
Discussioni simili
Autore Titolo Forum Risposte Data
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema con eccessiva nitidezza apertura Camera Raw Photoshop 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7
S Problema con mysqli_num_rows PHP 18
grgfede Problema javascript con aruba Javascript 1

Discussioni simili