PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
s

jquery.load throbber/Loading animation

Door steven russcher op 11-11-2010 11:46
2.588 views
Ik heb deze functie:

function product_sorteren(sort,id,merk){

  $('#show_productlijst').load('/webshop/productlijst.html?contentonly=1&id='+id+'&sort='+sort+'&merk='+merk);
}

en nu wil ik graag dat er een loading animation komt als de functie word aangeroepen en moet natuurlijk weg gaan als alles geladen is.

ik had zelf http://plugins.jquery.com/project/throbber gevonden. maar zal niet weten hoe ik dit moet implementeren..
Ariën
11-11-2010 11:58 gewijzigd op 11-11-2010 11:59
Ik gebruik dit:

	$("#loading").ajaxStart(function(){
	   $(this).show();
	 });

	$("#loading").ajaxStop(function(){
	      $(this).hide();
	 });

$('.result').load('meukee.php');


Je moet alleen zelf wel even een ID aanmaken in de CSS met de naam 'loading', waarin je de Throbber laat zien d.m.v. een background-image.
Ariën
11-11-2010 12:31
Voila.... :-)

Beter dan allemaal onnodige plugins...
s
steven russcher
01-12-2010 11:36
Als ik 2 verschillende throbbers op de pagina wil gaat het fout. Dan gaat die ze beide showen terwijl ik 2 aparte heb aangemaakt en laat laden in de functie die ik aanroep..
Ariën
01-12-2010 12:35
Relevante code?
s
steven russcher
01-12-2010 12:43 
function product_sorteren(sort,id,merk,type){
    $("#loading").ajaxStart(function(){
       $(this).show();
     });

    $("#loading").ajaxStop(function(){
          $(this).hide();
     });
  $('#show_productlijst').load('/webshop/productlijst.html?contentonly=1&id='+id+'&sort='+sort+'&merk='+merk+'&type='+type);
}

en

function showaantal(aantal2,sort,id,merk,type,redirect){
    $("#loading2").ajaxStart(function(){
       $(this).show();
     });

    $("#loading2").ajaxStop(function(){
          $(this).hide();
     });
$.get("/webshop/productlijst-aantal-wijzigen.html", { contentonly: '1',aantal : aantal2 },
       function(data){
         if(redirect != ''){
           window.location = redirect;
         }else{
       $('#show_productlijst').load('/webshop/productlijst.html?contentonly=1&id='+id+'&sort='+sort+'&merk='+merk+'&type='+type);
         }
        });

}

Dat zijn de 2 functies, Als je alleen een functie aanroept geeft ie gewoon 1 weer. doe je daarna de tweede doet de elke keer 2.

Op onderandere deze pagina.


Ariën
03-12-2010 11:46
Heb je een voorbeeld? Ik zie hem niet meer op genoemde URL?
s
steven russcher
03-12-2010 12:11
Op die pagina heb je 'Sorteren op:' en 'Aantal:' Die dropdownlists roepen de 2 functies aan waar ik over praat.

Reageren

Inloggen om te reageren