[Mr.Notepad]

Finns det någon som kan berätta hur man gör för att visa information i t ex en DIV utan att reloada hela sidan?
Jag har googlat men inte hittat något bra script för detta, men vet samtidigt inte om jag har korrekt benämning på det jag söker)

Det finns massor av script som gör detta med endast bilder, så att man från en miniatyr eller en textlänk, kan få upp olika saker i ett område på sidan.
Exempel: http://www.dynamicdrive.com/dynamici...thumbnail2.htm (Nedre exemplet)

Det jag försöker uppnå är en separat meny som vid klick visar nytt innehåll på annan plats i sidan (iframe, bild, text, osv), utan att hela sidan laddas om varje gång.

[P3N]

Googla "cross browser ajax call" t.ex. Så lär du finna det du behöver

[linusoleander]

http://pjax.heroku.com/

[Mr.Notepad]

linusoleander: Ja, det är något sånt jag söker, men tyvärr är scriptet du länkar till så krävande att det endast fungerar för hälften av världens internetanvändare i dagsläget.

Jag hade för mig att man kunde ha en "yta" typ DIV som man sedan väljer innehåll i. (där man döljer de olika innehållen)
Sedan bara ha ett antal länkar som aktiverar valt innehåll i diven med javascript eller nåt.
(Typ som mitt exempel med bilder) Är jag fel ute eller är det möjligt? Det fungerar ju uppenbarligen för bilder.

(Tanken är att ha en väder-widget på en specifik plats i en hemsida, och där användaren väljer en stad i en meny. Sedan om man klickar på en annan stad så aktiveras en annan widget i samma yta utan att man behöver ladda om hela sidan eller slippa ha 5 olika sidor eller iframes.)
En alternativ lösning med bara en sida, är att ha en variabel och en IF-sats som med hjälp av Request.QueryString väljer vad som ska visas i ytan... men då krävs som sagt att man laddar om hela sidan vilket jag vill undvika om det går.

[P3N]

Borde räcka att byta html i den diven... Googla "javascript innerHTML".
T.ex http://www.tizag.com/javascriptT/jav...-innerHTML.php

[fluortant]

Kolla in http://api.jquery.com/load/ och http://api.jquery.com/html/.

[Clarence]

Är det många städer du vill visa gör du bäst i att ladda innehållet med ajax. Det innebär att du laddar bara widgeten från servern (genom att skicka en speciell query-string till din sida som indikerar att du bara vill ha widgeten och vilket stad du vill ha). Kräver lite kunskap om JS och serverside-hanteringen. Eftersom du inte verkar veta alls ens vad du kan göra bör du nog börja med att allmänt läsa på om ajax. För scriptet som du blev tipsad om som gör att du får "rätt" url rekommenderar jag att du tittar på att lägga på history.js istället. Den är bakåt-kompatibel med äldre browsers som saknar stöd för history pushstate. Däremot om det bara är en väder-widget som är en liten del av sidan bör du inte alls ändra url:en utan på sin höjd bara använda hashen till att indikera statusen.

Vill du däremot bara ha 5 städer i din widget och det rör sig om en liten mängd data gör du bäst i att ladda allt widget-innehåll i första sidladdningen. Döljs alla förutom den första med css (display:none), eller ha en default-vy utan väder. Och sätt sedan display:none för samtliga förutom den som väljs vid menyvalet. "Hiding and showing elements" eller något sådant borde räcka för en google-sökning här. Använder du jquery (eller annat välanvänt bibliotek) så bör du lösa det på en femtedel av koden och andra gången på en femtedel av tiden.

[P3N]

Känns lite overkill att köra jquery om det bara är detta som man skall nyttja jquery till dock (lär väl vara en å annan som inte håller med). Och att ladda alla är kanske inte heller det smidigaste. Är det bara färdiga widgets/kod så lär det ju inte skilja mycket mellan koden till stad a, stad b osv osv. Lägg det som skiljer i variabler (är det riktigt lite som skiljer kan det ju vara värdet på dropdownen/när du kallar funktionen?) och utnyttja det när du byter ut html koden på diven med innerHTML.
Men det finns ju många sätt att lösa det på. För att få bästa hjälpen så är det enklast om du kan bifoga kod eller länk till det du vill få till.

[Mr.Notepad]

Jag tackar alla er som svarat!
Det blir en period nu med olika tester, så får man se vilken typ av lösning det blir.
Tack!

[Mr.Notepad]

Jag tänkte berätta lite hur det går och om jag är helt fel ute när det gäller nuvarande lösning...

Det som verkar vara enklaste lösningen som varken kräver ajax eller jquery är "innerHTML".
Man slipper massor av separata html-sidor (som annars krävs vid iframelösningar) och man slipper köra en "IF-sats med request" och ladda om hela sidan varje gång man klickar på en länk och låter en variabel avgöra vad som ska visas i "ytan". (Som annars var/är min nödlösning på hela problement)

Följande kod fungerar strålande, men med ett undantag:

<html>
<head>

<script type="text/javascript">
function changecontent01(){
	var newContent = "kod för väderwidget";
	document.getElementById('contentarea').innerHTML = newContent;
}
function changecontent02(){
	var newContent = "<img src='http://www.wn.se/images/misc/wn_logo3.gif'>";
	document.getElementById('contentarea').innerHTML = newContent;
}
function changecontent03(){
	var newContent = "<iframe width='560' height='315' src='http://www.youtube.com/embed/gWnPqgl8X9w' frameborder='0'></iframe>";
	document.getElementById('contentarea').innerHTML = newContent;
}
function changecontent04(){
	var newContent = "Här visas helt vanlig text<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br>Praesent aliquam, justo convallis luctus rutrum, erat nulla<br> fermentum diam, at nonummy quam ante ac quam.";
	document.getElementById('contentarea').innerHTML = newContent;
}
</script>

</head>
<body>

<table border="1" width="900" height="600">
	<tr>
	<td width="100" valign="top">
<a href="javascript:changecontent01();">Väder</a><br>
<a href="javascript:changecontent02();">Bild</a><br>
<a href="javascript:changecontent03();">Youtube-film</a><br>
<a href="javascript:changecontent04();">Text</a>
	</td>
	<td width="800" align="center" valign="top"><p id='contentarea'>&nbsp;</p>
	</td>
	</tr>
	</table>

</body>
</html>

...detta fungerar som sagt, men om jag vill lägga in kod för en väderwidget så innehåller den koden ett script i sig:

<div id='c_adf7d3ec1031d188dc6867336771dcbd' class='alto'><h2 style='color: #000000; margin: 0 0 3px; padding: 2px; font: bold 13px/1.2 Verdana; text-align: center;'>Väder Malmö</h2></div><script type='text/javascript' src='http://www.klart.se/widget/widget_loader/adf7d3ec1031d188dc6867336771dcbd'></script>

...så om jag lägger in ovanstående under "function changecontent01" så kraschar allt eftersom det blir "script inuti ett script".

Med hjälp av min fungerande kod ovan är det enkelt att se vad jag vill göra när jag säger "att öppna länkar i en yta utan att reloada eller ha massor av sidor". Prova gärna.
Med ovanstående lösning behövs bara en enda sida för en sajt som i normala fall skulle kunna ha 20-30 olika sidor.
Allt som återstår nu är hur vissa innehåll ska formateras för att kunna köras.
Några förslag eller synpunkter?