ajax: trovato codice adatto ma..

Ok ragazzi, ho trovato l'esempio ajax per completare altri campi di un form

inserendo i dati in uno solo a questa pagina:

http://www.dhtmlgoodies.com/index.html?whichScript=ajax_client_lookup

Ho scaricato l'esempio e l'ho un po' sfoltito per semplicità, ecco il codice

delle 2 pagine (ajax.js a parte):

la pagina con il form:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Dev-PHP 1.9.4">
<title>Document Title</title>
   <script type="text/javascript" src="js/ajax.js"></script>
   <script type="text/javascript">

   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="cc.html" method="post"> <fieldset>
<legend>Client information</legend> <table>

<tr> <td>Client ID:</label></td> <td><input name="clientID"
id="clientID" size="5" maxlength="4"></td> </tr>
<tr> <td>First name:</label></td> <td><input name="firstname"
id="firstname" size="20" maxlength="255"></td> </tr>

</table> </form>
</fieldset>

</body>
</html>

questa invece la pagina php che interroga il db getClient.php:

<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('client', $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";

  }else{
    echo "formObj.firstname.value = '';\n";
     }
}
?>

Come ho detto rispetto all'originale sono un po' tagliate, ma anche in locale le pagine (dopo aver creato la tabella nel db ecc ecc) funzionano benissimo.

Il problema è che non sono riuscito a capire perchè adattandole alla pagina che mi interessa non funziona più. Il tutto si ricollega a un mio vecchio topic:

http://www.phpnews.it/forum/index.php?topic=1660.0

