Skifting av innhold uten reload

-Dan · 20. juli 2008

Heisann!

Jeg driver å forbedrer siden min om dagen. Så har jeg helt øverst på siden laget en liten meny med tabs og innholdet rett under(Ta en titt for å se hva jeg mener http://danforum.net, 5 mest populære). Så lurte jeg på om noen kunne hjulpet meg med å få det innholdet til å skifte uten at siden reloader.

Jeg har sett på noen script, men jeg fikk det ikke helt til å funke!

Håper noen kan hjelpe meg med dette. Takk!

Mvh. Dan

___ · 20. juli 2008

Heisann!

Jeg driver å forbedrer siden min om dagen. Så har jeg helt øverst på siden laget en liten meny med tabs og innholdet rett under(Ta en titt for å se hva jeg mener http://danforum.net, 5 mest populære). Så lurte jeg på om noen kunne hjulpet meg med å få det innholdet til å skifte uten at siden reloader.

Jeg har sett på noen script, men jeg fikk det ikke helt til å funke!

Håper noen kan hjelpe meg med dette. Takk!

Mvh. Dan

I prototype.js finnes det en funksjon for å "skifte ut" en del av innholdet, som jo er det du er ute etter.

I sin enkelste form blir det slik:

new Ajax.Updater('imgMenu2', '/replace_script', {
});

Første parameteret blir ID'en til et containerelement, i ditt tilfelle har du ikke noe veldig ideelt sådant, men jeg har valgt 'imgMenu2'. Neste parameteret blir scriptet som skal generere innholdet. Du må altså lage et script som genererer HTML på formen:

<div class="featured">
<a href="/artikkel/beste_denne_uken_2"><img src="/uploaded/article/7.jpg" alt="Beste denne uken #2" title="Beste denne uken #2" />
...
<a href="/artikkel/kommentarer_er_oppe"><img src="/gfx/no_img.jpg" alt="Kommentarer er oppe" title="Kommentarer er oppe" /></a>
</div>

Du har en div på følgende form, som inneholder elementene:

<div class="featured">

Putt et id-attributt i div-elementet slik at Ajax.Updater() vet hvor den skal legge linkene:

<div id="featured_links" class="featured">

Da blir koden for å bytte ut innholdet slik:

new Ajax.Updater('featured_links', '/replace_script', {
});

Koden som genererer siden bør i utgangspunktet ta med linkene, sånn at de er der fra starten av. Deretter kan du ha en timer som f.eks. oppdaterer linkene hvert 30. sekund.

Werner

dahwan · 21. juli 2008

Du legger en ID attribute til et element hvor innholdet skal byttes ut.

ex

<div id="replaceMe">
Gammelt innhold
</div>

Nå kan du finne det elementet med javascript ved å søke etter ID taggen.

<script>
var divTag = document.getElementById("replaceMe");
</script>

Så kan du bytte ut innholdet ved å endre verdien i innerHTML.

<script>
var divTag = document.getElementById("replaceMe");

divTag.innerHTML = "Nytt innhold";
</script>

eksempel

<html>
<head>
	<script>
		function change() {
			var div = document.getElementById("replaceMe");

			div.innerHTML = "Nytt innhold";
		}
	</script>
</head>

<body>
	<div id="replaceMe">
		Gammelt innhold
	</div>

	<p>
		<a href="#" onclick="change();">Bytt innhold</a>
	</p>
</body>
</html>

Endret 21. juli 2008 av dahwan

Logg inn

Skifting av innhold uten reload

Anbefalte innlegg

-Dan

Lenke til kommentar

Videoannonse

___

Lenke til kommentar

dahwan

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer