Hieman huono otsikko, voi vaihtaa paremmaksi.
Kysymys: millä kielellä ja miten tehdään nettisivuille linkki, joka paljastaa osan sivusta lataamatta sivua uudelleen? Esim. vieraskirja, jossa viestikentän alapuolella on linkki "Näytä viestit" josta painamalla linkin alle ilmestyy vieraskirjan viestit. Yritin ajax-oppaan koodilla, mutta tulee vain virheilmoitus.
Edit: kiroitusvirhe
Millanenhan virheilmoitus sieltä tulee?
Siis tuo "Pyynnön suorituksessa on tapahtunut virhe!"
Tässä on aika hyvä JavaScriptillä toteutettu. Jos hait siis show/hide-tekniikkaa.
PS. Jos ei auttanut, ja hakusessa edelleen hide/show niin katso täältä.
Edit:
Jos haluat, että ensimmäinen esimerkki ei tulostu sivulle kun tulee, tee näin:
Vaihda tämä:
<div id="adiv" style="font:24px bold; display: block">Now you see me</div>
Tähän:
<div id="adiv" style="font:24px bold; display: none">Now you see me</div>
jQuery:
$('#showMoreMessages').click(function () {
$("#moreMessages").show();
});@joah: tuo toimi, kiitos.
Huomioi myös että noin toteutettuna sisältö pitää myös oletuksena piilottaa JavaScriptillä, jotta viestit näkyisivät myös niillä joilla on (jostain kumman syystä) JavaScript pois päältä. Kaikissa tapauksissa esimerkkini ei ole paras tapa lähestyä ongelmaa, johtuen mm. siitä että viestit ovat teoriassa ensin näkyvissä, ja piilotetaan vasta kun sivu on ladattu kokonaan, tämä voi aiheuttaa sivun hyppimistä. Mutta ongelma on kuitenkin huomioimisen arvoinen.
<html lang="fi">
<head>
<title>Vieraskirja:</title>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#nayta-viestit-link').show();
$('#viestit').hide();
$('#nayta-viestit-link').click(function() {
$('#viestit').show();
$('#nayta-viestit-link').hide();
});
});
</script>
<style>
#nayta-viestit-link {
display: none;
}
#viestit {
display: block; /* informatiivinen */
}
</style>
</head>
<body>
<h1>Vieraskirja:</h1>
<form>
...
</form>
<a href="#nayta-viestit" id="nayta-viestit-link">Näytä viestit</a>
<section id="viestit">
<h1>Viestit:</h1>
<article>
<h1>Otsikko:</h1>
<p>Viestin sisältö..</p>
</article>
<article>
<h1>Otsikko:</h1>
<p>Viestin sisältö..</p>
</article>
<article>
<h1>Otsikko:</h1>
<p>Viestin sisältö..</p>
</article>
</section>
</body>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.