Io ho provato a "ricopiare" il codice sopra nella mia pagina articoli.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Dev-PHP 1.9.4">
<title>Form dati</title>
<style type="text/css">
   /* Big box with list of options */
   #ajax_listOfOptions{
      position:absolute;   /* Never change this one */
      width:175px;   /* Width of box */
      height:250px;   /* Height of box */
      overflow:auto;   /* Scrolling features */
      border:1px solid #317082;   /* Dark green border */
      background-color:#FFF;   /* White background color */
      text-align:left;
      font-size:0.9em;
      z-index:100;
   }
   #ajax_listOfOptions div{   /* General rule for both .optionDiv and .optionDivSelected */
      margin:1px;      
      padding:1px;
      cursor:pointer;
      font-size:0.9em;
   }
   #ajax_listOfOptions .optionDiv{   /* Div for each item in list */
      
   }
   #ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
      background-color:#317082;
      color:#FFF;
   }
   #ajax_listOfOptions_iframe{
      background-color:#F00;
      position:absolute;
      z-index:5;
   }
   
   form{
      display:inline;
   }
   
   </style>
   <script type="text/javascript" src="js/ajax.js"></script>
   <script type="text/javascript">

   var ajax = new sack();
   var currentClientID=false;
   function getClientData()
   {
      var clientId = document.getElementById('codice').value.replace(/[^0-9]/g,'');
      if(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['art'];   
      eval(ajax.response);
   }
   
   
   function initFormEvents()
   {
      document.getElementById('codice').onblur = getClientData;
      document.getElementById('codice').focus();
   }
   
   
   window.onload = initFormEvents;
   </script>

   <script type="text/javascript" src="js/ajax-dynamic-list.js"></script>
<SCRIPT LANGUAGE="javascript">
<!--
function validate_form()
{

    if (document.art.codice.value==document.art.codice.defaultValue ||
    document.art.codice.value.indexOf(' ',0)==0)
    {
        alert('\nNessun codice inserito.')
        document.art.codice.select()
        document.art.codice.focus()
        return false
    }
      if ((isNaN(document.art.codice.value)) ||  document.art.codice.value.indexOf('-',0)==0 ||  document.art.codice.value.indexOf('+',0)==0) {
   alert("Codice non valido.");
   document.art.codice.value = "";
   document.art.codice.focus();
   return false;
        }

    if (document.art.descrizione.value==document.art.descrizione.defaultValue ||
    document.art.descrizione.value.indexOf(' ',0)==0)
    {
        alert('\nNessuna descrizione inserita.')
        document.art.descrizione.select()
        document.art.descrizione.focus()
        return false
    }

    if (document.art.quantita.value==document.art.quantita.defaultValue ||
    document.art.quantita.value.indexOf(' ',0)==0)
    {
        alert('\nNessuna quantità inserita.')
        document.art.quantita.select()
        document.art.quantita.focus()
        return false
    }

    if (document.art.quantita.value.indexOf(',') >= 0){
   alert("Per i decimali utilizzare il punto, es: 4 chili e mezzo= 4.5");
   document.art.quantita.value = "";
   document.art.quantita.focus();
   return false;
        }

     if ((isNaN(document.art.quantita.value))|| document.art.quantita.value.indexOf('-',0)==0 ||  document.art.quantita.value.indexOf('+',0)==0) {
   alert("Quantità non valida.");
   document.art.quantita.value = "";
   document.art.quantita.focus();
   return false;
        }


    if (document.art.prezzo.value==document.art.prezzo.defaultValue ||
    document.art.prezzo.value.indexOf(' ',0)==0)
    {
        alert('\nNessun prezzo inserito.')
        document.art.prezzo.select()
        document.art.prezzo.focus()
        return false
    }

     if (document.art.prezzo.value.indexOf(',') >= 0){
   alert("Per i decimali utilizzare il punto, es: 3 euro e 55 cent = 3.55");
   document.art.prezzo.value = "";
   document.art.prezzo.focus();
   return false;
}

     if ((isNaN(document.art.prezzo.value))|| document.art.prezzo.value.indexOf('-',0)==0 ||  document.art.prezzo.value.indexOf('+',0)==0) {
   alert("Prezzo non valido.");
   document.art.prezzo.value = "";
   document.art.prezzo.focus();
   return false;
        }
}
//----------------------------------------
// -->
</SCRIPT>
</head>

<body bgcolor="#DAB88B" onload="document.art.codice.focus();" >
<TABLE border=0 width=100% cellpadding=3>
<tr>
<td width=100% colspan=2>
<p align=center><b>Inserisci Articoli</b>
<form name="art" method="POST" action="fatt1.php" target="fatt1"  onSubmit="return validate_form()">
</td>
</tr>
<tr>
<td width=18%><b>Codice</b></td>
<td width=82%><input type=text name="codice" id="codice" size=10></td>
</tr>
<tr>
<td width=18%><b>Descrizione</b></td>
<td width=72%><input type="text" name="descrizione" id="descrizione" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)">
</td>
</tr>
<tr>
<td width=18%><b>Quantità</b></td>
<td width=82%><input type=text name="quantita"  size=10></td>
</tr>
<tr>
<td width=18%><b>Prezzo Un.</b></td>
<td width=82%><input type=text name="prezzo"  size=10></td>
</tr>
<tr>
<td width=18%><b>IVA</b></td>
<td width=82%><select size="1" name="iva">
  <option> 4</option>
  <option> 10</option>
  </select></td>
</tr>
<tr>
<td width=18%><b><input type="submit" name="invia" value="Inserisci"></b></td>
</tr>
</table>
</form>
</body>
</html>

la pagina php è la stessa ma modificata ovviamente:

<?php
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('fattura', $connection);

if(isset($_GET['getClientId'])){
  $res = mysql_query("select * from prodotti where codice='".$_GET['getClientId']."'") or die(mysql_error());
  if($inf = mysql_fetch_array($res)){
    echo "formObj.descrizione.value = '".$inf["descrizione"]."';\n";
  }else{
    echo "formObj.descrizione.value = '';\n";
     }
}
?>

La pagina richiama i dati di una tabella prodotti nel db fattura con i campi id, codice e descrizione

No capisco, dovrebbe funzionare ma se inserisco il codice nel primo campo della pagina articoli.htm

nel campo descrizione non succede niente. Dov'è l'errore.

Grazie

inviato 9 anni fa
frankphp
X 0 X

aspettavo qualche risposta  :'(

risposto 9 anni fa
frankphp
X 0 X

Domani se riesco (e se non mi anticipa qualcun altro) do un'occhiata al codice.

Edit:

vedo che sei stato paziente!

risposto 9 anni fa
LonelyWolf
X 0 X

Dunque, se inserisci il codice nel campo codice non succede niente dici?

Guardandola così mi sembra giusto, dato che nel campo codice non c'è una azione nell'evento onchange (ad esempio),  per cui scrivi quello che vuoi ma nessuna azione avviene.

