JSON ed elevato numero di dati

[spacco]

Salve a tutti.
Il mio problema è questo:
ho due dropdownlist che si popolano in cascata,
la prima è la classica country che viene pre-popolata all'apertura della pagina,
la seconda dipendente dalla prima viene popolata tramite una richiesta JSON.
Ecco il codice :

<select onchange='javascript:getItems(this.value,"/json/listitem","id_elemento");' id="country">

e la funzione

function getItems(id,url,type){ 
var url = url; 
var type = type;
$.getJSON(url,{id:id},function (response){
     $("#"+type).empty() $("#"+type+"").append($('<option></option>').val('').html(''));
     $.each(response.items, function(i) {
        $("#"+type+"").append($('<option></option>').val(response.items[i].key).html(response.items[i].value)); 
}); 
}); 
}

Il file JSON viene generato da uno script php a seguito di una query al DB.


Nessun errore viene riscontrato dal debugger, ma il browser si blocca per qualche secondo poi popola corretamente la lista.


Secondo voi, qual'è il motivo del blocco del browser?
Troppi dati?
La tabella in cui i dati vengono ricercati ha più di 50.000 record e il risultato della query al Db potrebbe essere una grossa fetta di questi (dell'ordine di 8000 e più)

La richiesta diretta allo script che genera il JSON non ha un grosso ritardo (circa 1.3 sec)

Ho provato in tutti i modi, il ritardo non è:
- nella funzione di callback della richiesta (ho provato a commentarla, il problema persiste)
- nella creazione del file JSON e quindi nella query al DB ( ho provato a indirizzare la richiesta direttamente al file json generato e non allo script che lo genera, il problema persiste)
- colpa del browser? succede con FF, IE e Chrome


Come posso risolvere?

[andr3a]

Originariamente inviato da spacco
Secondo voi, qual'è il motivo del blocco del browser?

bad practices sia sul javascript che sull'uso di jQuery

function getItems(id,url,type){
	$.getJSON(url, {id:id}, function(response){
		var options = ["<option></option>"];
		$.each(response.items, function(i, item){
			options[i + 1] = '<option value="' + item.key + '">' + item.value + '</option>';
		});
		$("#" + type).empty().append(options.join(""));
	});
};

se così non va, evita librerie e passa al dom puro o al banale innerHTML su un duplicato della select

[spacco]

Grazie mille Andr3a,
la tua funzione è sicuramente piu' efficiente, ma il problema non sta nel popolare la dropdown, anche se commento tutta la funzione di callback, finchè non finisce di scaricare il file json il browser resta bloccato.
ho provato anche con Ajax.Request di prototype, niente
domani faccio un altro tentativo senza librerie ma dubito che riesca a risolvere così.

Proverò a splittare i dati e farli caricare dinamicamente, ad esempio onscroll se ci riesco o metto un altra dropdown dividendoli in ordine alfabetico o con un input autocomplete
anche perchè 8000 risultati (in aumento ) in una tendina non sono molto comodi da trovare.... come la vedi come soluzione?

noto pero' che anche per pochi risultati il browser resta bloccato solo un paio di msec, me ne accorgo dalla gif loader

[paxal78]

sicuamente

$.each 

rallenta.....hai provato in quel punto a iterare con un classico

for 

???

[spacco]

Originariamente inviato da paxal78
hai provato in quel punto a iterare con un classico

for 

la prima cosa che ho fatto

[andr3a]

allora, i problemi son diversi ... primo e' che se usi eval e Firebug ad esempio noterai un rallentamento da paura ... se si blocca fino a file caricato Ajax non e' asincrono ma sincrono, se si blocca a file caricato e' un problema eval, passa ad un JSONP e risolvi/acceleri.

8000 options sono un problema per il DOM, comunque la metti, ogni volta che aprirai quella dropdown avrai un rallentamento soprattutto sui vecchi browser.

Io sono riuscito a gestire il tutto ma non e' stato semplice, in compenso considera che nessuno scrollera' mai 8000 items leggendole una per una ergo usa metodi alternativi tipo un DIV, o un campo di ricerca con suggerimenti implementato via JavaScript.

non mettere 8000 options in una select perche' e' anti web, ciao

[spacco]

Finalmente ho risolto usando un campo di ricerca con suggerimenti, ora va alla grande!!!

Grazie ancora per gli ottimi consigli!