Salve a tutti,
premetto che entrambi gli script sono perfettamente funzionanti...
Io ho una pagina con cui in ajax creo 4 label text cliccando un pulsante, questi label formano un array.
Poi ho creato un altra pagina, dove inserendo il codice mi si autocompleta le altre 4 parti del text...
Ora dovrei integrare il primo al secondo ma non ci riesco...
Questa è la pagina funzionante per la creazione dei 4 blocchi :
Mentre questa è la pagina dell'autocompletamento:
Questa è la pagina di connessione e query :
Infine il file ajax.js che richiama l'autocompletamento
Sapete indicarmi come farlo diventare uno solo??? ci provo ma o riesco a afre i quattro blocchi o riesco a fare l'autocompletamento....
premetto che entrambi gli script sono perfettamente funzionanti...
Io ho una pagina con cui in ajax creo 4 label text cliccando un pulsante, questi label formano un array.
Poi ho creato un altra pagina, dove inserendo il codice mi si autocompleta le altre 4 parti del text...
Ora dovrei integrare il primo al secondo ma non ci riesco...
Questa è la pagina funzionante per la creazione dei 4 blocchi :
PHP:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title>Creazione DdT</title>
<style type="text/css">
* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }
input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }
</style>
</head>
<body>
<form action="read_ddt.php" method="post" name="read">
<p align="center">
<h2><a href="#" id="aggiungi">Aggiungi riga</a></h2>
<div id="campi">
<p>
<div class="campo" style="display: none;">
<input type="text" placeholder="Barcode" name="campo[]">
<input type="text" placeholder="Codice" name="codice[]">
<input type="text" placeholder="Descrizione" name="descrizione[]">
<input type="text" placeholder="Quantità" name="quantita[]">
<a href="#" class="remove">Rimuovi riga</a>
</p>
</div>
</div>
<p>
<input name="read" type="submit" id="read" value="Inserisci">
</p>
</form>
</p>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function() {
$("#aggiungi").click(function() {
elem = $(".campo").first().clone();
elem.css("display", "block");
elem.appendTo("#campi");
});
$("#campi").on("click", ".remove", function() {
$(this).parent().remove();
});
$("#aggiungi").click();
});
</script>
</body>
</html>
Mentre questa è la pagina dell'autocompletamento:
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;
padding-top:85px;
}
fieldset{
width:500px;
margin-left:10px;
}
</style>
<script type="text/javascript" src="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="7" maxlength="7"></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>
Questa è la pagina di connessione e query :
PHP:
<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect("xxxxxx","xxxxx","xxxxx");
mysql_select_db("m49477d1",$connection);
if(isset($_GET['getClientId'])){
$res = mysql_query("select * from articoli where id='".$_GET['getClientId']."'") or die(mysql_error());
if($inf = mysql_fetch_array($res)){
echo "formObj.clientID.value = '".$inf["id"]."';\n"; echo "formObj.barcode.value = '".$inf["Barcode"]."';\n";
echo "formObj.descrizione.value = '".$inf["Descrizione"]."';\n";
echo "formObj.quantita.value = '".$inf["qnt_lucio"]."';\n";
}else{
echo "formObj.clientID.value = '';\n";
echo "formObj.barcode.value = '';\n";
echo "formObj.descrizione.value = '';\n";
echo "formObj.quantita.value = '';\n";
}
}
?>
Infine il file ajax.js che richiama l'autocompletamento
PHP:
/* Simple AJAX Code-Kit (SACK) v1.6.1 */
/* ©2005 Gregory Wild-Smith */
/* www.twilightuniverse.com */
/* Software licenced under a modified X11 licence,
see documentation or authors website for more details */
function sack(file) {
this.xmlhttp = null;
this.resetData = function() {
this.method = "POST";
this.queryStringSeparator = "?";
this.argumentSeparator = "&";
this.URLString = "";
this.encodeURIString = true;
this.execute = false;
this.element = null;
this.elementObj = null;
this.requestFile = file;
this.vars = new Object();
this.responseStatus = new Array(2);
};
this.resetFunctions = function() {
this.onLoading = function() { };
this.onLoaded = function() { };
this.onInteractive = function() { };
this.onCompletion = function() { };
this.onError = function() { };
this.onFail = function() { };
};
this.reset = function() {
this.resetFunctions();
this.resetData();
};
this.createAJAX = function() {
try {
this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
this.xmlhttp = null;
}
}
if (! this.xmlhttp) {
if (typeof XMLHttpRequest != "undefined") {
this.xmlhttp = new XMLHttpRequest();
} else {
this.failed = true;
}
}
};
this.setVar = function(name, value){
this.vars[name] = Array(value, false);
};
this.encVar = function(name, value, returnvars) {
if (true == returnvars) {
return Array(encodeURIComponent(name), encodeURIComponent(value));
} else {
this.vars[encodeURIComponent(name)] = Array(encodeURIComponent(value), true);
}
}
this.processURLString = function(string, encode) {
encoded = encodeURIComponent(this.argumentSeparator);
regexp = new RegExp(this.argumentSeparator + "|" + encoded);
varArray = string.split(regexp);
for (i = 0; i < varArray.length; i++){
urlVars = varArray[i].split("=");
if (true == encode){
this.encVar(urlVars[0], urlVars[1]);
} else {
this.setVar(urlVars[0], urlVars[1]);
}
}
}
this.createURLString = function(urlstring) {
if (this.encodeURIString && this.URLString.length) {
this.processURLString(this.URLString, true);
}
if (urlstring) {
if (this.URLString.length) {
this.URLString += this.argumentSeparator + urlstring;
} else {
this.URLString = urlstring;
}
}
// prevents caching of URLString
this.setVar("rndval", new Date().getTime());
urlstringtemp = new Array();
for (key in this.vars) {
if (false == this.vars[key][1] && true == this.encodeURIString) {
encoded = this.encVar(key, this.vars[key][0], true);
delete this.vars[key];
this.vars[encoded[0]] = Array(encoded[1], true);
key = encoded[0];
}
urlstringtemp[urlstringtemp.length] = key + "=" + this.vars[key][0];
}
if (urlstring){
this.URLString += this.argumentSeparator + urlstringtemp.join(this.argumentSeparator);
} else {
this.URLString += urlstringtemp.join(this.argumentSeparator);
}
}
this.runResponse = function() {
eval(this.response);
}
this.runAJAX = function(urlstring) {
if (this.failed) {
this.onFail();
} else {
this.createURLString(urlstring);
if (this.element) {
this.elementObj = document.getElementById(this.element);
}
if (this.xmlhttp) {
var self = this;
if (this.method == "GET") {
totalurlstring = this.requestFile + this.queryStringSeparator + this.URLString;
this.xmlhttp.open(this.method, totalurlstring, true);
} else {
this.xmlhttp.open(this.method, this.requestFile, true);
try {
this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
} catch (e) { }
}
this.xmlhttp.onreadystatechange = function() {
switch (self.xmlhttp.readyState) {
case 1:
self.onLoading();
break;
case 2:
self.onLoaded();
break;
case 3:
self.onInteractive();
break;
case 4:
self.response = self.xmlhttp.responseText;
self.responseXML = self.xmlhttp.responseXML;
self.responseStatus[0] = self.xmlhttp.status;
self.responseStatus[1] = self.xmlhttp.statusText;
if (self.execute) {
self.runResponse();
}
if (self.elementObj) {
elemNodeName = self.elementObj.nodeName;
elemNodeName.toLowerCase();
if (elemNodeName == "input"
|| elemNodeName == "select"
|| elemNodeName == "option"
|| elemNodeName == "textarea") {
self.elementObj.value = self.response;
} else {
self.elementObj.innerHTML = self.response;
}
}
if (self.responseStatus[0] == "200") {
self.onCompletion();
} else {
self.onError();
}
self.URLString = "";
break;
}
};
this.xmlhttp.send(this.URLString);
}
}
};
this.reset();
this.createAJAX();
}
Sapete indicarmi come farlo diventare uno solo??? ci provo ma o riesco a afre i quattro blocchi o riesco a fare l'autocompletamento....