JQuery loading (spinneris) ielādējoties datu blokam

[senters]

Kā šim blokam pirms db datu ielādes uzlikt smuku loading spinneri?

To vajag, jo ielādējot ~1000 eventus, rodas neliela 2-3sec pauze.

 

 

// Kategoriju filtrs [JQUERY]
$(function(){
$('#filter_category').click(function(){
$('ul.menu_category').slideToggle('medium');
$('ul.menu_category a').click(function(){
var category_id = $(this).attr("id");

//alert(category_id);
$.ajax(
{
type: "POST",
url: "inc/category_results.php",
data: "category_id="+ category_id,
cache: false,
success: function(html)
{
$(".spotlight, .spotlight_switch, .all_events").empty();
$(".today_events").html(html);

$("#datatable_categoryevents").dataTable ({
"bPaginate": 5,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": false,
"iDisplayLength": 5,
"bLengthChange": false,
"bInfo": false
});
}
});
});
});
});

Edited September 16, 2011 by senters

[codez]

daGrevis, kāpēc 1000 reizes laist taimeri pa 1ms un 1000. reizē pārbaudīt, ja var vienreiz palaist 1000ms taimeri?

Edited September 19, 2011 by codez

[daGrevis]

Doh! Patiešām.

[senters]

Vai tiešām jquery delay nevarētu atrisināt šo vajadzību? Vienīgi, nepareizi to pasaucu.

Edited September 19, 2011 by senters

[daGrevis]

Delay() nav domāts tam, ko Tev vajag. Ja nekļūdos...

 

Jebkurā gadījumā, kur problēma?

 

 

var interval_id;

interval_id = setInterval(function() {

   $('.place_for_spinner').html('...'); // Elements, kurā ieliekam bildīti/ko-krutāku, kas izskatās pēc 'spinera'.

}, 1000); // Laiks, pēc cik miliseknudēm (sekundē ir tūkstotis sekundžu) 'spineris' tiek parādīts.

$.post('over/the/rainbow', function() { // Tavs AJAX.

   // Kods, kad izpildās, kad AJAX pieprasījums ir izpildījies.

   clearInterval(interval_id);

   $('.place_for_spinner').remove(); // Iznīcinam elementu, kurā atrodas 'spineris'.

});

[v3rb0]

labāk ar setTimeout()/clearTimeout(), nevis setInterval()/clearInterval()

[marcis]

Ar delay tāpat izskatīsies tizli. Teiksim tu parādīsi loading bildīti pēc 800ms, bet requests izpildīsies 1000ms. Uz 1/5 sekundes daļu attēls nomirkšķināsies.

[senters]

Kā $post funkcijā nodot mainīgo (data)?

 

 

var interval_id;
interval_id = setInterval(function() { 
$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>'); 
}, 500);
$.post('inc/category_results.php', function() {
//type: "POST",
//url: "inc/category_results.php",
//data: "category_id="+ category_id,
//cache: false,
//success: function(html)
//{
$(".spotlight, .spotlight_switch, .all_events").empty();
$(".today_events").fadeIn(10000).html(html);
$("#datatable_categoryevents").dataTable ({
"bPaginate": 5,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": false,
"iDisplayLength": 5,
"bLengthChange": false,
"bInfo": false
});
fade_eventinfo();
//} 

clearInterval(interval_id);
$(".today_events").remove();
});

Edited September 19, 2011 by senters

[daGrevis]

Kur Tu tādu 'data' izrāvi? Ja domā atbildi no servera, tad padod kā argumentu anonīmajai funkcijai.

 

$.post('link', function(response) { ...

[senters]

Rakstot šādi viss strādā:

 

 

var interval_id;
interval_id = setInterval(function() {
$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>');
}, 500);
$.post('inc/category_results.php', { category_id: category_id }, function(data) {
//alert("rez: " + data);
$(".spotlight, .spotlight_switch, .all_events").empty();
$(".today_events").html(data);
$("#datatable_categoryevents").dataTable ({
"bPaginate": 5,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": false,
"iDisplayLength": 5,
"bLengthChange": false,
"bInfo": false
});

fade_eventinfo();

clearInterval(interval_id);

//$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>').remove();
});

 

Vienīgā problēma ir ar šo daļu

$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>').remove();

 

Ar .remove es pazaudēju pašu pamat'divu kurā rādas eventu lists

 

p.s. Un vispār pateicos par operatīvaju diskusiju.

Edited September 19, 2011 by senters

[senters]

Vispār bez šīs .remove daļas man viss strādā, jo spinners pazūd brīdī kad parādas dati (uzreiz pēc noteiktā intervāla).

[daGrevis]

$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>').remove();

 

Tas, kas tur notiek...

 

1) Tu pievieno 'spineri' elementam, kur rādās visi dati,

2) Tu likvidē elementu, kur rādās visi dati;

 

Ko Tev vajadzētu?

 

1) Pievienot 'spineri' elementam, kur rādās visi dati,

2) Izdzēst 'spinera' elementu no elementa, kur rādās visi dati;

 

$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>');
$(".today_events #loading").remove();

[senters]

Ideāli, paldies daGrevis.

 

Viss ko vajadzēja ļoti smuki un pārdomāti strādā. Šo pēdējo lietu arī ieviesīšu.

[senters]

Kopskats. Uzliku 1/2 sec jeb 500ms, ja responsa no db nav, tad sāk spinneris rotēt.

 

 

// Kategoriju filtrs [JQUERY]
$(function(){
$('#filter_category').click(function(){
$('ul.menu_category').slideToggle('medium');
$('ul.menu_category a').click(function(){
var category_id = $(this).attr("id");

var interval_id;
interval_id = setInterval(function() { 
$(".today_events").html('<div id="loading"><img src="img/spinner2.gif" /></div>'); 
}, 500);
$.post('inc/category_results.php', { category_id: category_id }, function(data) {
//alert("rez: " + data);
$(".spotlight, .spotlight_switch, .all_events").empty();
$(".today_events").html(data);
$("#datatable_categoryevents").dataTable ({
"bPaginate": 5,
"sPaginationType": "full_numbers",
"bSort": false,
"bFilter": false,
"iDisplayLength": 5,
"bLengthChange": false,
"bInfo": false
});

fade_eventinfo();

clearInterval(interval_id);

$(".today_events #loading").remove();
});
}); 
});
});

[daGrevis]

Indentācija? Vai vienkārši php.lv/f WYSIWYG? :)

[senters]

Kas par indentāciju? :)