Problema con autocompletamento e nuovi campi....

  • Creatore Discussione Creatore Discussione Emix
  • Data di inizio Data di inizio
Emix

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...
 
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
 
criric ha scritto:
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
Clicca per allargare...

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...
 
questo file non esiste
HTML: 
<script type="text/javascript" src="/js/ajax.js"></script>
controlla meglio il percorso
 
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???
 
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);
	}
 
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....
 
sembra come se non compilasse il form da solo... ma in realta legge e fa tutto il resto...
 
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
 
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?
 
nada?
io sto provando a modificare includendo mio DB e campi da me scelti
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

voldemort
Problema in Shopify con Pixel Facebook
Risposte
1
Visite
2K
E-Commerce
m.pittini
M
O
problema con dvr dahua xvr5116
Risposte
0
Visite
2K
IP Cam e Videosorveglianza
oky74
O
G
Problema con Xampp
Risposte
1
Visite
1K
Web Server
GreatOtaku
G
andrea barletta
Problema con miniature comandi
Risposte
0
Visite
1K
Photoshop
andrea barletta
andrea barletta
I
problema con alice
Risposte
0
Visite
1K
Posta Elettronica
ilprincipiante
I
N
Problema con position absolute e overflow
Risposte
4
Visite
1K
HTML e CSS
Nocciolina
N
L
Problema con inner join
Risposte
11
Visite
2K
PHP
marino51
marino51
K
[php] Problema con inner join
Risposte
4
Visite
2K
PHP
Kiko74b
K
K
[PHP] Problema con variabili concatenate.
Risposte
1
Visite
1K
PHP
thanatos
T
O
  • Bloccata
problema con query
Risposte
4
Visite
2K
PHP
Odino7009
O
I
problema con 2 account
Risposte
1
Visite
2K
Posta Elettronica
WmbertSea
WmbertSea
L
problema collegamento file css con html
Risposte
1
Visite
2K
HTML e CSS
WEBLEADERS
W
E
Problema accesso a file con app sviluppata con MIT APP INVENTOR 2
Risposte
0
Visite
3K
Sviluppo app per Android
emanuelespinelli
E
M
Problema con Try Catch
Risposte
0
Visite
2K
PHP
migo80
M
Sergio Unia
Problema con gli eventi del mouse su una data table:
Risposte
2
Visite
2K
Javascript
Sergio Unia
Sergio Unia
T
PROBLEMA CON SESSIONI
Risposte
3
Visite
2K
PHP
thanatos
T
T
  • Bloccata
ALTRO PROBLEMA CON ARRAY PHP
Risposte
1
Visite
1K
PHP
Max 1
Max 1
R
problema con else
Risposte
0
Visite
735
PHP
REddiy6
R
T
PROBLEMA CON ARRAY
Risposte
8
Visite
1K
PHP
marino51
marino51
L
problema con query select
Risposte
2
Visite
1K
PHP
luigithen
L
Alto Basso