php - jquery auto refresh af DIV - Udvikleren.dk - Programmering, webdesign og grafik

Tags: jscript jquery php mysql refresh

Bruger #14602 @ 13.04.12 14:59

Jeg er igang med at lave en funktion på min side, hvor der øverst listes 6 tilfældige nyheder.

Jeg vil nu gerne have at disse nyheder løbende skiftes til andre nyhede - altså auto-refresh af de enkelte div's efter f.eks. 10 sekunder.

Obs. Jeg har alt koden liggende på samme side, der hedder test.php
Jeg er derfor - med hjælp fra google - kommet frem til følgende javascript-kode:

JScript kode

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
 libs/jquery/1.3.0/jquery.min.js"></script>
 <script type="text/javascript">
 var auto_refresh = setInterval(
 function ()
 {
 $('#textArea').load('test.php').fadeIn("slow");
 }, 10000); 
 </script>

Ganske kort - koden opdaterer div'et #textArea i filen test.php hvert 10 sekund.

TIl at indhente det data der skal være i div'ene har jeg følgende fetch_array og SQL kode

PHP kode

 $data = mysql_query("SELECT * FROM table ORDER BY RAND() LIMIT 6")
  or die(mysql_error()); 
  while($info = mysql_fetch_array( $data )):
  echo'<div id="textArea">';
     echo'<div class="cover">';
         echo'<img src="" width="37" height="37" />';
     echo'</div>';
     echo'<div class="title">'; echo substr($info['title'], 0, 15); echo'...</div>';
     echo'<div class="description">'.$info['description'].'</div>';
 echo'</div>';
  
  endwhile;

koden udskriver 6 bokse ved siden af hinanden. Flot illustreret således:
[titel] [titel] [titel] [titel] [titel] [titel]
Og nu kommer problemet
Selve refresh-delen fungerer. Problemet er blot at den kun opdaterer den første af de seks bokse
([titel] [titel] [titel] [titel] [titel] [titel])

og ikke nok med det - så opdaterer den div'et seks gange pr. 10 sekund.

Dvs. at siden nu kommer til at se således ud:
[titel] [titel] [titel] [titel] [titel] [titel]
[titel]
[titel]
[titel]
[titel]
[titel]

Hvad skal ændres for at den løbende opdaterer de seks bokse på langs?

Tak

7 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #3427 @ 13.04.12 15:04

1.520

du udskriver dit ID inde i din while løkke, så du vil have dit ID 6steder på siden, det må kun være der en gang.

PHP kode

 while($info = mysql_fetch_array( $data )):
   echo'<div id="textArea">';

lav det evt om til

PHP kode

 echo'<div id="textArea">';
 while($info = mysql_fetch_array( $data )){
   ...
 }
 echo '</div>';

Bruger #17015 @ 13.04.12 20:10

614

yep og preloading af de næste billeder, så snart nogen bliver vist. Det er bare array junglering

Bruger #14602 @ 13.04.12 15:17

Jeg takker for hjælpen.
Jeg synes jeg havde prøvet den løsning tidligere - men nu virker det

Jeg har dog ændret det således at der er oprettet et nyt div uden om while-løkken , som den så opdaterer.

Til interesserede ser koden nu således ud:

PHP kode

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
 libs/jquery/1.3.0/jquery.min.js"></script>
 <script type="text/javascript">
 var auto_refresh = setInterval(
 function ()
 {
 $('#printArea').load('test.php').fadeIn("slow");
 }, 5000); 
 </script>
 
 <?php
 include('includes/db_connect.php');
 $data = mysql_query("SELECT * FROM table ORDER BY RAND() LIMIT 6")
  or die(mysql_error()); 
  <div id="printArea">
  while($info = mysql_fetch_array( $data )):
  echo'<div id="textArea">';
     echo'<div class="cover">';
         echo'<img src="" width="37" height="37" />';
     echo'</div>';
     echo'<div class="title">'; echo substr($info['title'], 0, 15); echo'...</div>';
     echo'<div class="description">'.$info['description'].'</div>';
 echo'</div>';
  endwhile;  
  echo'</div'>;
  ?>

Bruger #17015 @ 13.04.12 16:57

614

I stedet for at loade via ajax kunne du også bare loade de nyheder som du ville rotere ind med det samme. Og så skifte mellem dem via javascript.

Du kunne evt preloade billederne når siden er loadet (ved at tilføje dem til et img-tag der ikke er i dom). Så skal brugeren kun vente på at billederne loader første gang en nyhed vises. Der er ikke nogen grund til at hente det i mindre bidder hvert 10. sekund :-)

JScript kode

 var images = ["sti/til/billede1.jpg","billede2.jpg"];
 for(var img in images) { new Image.src = images[img]; }

Bruger #14602 @ 13.04.12 17:10

Hej Gustav.

Den forstår jeg ikke.

Hvis jeg loader alle nyheder med det samme, og så blot roterer mod dem - vil loading-tiden af siden så ikke blive ekstrem lang - hvis jeg nu f.eks. har 200 nyheder/post at rotere imellem?

Hvis ikke - har du så en tutorial til hvordan jeg kan gør det.

yderligere - det med billeder.
Url til billederne ligger jo i tabellen, så hvordan vil du hente det ud med dit javascript?

mvh
Jacob

Bruger #17015 @ 13.04.12 17:44

614

200 nyheder i fuld længde? hmm... Ja så tager det jo nok lidt tid - men det sættes først igang efter pageload anyway. Du kunne jo nøjes med at preloade et antal af dem. Men hvis de kan læses på 10sek - alle 6 - så er det jo nok ikke ret meget tekst ;-)

At hente url'erne ud af databasen er jo bare at udskrive dem som et array i din javascript kode inden du sender den til browseren. Altså få PHP til at generere dit javascript array.

Bruger #14602 @ 13.04.12 17:55

nej nej - det hentes ikke ud i fuld længe.

kun overskriften samt et par linjer tekst - så vi er enige så langt..

Så det du foreslår er at jeg laver en array i javascript der indhenter f.eks. 50 af nyhederne..

og så lave en fidus, så de udskrives løbende - og når f.eks. 40 af dem er brugt, indhenter den 50 nye?

jquery auto refresh af DIV

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler