AJAX - creo form dinamico e processo

[George_star]

Ciao a tutti,
premettendo che sono novello di ajax e javascript...
Visto che me la cavicchio benino con php stavo cercando di creare una parte di un sito, quella gestionale, in maniera più user friendly senza mille refres della pagina e così mi sono imbattuto in ajax.
Quel che vorrei fare è semplice. Ho una pagina > clicco su un link > Viene incorporata una pagina con un form > Invio il form e mi viene richiamata questa pagina che era incorporata > Processati i dati inviati > Stampa
non riesco a capire la logica per farlo....

Qui cosa ho fatto: nella mia pagina principale metto un link che cliccato mi carica un piccolo form presente su un'altra pagina. Il codice ajax per incorporare la pagina: (ometto la creazione dell'oggetto xmlhttp)

Pagina

function makeRequest(serverPage, objID) {
	var obj = document.getElementById(objID);
    xmlhttp.open("GET", serverPage, true);
    xmlhttp.onreadystatechange = function() {
    	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        	obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

a questo punto nel div scelto mi compare un form presente in serverPage. Codice della pagina richiamata

<div style="border:dashed #999 thin">
<?php
	if($_POST[['test'] == 'ok')
		{
		print $_POST['nick'];
		}
		else
		{
?>
<form method="post" action="pagina.php" onsubmit="inviaDati(); return false;">false
<label>Nick</label>: <input type="text" name="nick">

<input type="submit" name="submit" value="Invia Dati" />
<input name="test" type="hidden" value="ok" />
</form>
<?php
		}
?>
</div>

alla pressione del bottone vorrei che venisse richiamato questo codice e semplicemente processato e stampato il risultato...

function AJAXReq(method,url,bool){  
  if(xmlhttp){
	  xmlhttp.onreadystatechange = handleResponse;
	  xmlhttp.open(method,url,bool);
	  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	  xmlhttp.send(stringa);
  }else{
    alert("Impossibilitati ad usare AJAX");
  }
}


//Manipolo i dati per l'invio da form
function PreparaDati(){
  stringa = "";
  var form = document.forms[0];
  var numeroElementi = form.elements.length;
  
  for(var i = 0; i < numeroElementi; i++){
    if(i < numeroElementi-1){
      stringa += form.elements[i].name+"="+encodeURIComponent(form.elements[i].value)+"&";
    }else{
      stringa += form.elements[i].name+"="+encodeURIComponent(form.elements[i].value);
    }  
  }
}


function handleResponse(){
  if(xmlhttp.readyState == 4){
    if(xmlhttp.status == 200){
		var obj = document.getElementById("pagina");
		obj.innerHTML = xmlhttp.responseText;

    }else{
      alert("Niente da fare, AJAX non funziona :(");
    }
  }
}


//Invio i dati
function InviaDati(){
  PreparaDati();
  AJAXReq("POST","pagina.php",true);
}

ovviamente nulla... quale procedimento devo seguire?
help

[cavicchiandrea]

In questi casi io consiglio sempre di mettere una pagina demo online e postare il link cosi da verificare testare, detto questo la funzione InviaDati dove si trova Nella pagina "principale" o nella pagina form inclusa via ajax?
E la funzione PreparaDati che mi sembra di capire recupera i dati dal form per metterli in una stringa cosi facendo non ne disponi, i dati li devi inviare nelle funzione AJAXReq.
La guida che trovi qui l'hai letta?

[George_star]

tutto il codice ajax è nella pagina principale quella che viene richiamata ha solo il codice

<div style="border:dashed #999 thin">
<?php
	if($_POST[['test'] == 'ok')
		{
		print $_POST['nick'];
		}
		else
		{
?>
<form method="post" action="pagina.php" onsubmit="inviaDati(); return false;">false
<label>Nick</label>: <input type="text" name="nick">

<input type="submit" name="submit" value="Invia Dati" />
<input name="test" type="hidden" value="ok" />
</form>
<?php
		}
?>
</div>

e nient'altro.
La guida l'ho letta forse mi sarà sfuggito qualcosa ma la cosa che non riesco a capire è la logica della costruzione.
ero abituato a fare una pagina divisa in 2, quando scrivevo in php. La parte alta faceva un semplice test se era stato inviato il form se si faceva quel che doveva fare altrimenti lo visualizzava.
ora includendo così in ajax mi trovo disorientato, non capisco a che codice può accedere la inclusa...
sto facendo vari tentativi e mi ritrovo sempre che all'ultimo click mi viene visualizzata la pagina finale che dovrebbe lavorare in background

[George_star]

nessuno?

[cavicchiandrea]

Non hai risposto a tutto quello che t'ho chiesto, se vuoi aiuto cerca d'essere collaborativo, e se la guida non l'hai capita rileggila ed eventualmente chiedi qui i passaggi + difficili.

[George_star]

Stasera cerco di carica re l'esempio in modo da esser più chiaro...
cmq grazie

[George_star]

ECCO IL TEST
http://www.studyo3.com/Test/AjaxTest01/

si apre una pagina con un link 'pagina'. Cliccandoci sopra viene caricato un file php di nome 'pagina.php' che è composto da un semplice form con un campo ed un bottone di invio.
Scrivendo qualcosa e poi cliccando sul bottone il file 'pagina.php' dovrebbe essere sostituito da 'getform.php' che gestisce i dati del form. il problema è che i dati vengono passati effettivamente a getform.php ma sostituendo la pagina intera e non solo la parte che prima era occupata dal form... l'url diventa infatti http://www.studyo3.com/Test/AjaxTest01/getform.php

I codici integrali delle tre pagine
INDEX.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>Test Ajax1</title>
<script type="text/javascript">
<!--

// Creo l'oggetto AJAX ////////////////////////////////////////////////////
//Crea variabile booleana se è una sessione Internet Explorer
var xmlhttp = false;

//Controlla se si sta usando IE
try {
	//Se vesione di Javascript è maggiore alla 5
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
    	//Se no allora uso un x object più  vecchio
        try {
        //Se si sta usando IE
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
        	//Altrimenti non si sta usando IE
            xmlhttp = false;
        }
}
//Se non si sta usando IE creo un'istanza dell'oggetto
if(!xmlhttp && typeof XMLHttpRequest != 'undefined') 
	{
	xmlhttp = new XMLHttpRequest();
}
/////////////////////////////////////////////////////////////////////////////////////

function makeRequestForm(method, serverPage, objID) {
	preparaDati();
	var obj = document.getElementById(objID);
    xmlhttp.open(method, serverPage, true);
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
	xmlhttp.send(stringa);
    xmlhttp.onreadystatechange = function() {
    	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        	obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}

function makeRequest(method, serverPage, objID) {
	var obj = document.getElementById(objID);
    xmlhttp.open(method, serverPage, true);
    xmlhttp.onreadystatechange = function() {
    	if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        	obj.innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.send(null);
}


//Manipolo i dati per l'invio da form
function PreparaDati(){
  stringa = "";
  var form = document.forms[0];
  var numeroElementi = form.elements.length;
  
  for(var i = 0; i < numeroElementi; i++){
    if(i < numeroElementi-1){
      stringa += form.elements[i].name+"="+encodeURIComponent(form.elements[i].value)+"&";
    }else{
      stringa += form.elements[i].name+"="+encodeURIComponent(form.elements[i].value);
    }  
  }
}


//-->
</script>
</head>

<body>
Pagina
<div id="pagina"></div>
</body>
</html>

PAGINA.PHP

<div style="border:dashed #999 thin">
<form method="post" action="getform.php" onsubmit="makeRequestForm('POST','getform.php', 'pagina'); return false;">
<label>Nick</label>: <input type="text" name="nick">

<input type="submit" name="submit" value="Invia Dati" />
<input name="test" type="hidden" value="ok" />
</form>
</div>

GETFORM.PHP

<?php
	print 'Se oltre compare qualcosa ce l\'ho fatta: -->'.$_POST['nick'];
?>

Domanda stupida...ma nei file php deve essere riscritto il codice javascript?
PS lo so che le funzioni makeRequest e makeRequestForm possono essere unite in una...appena capisco la logica di tutto passo a questa cosa....

Grazie a tutti per la pazienza...ma non riesco proprio a capire come gestire il get e il post...

[cavicchiandrea]

Come t'avevo già detto i dati non li puoi passare con la funzione preparaDati difatti firefox (console) riporta

Errore: preparaDati is not defined
File sorgente: http://www.studyo3.com/Test/AjaxTest01/
Riga: 35

Potrò sembrare logorroico ma rileggiti la guida oppure un libro.
Per testare le pagine usa firefox con installato firebug molto utile

[George_star]

mi sono riletto la parte con l'esempio della guida per il passaggio dei dati con get o post...
non riesco proprio a capirla la differenza o almeno la logica che ci sta dietro...
o anche se includo un file questo si comporta come quando in php includi un file php o no...

[cavicchiandrea]

Giorge, sarà come dici:

mi sono riletto la parte con l'esempio della guida per il passaggio dei dati con get o post...

anche se ho forti dubbi, il concetto di recuperare i dati tramite funzione è una cosa tutta tua, forse ti mancano le basi js? Non so più che dirti non è difficile, ma se non capisci la logica cerca un libro oppure una scuola che faccia corsi, l'inclusioni non centrano nulla, e non fare paralleli con php dato che js esula dal linguaggio server che usi.