Gå til innhold

Vise en melding mens data hentes fra database...

heisann999

Av heisann999
i Programmering og webutvikling

Anbefalte innlegg

heisann999

heisann999

Skrevet
Skrevet

Jeg har laget en bestillingsside for et antikvariat, ved hjelp av PHP og MySQL. De har ca 4000 bøker, så det tar tid å hente alle dataene fra databasen. Skulle gjerne ha vist en melding mens dataene hentes. F.eks.: "Vennligst vent mens boklista lastes..." Og så skal denne meldingen forsvinne når alle bøkene er listet opp.

 

Finnes det en enkel måte å gjøre dette på?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
molty

molty

Skrevet
Skrevet

God morgen.

Dette er egentlig veldig lett.

 

Første steg: Lag en div tag med id definert som books, eller noe i den duren, der du vil bøkene skal komme opp.

Inni den div tagen, så har du f.eks en melding som sier: Vennligst vent mens bøkene lastes opp. Er også greit med et bilde under som viser at det lastes.

<div id="books"><center>Vennligst vent mens bøkene lastes inn<br />
<img src="LINK" alt="Laster inn bøker" title="Laster inn bøker" /></center></div>

Som du ser, tok jeg det innenfor "<center>", som er pga at det ser mye bedre ut da mens det lastes inn.

 

steg 2:Gå inn under head tagen i filen. og lag en funksjon under script.

<script type="text/javascript">
function loadBooks(page){
$("#books").html('<center>Vennligst vent mens bøkene lastes inn<br /><img src="LNK" alt="Laster inn bøker" title="Laster inn bøker" /></center>');
$("#books").fadeOut('slow', function(){
 $.post("LINK2", {pageNumb: page}, function(data){
   if(data == "FALSE"){
     alert("En feil oppstod. Prøv igjen. Oppstår problemet flere ganger, kontakt webansvarlig.");
   }
   else{
     $("#books").html(data);
     $("#books").fadeIn('slow');
   }
 });
});
}
</script>

Forklaringer:

LINK = Link til et bilde som viser at det lastes inn.

LINK2 = Filen hvor den leter etter bøkene. I filen skal det være if(isset($_POST['pageNum'])) for å hente ut filene, og sidetallet (for jeg anntar du har med sidetall også)

data == "FALSE" = Hvis det er noe som skjer i filen som ikke er riktig, som om den ikke finner sidetallet eller noe, så printer du ut FALSE. Husk store bokstaver :roll:

{pageNum: page} = Innenfor krøllparantesene defineres de ulike $_POST navnene og verdiene. Her er pageNum $_POST['pageNum'] og page = sidetallet, som hentes inn i funksjonen loadBooks(1) f.eks.

Du kan legge til flere navn og verdier, men må skrive de opp med et komma mellom da som vist nedenfor:

{pageNum: page, authorized: "true"}

 

Så er det bare til å sette i body tagen:

<body onload="loadBooks(1);">

Så vil bøkene bli lastet opp. Og på sidetallene kan du sette i lenkene: 

onclick="loadBooks(SIDETALL);"

 

Du vil nok antageligvis finne kategori også, men det klarer du vel å fikse selv?

Grunnen til at jeg brukte $.post og ikke $.ajax eller ajax funksjoner, er fordi at jeg mener at $.post fungerer enormt bra. Men til sider hvor det du henter skal oppdateres ofte, så bruk $.ajax.

Mer om det kan du lese her http://api.jquery.com/jQuery.ajax/

 

Og ja, husk å lag den LINK2 filen med riktige verdier ;)

Får du ikke til, prøv å sett inn alert("test"); for å sjekke kor den stopper opp i scriptet. Da legger du merke til om hele funksjonen ikke fungerer eller slikt.

 

- Molty

  • Liker 1
Lenke til kommentar
molty

molty

Skrevet
Skrevet

Ja. Du kan kutte ut page

Altså functions loadBooks(){

 

Og {pageNum: page} kan du og fjerne.

Da vil det bli seende:

$.post("LINK2"), function(data){.......

 

Oppstår det feil legg inn som før {books : "true"}

og i LINK2 filen din da, så sjekker du innenfor $_POST['books']

Lenke til kommentar
Runar

Runar

Skrevet
Skrevet

God morgen.

Dette er egentlig veldig lett.

For det første skal man ikke bruke HTML-tagen

og det er bare tull å anbefale denne til en nybegynner. CSS er en mye bedre løsning, noe du burde vite.

 

Og, for det andre så bør du nevne at for å få koden du postet til å virke, må man bruke javascriptbiblioteket jQuery. Hvis heisann999 kopierer og limer inn koden din, vil han sannsynligvis ikke få den til å virke.

 

Misforstå meg ikke: Jeg setter stor pris på at du bruker tiden din på å hjelpe! Men, når det kommer til programmering (og spesielt webutvikling) bør man nesten ikke lære bort feil.

Lenke til kommentar
molty

molty

Skrevet
Skrevet

For det første skal man ikke bruke HTML-tagen <center> og det er bare tull å anbefale denne til en nybegynner. CSS er en mye bedre løsning, noe du burde vite.

Har ikke lært noe om at man IKKE skal bruke HTML-tagen <center>. Så siden du sier det, kan du forklare meg hvorfor jeg ikke skal gjøre det?

 

Danke, Molty

Lenke til kommentar
etse

etse

Skrevet
Skrevet

For det første skal man ikke bruke HTML-tagen <center> og det er bare tull å anbefale denne til en nybegynner. CSS er en mye bedre løsning, noe du burde vite.

Har ikke lært noe om at man IKKE skal bruke HTML-tagen <center>. Så siden du sier det, kan du forklare meg hvorfor jeg ikke skal gjøre det?

 

Danke, Molty

alt av stilformatering skal gjøres ved hensyn på CSS. <center> tagen endrer på formateringen på siden.

Årsaken til dette er fordi man skal skille markup/innhold og formatering.

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...