Ajax jquery inserire un loader per motore di ricerca

paci

Nuovo Utente
7 Feb 2010
11
0
0
Ciao a tutti, premetto che ho pochissime competenze su javascript, quindi mi scuso anticipatamente per gli eventuali svarioni.
Sto inserendo un motore di ricerca interno a un sito, i risultati della ricerca vengono mostrati in Ajax con la libreria jquery.
Mi piacerebbe inserire un'immagine loader che compaia durante l'elaborazione e venga nascosta al momento del completamento. Ho moto rovistato su internet e tentato varie soluzioni, soprattutto utilizzando dei div con sfondo immagine, ma non ci sono ancora riuscito. Lo script della chiamata è il seguente:
HTML:
						$(document).ready(function() {  

						  $("form#searchhi").submit(function(){  
						    var testo = $("#testo").val();
						    var categoria = $("#categoria").val();  
						    var lingua = $("#lingua").val();
						    var tipoprod = $("#tipoprod").val();
						    document.searchhi.categoria.value = "";
						    $.ajax({  
						      url: "....",  
						      type: "POST",
						      data :"testo=" + escape(testo) + "&categoria=" + escape(categoria) + "&lingua=" + escape(lingua) + "&tipoprod=" + escape(tipoprod),
						      dataType: "html",
						      success: function(msg) {  
						        $("div#ricerca").html(msg)
						      },
						      error: function(){
						        alert("Chiamata fallita!!!");
						      } 
						    }); 
						    return false;  
						  });
						});
Qualcuno potrebbe essere così gentile da mostrarmelo corretto? Come ho premesso sono pressoché a digiuno di javascript.
Grazie
 

Nefyt

Utente Attivo
17 Apr 2012
1.102
0
0
Prima della chiamata in ajax modifica il div e poi al success col risultato

Codice:
 $("div#ricerca").html('Immagine o messaggio di loading');
						    $.ajax({  
						      url: "....",  
						      type: "POST",
						      data :"testo=" + escape(testo) + "&categoria=" + escape(categoria) + "&lingua=" + escape(lingua) + "&tipoprod=" + escape(tipoprod),
						      dataType: "html",
						      success: function(msg) {  
						        $("div#ricerca").html(msg)
						      },
						      error: function(){
						        alert("Chiamata fallita!!!");
						      } 
						    });
 

paci

Nuovo Utente
7 Feb 2010
11
0
0
Prima della chiamata in ajax modifica il div e poi al success col risultato

Codice:
 $("div#ricerca").html('Immagine o messaggio di loading');
						    $.ajax({  
						      url: "....",  
						      type: "POST",
						      data :"testo=" + escape(testo) + "&categoria=" + escape(categoria) + "&lingua=" + escape(lingua) + "&tipoprod=" + escape(tipoprod),
						      dataType: "html",
						      success: function(msg) {  
						        $("div#ricerca").html(msg)
						      },
						      error: function(){
						        alert("Chiamata fallita!!!");
						      } 
						    });

Grazie Nefyt, ho fatto come mi hai consigliato e ottenuto quello che volevo:cool:
 
Discussioni simili
Autore Titolo Forum Risposte Data
R jquery che cambia css di un elemento non mi funziona sulla pagina caricata da ajax Ajax 5
R Aggiornare record mysql con Ajax, jQuery e php Ajax 2
P Funzione jQuery Ajax invio file a php jQuery 1
L Problema jQuery validation AJAX (PHP 7) PHP 6
M leggere con jquery/ajax in una function javascript record di database sql server Javascript 0
A [Javascript] Ajax, Jquery e PHP Javascript 1
X Problema con jquery e ajax jQuery 2
localhost.nicola [AJAX-JQUERY] Ritornare true||false in base alla risposta ricevuta da success: di $.ajax() Ajax 1
F Jquery Ajax Datatable jQuery 1
S Eseguire funzione jquery all'interno della risposta ajax Ajax 0
E Richiamare funzione Jquery dopo aggiornamento parziale di pagina tramite ajax jQuery 0
MarcoGrazia jquery ajax manda richieste in quantità arbitraria jQuery 3
C autologin jquery ajax Javascript 0
W Jquery ajax non funziona jQuery 1
G Invio caratteri speciali tramite jquery/ajax Javascript 1
G Invio caratteri speciali tramite jquery/ajax Ajax 1
B jQuery mobile e più form ajax jQuery 1
P php jquery ajax per modificare valore in un databe Ajax 1
G jquery ajax e variabili Ajax 0
felino [Ajax/Jquery] Z-index su loading-image Ajax 1
S multi request ajax con jquery jQuery 2
P [RISOLTO] Passaggio parametri in JQuery/Ajax Ajax 4
F gallery jquery-ajax Javascript 0
S Gallery con Tag foto: problema doppia chiamata ajax con JQuery jQuery 2
L verifica mail in db con jquery e ajax. Aiuto jQuery 9
Emix Problema nel concatenare jquery ed ajax nella stessa pagina Javascript 15
P Tornare indietro con Ajax Jquery Ajax 4
P problema validazione form con ajax e jquery Ajax 0
T Problema con Jquery ajax jQuery 4
D Problema nella validazione di un form con JQUERY ed AjAX jQuery 4
G jQuery ajax complete jQuery 1
S problemi jquery ajax chiamare una pagina php Ajax 5
P problema jQuery/ajax Ajax 4
I Eseguire funz. Javascript caricata tramite la funzione Ajax di JQuery in onChange Javascript 0
I Eseguire funz. Javascript caricata tramite la funzione Ajax di JQuery in onChange Javascript 0
P [Ajax, python e JS] Redirect dopo una POST con jquery jQuery 0
L Da Jquery 1.4 a 1.5/1.6 funzione ajax jQuery 1
M Mappa interattiva con jquery ajax e php. jQuery 0
J How to create AJAX Notifications with jQuery jQuery 0
V [JQuery] Aiuto per funzione Ajax jQuery 0
lukeonweb Corso Corsi javascript, jquery e ajax Javascript 3
R valore value di un id da passare in chiamata ajax Ajax 3
M Fullcalendar in Codeigniter, un aiuto per la chiamata $ajax ? jQuery 0
E Php select option e ajax PHP 23
Emix Select concatenate php sql ajax PHP 2
MarcoGrazia Valori di ritorno json via ajax non visti. jQuery 1
felino ASP.net MVC: Exception e chiamata AJAX ASP.NET 1
motleyrulez Ricerca filtro con Ajax PHP 1
max1974 Grafico Ajax Javascript 4
max1974 Struttura $.ajax Ajax 7

Discussioni simili