Invece nella descrizione c'è qualche cosa, per cui dovebbe comparire una "tendina" ogni volta che rilasci un tasto.

Secondo me se usavi xajax era molto più semplice!

risposto 9 anni fa
LonelyWolf
X 0 X

Domani se riesco (e se non mi anticipa qualcun altro) do un'occhiata al codice.

Edit:

vedo che sei stato paziente!

Il campo decrizion fa uso di altro codice ajax.

Xajax non riesco ad utilizzarlo come si deve. Tu cosa avresti fatto con xajax?

risposto 9 anni fa
frankphp
modificato 9 anni fa
X 0 X

Xajax funziona in modo un po' diverso, come utilizzo intendo.

Vediamo come si potrebbe fare.

getClient.php

<?php
function desc_prodotto ($ProdId) {
/* Replace the data in these two lines with data for your db connection */
$connection = mysql_connect('localhost', 'root', '');
mysql_select_db('fattura', $connection);

$objResponse = new xajaxResponse();


if(isset($ProdId)){
  $res = mysql_query("select * from prodotti where codice='$ProdId'") or die(mysql_error());
  if($inf = mysql_fetch_array($res)){
    $objResponse->addAssign("descrizione","value", $inf["descrizione"]);
  }else{
    $objResponse->addAssign("descrizione","value", "");
     }
}
return $objResponse;
}

require("comuni_prodotti.php");
$xajax->processRequests();
?>
?>

comuni_prodotti.php

<?php
require_once ("../xajax.inc.php");

$xajax = new xajax("getClient.php");
$xajax->registerFunction("desc_prodotto");
?>

La pagina con il form:

<?php

require("comuni_prodotti.php");
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Generator" content="Dev-PHP 1.9.4">
<title>Form dati</title>
<style type="text/css">
   /* Big box with list of options */
   #ajax_listOfOptions{
      position:absolute;   /* Never change this one */
      width:175px;   /* Width of box */
      height:250px;   /* Height of box */
      overflow:auto;   /* Scrolling features */
      border:1px solid #317082;   /* Dark green border */
      background-color:#FFF;   /* White background color */
      text-align:left;
      font-size:0.9em;
      z-index:100;
   }
   #ajax_listOfOptions div{   /* General rule for both .optionDiv and .optionDivSelected */
      margin:1px;      
      padding:1px;
      cursor:pointer;
      font-size:0.9em;
   }
   #ajax_listOfOptions .optionDiv{   /* Div for each item in list */
      
   }
   #ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
      background-color:#317082;
      color:#FFF;
   }
   #ajax_listOfOptions_iframe{
      background-color:#F00;
      position:absolute;
      z-index:5;
   }
   
   form{
      display:inline;
   }
   
   </style>
   
   
<SCRIPT LANGUAGE="javascript">
<!--
function validate_form()
{

    if (document.art.codice.value==document.art.codice.defaultValue ||
    document.art.codice.value.indexOf(' ',0)==0)
    {
        alert('\nNessun codice inserito.')
        document.art.codice.select()
        document.art.codice.focus()
        return false
    }
      if ((isNaN(document.art.codice.value)) ||  document.art.codice.value.indexOf('-',0)==0 ||  document.art.codice.value.indexOf('+',0)==0) {
   alert("Codice non valido.");
   document.art.codice.value = "";
   document.art.codice.focus();
   return false;
        }

    if (document.art.descrizione.value==document.art.descrizione.defaultValue ||
    document.art.descrizione.value.indexOf(' ',0)==0)
    {
        alert('\nNessuna descrizione inserita.')
        document.art.descrizione.select()
        document.art.descrizione.focus()
        return false
    }

    if (document.art.quantita.value==document.art.quantita.defaultValue ||
    document.art.quantita.value.indexOf(' ',0)==0)
    {
        alert('\nNessuna quantità inserita.')
        document.art.quantita.select()
        document.art.quantita.focus()
        return false
    }

    if (document.art.quantita.value.indexOf(',') >= 0){
   alert("Per i decimali utilizzare il punto, es: 4 chili e mezzo= 4.5");
   document.art.quantita.value = "";
   document.art.quantita.focus();
   return false;
        }

     if ((isNaN(document.art.quantita.value))|| document.art.quantita.value.indexOf('-',0)==0 ||  document.art.quantita.value.indexOf('+',0)==0) {
   alert("Quantità non valida.");
   document.art.quantita.value = "";
   document.art.quantita.focus();
   return false;
        }


    if (document.art.prezzo.value==document.art.prezzo.defaultValue ||
    document.art.prezzo.value.indexOf(' ',0)==0)
    {
        alert('\nNessun prezzo inserito.')
        document.art.prezzo.select()
        document.art.prezzo.focus()
        return false
    }

     if (document.art.prezzo.value.indexOf(',') >= 0){
   alert("Per i decimali utilizzare il punto, es: 3 euro e 55 cent = 3.55");
   document.art.prezzo.value = "";
   document.art.prezzo.focus();
   return false;
}

     if ((isNaN(document.art.prezzo.value))|| document.art.prezzo.value.indexOf('-',0)==0 ||  document.art.prezzo.value.indexOf('+',0)==0) {
   alert("Prezzo non valido.");
   document.art.prezzo.value = "";
   document.art.prezzo.focus();
   return false;
        }
}
//----------------------------------------
// -->
</SCRIPT>

