jquery .load() di pagina con form

[ricman]

Provo a spiegare quest'altro problemino...

Ho tre pagina:
- index.php -> pagina di layout dell'intero sito (comprende menu che richiama le pagine con .load() di jquery).
- pag1.tpl -> layout della pagina che richiama il menu
- pag1.php -> script vari che gestiscono il contenuto di pag1.tpl

index.php, come dicevo, richiama pag1.tpl.
pag1.tpl (che poi è html) ha un form che manda i dati a pag1.php.

Il menu (su index.php) richiama le pagine dentro un div apposito tramite .load() di jquery e funziona bene.
Adesso vorrei far sì che il form della pagina caricata resti a funzionare dentro il div... invece al momento "esce" da index.php e apre pag1.php.
Dovrei quindi mandare i dati a pag1.php MA RESTARE "caricato" nel div di index.php

Mi sarò spiegato? ...spero di si...


Metto anche un esempio:

index.php

Carica pag1
... ...
<div id="content"></div>

pag1.tpl

<form action="pag1.php?op=list" method="post" name="xxx" id="xxx">
... ...
<input name="invia" type="submit" class="invia" value="Salva modifiche" />

[longilineo]

se ho ben capito tu vuoi far fare al submit del form la stessa cosa che fa il pulsante del menu tramite load.

ti consiglio di usare un form privo di pulsante di submit con un pulsante che invochi la load sul contenuto del form:

<form id='form1'>
     parametro1: <input type='text' name='par1' />
     parametro2: <input type='text' name='par2' />
    <button id='but1'>Invia</button>
</form>


<script type='text/javascript'>
    $("#but1").click(
         function(){
              //creo la query string
              var qs = $("#form1").serialize();
             
              //invoco la load con la querystring 
              $("#content").load("pag1.php?"+qs);
         }
    )     

     
</script> 

per evitare che il submit parta alla pressione del tasto invio puoi usare la .serialize anche per un blocco qualunque, quindi puoi mettere il contenuto del form in un semplice div

<div id='form1'>
     parametro1: <input type='text' name='par1' />
     parametro2: <input type='text' name='par2' />
</div>
<button id='but1'>Invia</button>

<script type='text/javascript'>
    $("#but1").click(
         function(){
              //creo la query string
              var qs = $("#form1").serialize();
             
              //invoco la load con la querystring 
              $("#content").load("pag1.php?"+qs);
         }
    )     

     
</script> 

[longilineo]

scusa il doppio post, ma mi sono accorto solo ora che c'è un errore nella versione con il form, considera direttamente la versione con il div al posto del form

[ricman]

Originariamente inviato da longilineo
scusa il doppio post, ma mi sono accorto solo ora che c'è un errore nella versione con il form, considera direttamente la versione con il div al posto del form

Si. Credo che tu abbia capito il problema: avere la struttura di index.php con la pagina (pag1) già caricata che si "refresha" senza perdere layout e posizione di index.php.

Ah... è così "macchinoso"? Non esiste quindi una soluzione, un "onclick()" o altro, che mandi i dati toccando il meno possibile il codice (quello che mostravo nel primo post)?
Non ho ancora fatto test con il codice che mi suggerisci. Credo di aver capito il da farsi, ma vedo molte modifiche da fare. Dico questo perchè purtroppo il sito (e io sto lavorando ad un'area riservata) non l'ho fatto io; è un cms già pronto (smarty) che poi è stato maneggiato, rimaneggiato e adattato da vari programmatori nel tempo... quindi mi resta difficile sostituire tutti i form e tutti i submit ... o per lo meno ho paura di fare un gran casino...
Non sarà rischioso se al progetto faccio un bel "Sostituisci" (e ci lavoro una paio d'ore con la sostituzione di form e submit)? Dopo funzionerà tutto?
Che ne pensi?

[longilineo]

certo che puoi farlo con il classico onclick()

<div id='form1'>
     parametro1: <input type='text' id='par1' />
     parametro2: <input type='text' id='par2' />
</div>
<button id='but1' onclick="$('#content').load('pag1.php?"+$("#form1").serialize()+"');">Invia</button> 

ma continuo a preferire la prima versione con il codice separato dal contenuto, è più pulito e quindi più facile da gestire se magari riprenderai il codice tra un pò

[ricman]

Scusa... ma il "serialize" crea una stringa di method Get? Giusto? Nel sito jquery leggo
[cite]This produces a standard-looking query string:
a=1&b=2&c=3&d=4&e=5[/cite]

Io però nei form che dovrei sostituire coi div, per seguire il tuo esempio, vedo che ho tutti <form method="post" .... >

E pure tutti i file php di conseguenza hanno $nome=$_POST['nome'];

[longilineo]

Ma anche come facevi prima stavi utilizzando GET, infatti inviavi il parametro op tramite querystring

Comunque al posto di utilizzare .load io preferisco utilizzare .ajax si scrive qualcosa in più ma è meglio personalizzabile

    var contenuti =  $.ajax({type: 'POST', url: 'pag1.php', data : ({/*qui metti i parametri*/}), async: false }).responseText;
    $("#content").attr("innerHTML", contenuti); 

a questo punto i parametri non so se li puoi passare come query string con serialize, per farti un esempio per passare i parametri in data dovresti scrivere così


data : ({ par1 : $("#par1").attr("value") , par2 : $("#par2").attr("value") })

Potresti pensare a fare una replace sulla serialize, ma se come valore dei parametri hai pure i caratteri che sostituisci la cosa non funziona.

Per la faccenda evitare il submit, limitati a mettere il pulsante di submit fuori dal form.