Ajax – Come aggiornare dopo l’invio

Come posso aggiornare solo una parte della pagina (“DIV”) dopo che la mia applicazione ha rilasciato un invio? Uso JQuery con plugin ajaxForm. Ho impostato il mio objective con “divResult”, ma la pagina ripete il contenuto all’interno di “divResult”. fonti:

 $(document).ready(function() { $("#formSearch").submit(function() { var options = { target:"#divResult", url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action" } $(this).ajaxSubmit(options); return false; }); })  

Pagina

   ...  ... 
Name Phone
/plugins/jquery/tablesorter/addons/pager/icons/first.png" class="first"/> /plugins/jquery/tablesorter/addons/pager/icons/prev.png" class="prev"/> /plugins/jquery/tablesorter/addons/pager/icons/next.png" class="next"/> /plugins/jquery/tablesorter/addons/pager/icons/last.png" class="last"/> 10 20 30 40 <option value="">todos Total de registros:

Grazie.

Per risolvere questo problema con jquery, proverei questo;

 $(document).ready(function() { $("#formSearch").submit(function() { var options = { /* target:"#divResult", */ success: function(html) { $("#divResult").replaceWith($('#divResult', $(html))); }, url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action" } $(this).ajaxSubmit(options); return false; }); }); 

in alternativa, è ansible ottenere che il server restituisca solo l’html che deve essere inserito nel div anziché il resto del documento html.

Non conosco il plug-in TableSorter, ma so che sarà necessario reinizializzare il plug-in TableSorter ogni volta che ricarichi l’elemento. quindi aggiungi una linea alla tua funzione di successo che ha come target il tuo tavolo

 success: function(html) { var resultDiv = $("#divResult").replaceWith($('#divResult', $(html))); $('table.tablesorter', resultDiv).TableSorter(); } 

Il tuo problema è sul lato server: devi creare una pagina che restituisca solo il div che vuoi, e quindi modificare l”url’ per farlo corrispondere.

Attualmente stai caricando l’intera pagina con la chiamata AJAX, motivo per cui sta restituendo l’intera pagina.

È ansible utilizzare la maggior parte dei normali parametri della funzione javery ajax con ajaxSubmit. Basta passare in una funzione di successo.

 $('#formSearch').ajaxSubmit({success: function(){ /* refresh div */ }); 

Vedi qui per un esempio più elaborato.

Se vuoi semplicemente aggiornare il tuo div con lo stesso contenuto statico che conteneva prima che venisse sostituito dai risultati del tuo post, puoi provare qualcosa del tipo:

 $("#Container").html($("#Container").html()); 

ovviamente fai attenzione che l’HTML interno non sia cambiato, o in alternativa, puoi memorizzare l’innerHTML in una variabile nella funzione document.ready() , quindi caricarlo quando necessario. Mi dispiace, scritto in fretta.

Usando jQuery, a volte quando eseguo una chiamata .get ajax per aggiornare un database, ricarico / aggiorna un’altra parte della pagina utilizzando una semplice istruzione jQuery .load nella funzione callback di successo per sostituire il contenuto di un div.

 $("#div_to_refresh").load("url_of_current_page.html #div_to_refresh") 

Mi piacerebbe notare che questo non è il modo più efficiente per ricaricare una piccola porzione di dati, e quindi lo utilizzerei solo su un’app web a basso traffico, ma è semplice da codificare.