<?php $xajax->printJavascript('../'); ?>

</head>

<body bgcolor="#DAB88B" onload="document.art.codice.focus();" >
<TABLE border=0 width=100% cellpadding=3>
<tr>
<td width=100% colspan=2>
<p align=center><b>Inserisci Articoli</b>
<form name="art" method="POST" action="fatt1.php" target="fatt1"  onSubmit="return validate_form()">
</td>
</tr>
<tr>
<td width=18%><b>Codice</b></td>
<td width=82%><input type=text name="codice" id="codice" size=10 onkeyup="xajax_desc_prodotto(document.getElementById('codice').value);return false;"></td>
</tr>
<tr>
<td width=18%><b>Descrizione</b></td>
<td width=72%><input type="text" name="descrizione" id="descrizione" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)">
</td>
</tr>
<tr>
<td width=18%><b>Quantità</b></td>
<td width=82%><input type=text name="quantita"  size=10></td>
</tr>
<tr>
<td width=18%><b>Prezzo Un.</b></td>
<td width=82%><input type=text name="prezzo"  size=10></td>
</tr>
<tr>
<td width=18%><b>IVA</b></td>
<td width=82%><select size="1" name="iva">
  <option> 4</option>
  <option> 10</option>
  </select></td>
</tr>
<tr>
<td width=18%><b><input type="submit" name="invia" value="Inserisci"></b></td>
</tr>
</table>
</form>
</body>
</html>

Ovviamente devi sistemare i path in base a dove metti i file di xajax, e soprattutto controllare il codice che ho scritto un po' di fretta (anche se dovrebbe essere abbastanza corretto).

In questo modo chiama la funzione di ricerca della descrizione del prodotto ad ogni cambiamento della casella codice.

risposto 9 anni fa
LonelyWolf
X 0 X

provo pure questa.

Devo cambiare alcune cose però come l'estensione della pagina articoli.

Strano comunque che il codice mio sopra non funzioni visto che praticamente ho copiato

(cambiando solo piccole cose) il codice proposto dal sito che ho scaricato e funziona

benissimo anche in locale.

grazie

risposto 9 anni fa
frankphp
X 0 X

Ho appena avuto 2 minuti per guardare la demo del codice originale, il completamento degli altri campi avviene cambiando il focus ecco perchè non vedevo nulla (e io di js non capisco nulla!).

Comunque ho confrontato per quanto possibile il codice originale con il tuo modificato e l'unica differenza è che hai un evento nel campo descrizione.

Quindi non capisco neanche io.

risposto 9 anni fa
LonelyWolf
X 0 X

Ho appena avuto 2 minuti per guardare la demo del codice originale, il completamento degli altri campi avviene cambiando il focus ecco perchè non vedevo nulla (e io di js non capisco nulla!).

Comunque ho confrontato per quanto possibile il codice originale con il tuo modificato e l'unica differenza è che hai un evento nel campo descrizione.

Quindi non capisco neanche io.

focus? Non ho capito quale sarebbe l'errore in ogni caso.

vabbe, comunque ho utilizzato la tua soluzione e funziona tutto! Grazie.

Adesso posso inserire il codice ed avere il nome relativo nel campo descrizione e se non

ricordo il codice posso provare a cercare direttamente il nome dell'articolo nel menu che si apre

nel campo descrizione appena digitate le iniziali.

Andrebbe bene anche così, però vorrei adesso, tanto per strafare ;D

poter scegliere il nome dell'articolo ed aver automaticamente nel campo codice il codice

relativo (il contrario in pratica).

Penso di dover usare lo stesso codice xajax da te suggerito con qualche modifica, ma temo

che ci possano essere dei conflitti con quello esistente; gia il campo codice

e quello descrizione sono occupati da due onkeyup.

Che ne pensi?

A proposito, scusami,  non ho capito come si collega questa:

onkeyup="xajax_desc_prodotto(document.getElementById('codice').value);return false;"></td>

al codice di getclient.php.

Grazie ancora

risposto 9 anni fa
frankphp
X 0 X

non lo capisci perchè non vedi gli script js che sono messi "dinamicamente" dalla funzione:

<?php $xajax->printJavascript('../'); ?>

Per fare il contrario puoi provare a fare così:

* in getClient.php metti la funzione di ricerca in base alla descrizione, come quella per il codice (function id_prodotto(.... );

* in comuni_prodotti.php devi mettere il register come per l'altra, ma ovviamente con il nome della nuova funzione ($xajax->registerFunction("id_prodotto");

Questo per la parte "tecnica" della cosa.

Per gestirlo secondo me devi mettere un bottone che chiami la ricerca altrimenti va in conflitto on quello che hai già e che apre la tendina, potresti metterlo a fianco del campo + o meno così:

<td width=72%><input type="text" name="descrizione" id="descrizione" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)">
</td>&nbsp;
<input type="button" value="Cerca" onclick="xajax_id_prodotto(document.getElementById('desrcrizione').value);return false;" />

Oppure mettere la chiamata alla funzione di ricerca nel codice js dopo che hai fatto la scelta dal menù a tendina, ma qua non so aiutarti perchè come ho già detto di js conosco poco e niente.

risposto 9 anni fa
LonelyWolf
X 0 X

non lo capisci perchè non vedi gli script js che sono messi "dinamicamente" dalla funzione:

<?php $xajax->printJavascript('../'); ?>

Per fare il contrario puoi provare a fare così:

* in getClient.php metti la funzione di ricerca in base alla descrizione, come quella per il codice (function id_prodotto(.... );

* in comuni_prodotti.php devi mettere il register come per l'altra, ma ovviamente con il nome della nuova funzione ($xajax->registerFunction("id_prodotto");

Questo per la parte "tecnica" della cosa.

Per gestirlo secondo me devi mettere un bottone che chiami la ricerca altrimenti va in conflitto on quello che hai già e che apre la tendina, potresti metterlo a fianco del campo + o meno così:

<td width=72%><input type="text" name="descrizione" id="descrizione" onkeyup="ajax_showOptions(this,'getCountriesByLetters',event)">
</td>&nbsp;
<input type="button" value="Cerca" onclick="xajax_id_prodotto(document.getElementById('desrcrizione').value);return false;" />

Oppure mettere la chiamata alla funzione di ricerca nel codice js dopo che hai fatto la scelta dal menù a tendina, ma qua non so aiutarti perchè come ho già detto di js conosco poco e niente.

grazie ancora.stai diventando indispensabile per il mio progetto :P

per quanto sopra provo la prima soluzione appena ho un po' di tempo (sto impazzendo per il problema dell'header e mi sono reso conto che è meglio affrontare i problemi uno alla volta, quindi se per qualche giorno non vedrai mie risposte su quest'argomento ti prego di non ritenerlo concluso).

Grazie ancora e ciao

risposto 9 anni fa
frankphp
X 0 X

Ok Funziona! :D

Ho provato con la soluzione del bottone.

Per ciò che hai detto sulla chiamata della funzione con JS non sono riuscito a combinare niente.

Dobbiamo aspettare una buon anima che si interessi alla cosa.

Ma potrebbe andare bene anche così, come ho già detto.

Grazie e buona domenica

risposto 9 anni fa
frankphp
X 0 X
Effettua l'accesso o registrati per rispondere a questa domanda