CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

martiinkolle Nybegynder

20. december 2010 - 10:27 Der er 7 kommentarer og
1 løsning

Load fra en div Div

Hej folkens :D

Jeg vil gerne høre om i har et forslag til hvordan man lave en dynamisk load på denne side: http://beatsurfers.dk. Har allerede prøvet at få adskillige versioner til at virke, uden held.

Det vil være bedst med et kode eksempel :p Giver gerne en skilling for det, hvis det er størere arbejde.

På forhånd mange tak for hjælpen :D

Synes godt om

mikalj Nybegynder

20. december 2010 - 11:30 #1

Hvad tænker du på helt præcist?
Mener du at indlæse undersider via ajax, eller noget i den stil?

I så fald ville jeg lave undersiderne så de kun returnerer det html du skal sætte ind (altså ikke "<html><head>..." osv.) og så bruge javascript (evt. med jquery) til at hente dem og sætte indholdet ind på siden.
Noget i stil med det her

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
// hvilken side skal indlæses hvis andet ikke er angivet?
var startpage = "din forside url her";

// substring fjerner havelågen (#) fra den returnerede værdi
var hash = decodeURI(location.hash.substring(1));
// hvis der er angivet en side i url'en, så indlæs den, ellers brug startsiden
loadPage(hash.length > 0 ? hash : startpage);

function loadPage(url) {
$("#contentdiv").load(url);
location.hash = encodeURI(url);
}
</script>

Du kan læse mere om jQuerys load function her http://api.jquery.com/load/
Og "#contentdiv" skal selvfølgelig være en selector der svarer til det sted du vil indsætte dit indhold.

Håber det hjælper

Synes godt om

heinzdmx Nybegynder

20. december 2010 - 12:21 #2

Den måde som mikalj skriver fungere. Hvis javascript er slået til vel at mærke. Dvs. google vil kun kunne se din forside.. hvilket jo ikke er hvad man ønsker. i Stedet ville jeg udvide den med at du på din alle dine sider har en div med den samme id.

Derefter kan du bruge jQuery load funktionen til at tage på div'en og gøre det. Så vil siderne som google ser være almindelige sider og brugere vil opleve det på den ønskede måde.

Personligt gør jeg:

$(document).ready(function() {
loadPage(window.location.hash);
$(".loadMe").click(function()
{
event.preventDefault(); //stop the click action
var href = $(this).attr('href');
loadPage(href);
});
function loadPage(urlToLoad)
{
urlToLoad = urlToLoad.replace("#",'');
$("#contentDiv").load(urlToLoad + " #contentDiv", function(response, status, xhr)
{
if (status == "error")
{
//$("#error").html("Sorry but there was an error: " + xhr.status + " " + xhr.statusText);
alert("Beklager der er sket en fejl. Du bør nok opdatere siden nu. Fejl: " + xhr.status + " " + xhr.statusText);
}
else
{
window.location.hash = urlToLoad;
}
});
}
});

Dine menu links skal så have klassen "loadMe". Dvs. a -tagget

Synes godt om

martiinkolle Nybegynder

21. december 2010 - 00:16 #3

Tak for de fede eksempler. Har nu kigget på dit, Heinzdmx, og har godt nok fået det til at virke i webkit browsere (chrome og safari), dvs. at det ikke virker i FF.

Ken du evt. hjælpe mig med dette?

Har ændret lidt i koden, så den ser sådan ud:

$(document).ready(function() {
loadPage(window.location.hash);
$(".loadMe").click(function()
{
event.preventDefault(); //stop the click action
var href = $(this).attr('href');
loadPage(href);
});
function loadPage(urlToLoad)
{
urlToLoad = urlToLoad.replace("#",'');
$("#contentDiv").load(urlToLoad + " #contentDiv", function(response, status, xhr)
{
if (status == "error")
{
//$("#error").html("Sorry but there was an error: " + xhr.status + " " + xhr.statusText);
alert("Beklager der er sket en fejl. Du bør nok opdatere siden nu. Fejl: " + xhr.status + " " + xhr.statusText);
}
else
{
window.location.hash = urlToLoad;
}
});
}
});

Synes godt om

martiinkolle Nybegynder

21. december 2010 - 00:16 #4

uuuups, forkert kode... :

$(document).ready(function() {
loadPage(window.location.hash);
$(".loadMe").click(function()
{
$("#load").show('normal');
$("#content80").animate({opacity: 0.4,});

event.preventDefault(); //stop the click action
var href = $(this).attr('href');
loadPage(href);
});
function loadPage(urlToLoad)
{
urlToLoad = urlToLoad.replace("#",'');
$("#content80").load(urlToLoad + " #content80", function(response, status, xhr)
{
if (status == "error")
{
$("#error").append("Der skete en fejl :( : " + xhr.status + " " + xhr.statusText);
$("#load").hide('normal');
}
else
{
window.location.hash = urlToLoad;
$("#content80").animate({opacity: 1,});

$("#load").hide('normal');

}
});
}
});

Synes godt om

heinzdmx Nybegynder

21. december 2010 - 11:08 #5

Måske dette kan hjælpe?

http://stackoverflow.com/questions/1061525/jquerys-load-not-working-in-ie-but-fine-in-firefox-chrome-and-safari

Der beskriver den det som en chaching fejl og løses med:

$(".islice").load("home.html" + Math.random()*99999 );

En anden løsning er åbenbart at gøre følgende:

$.ajax({
url: "/wp-content/proxy.php",
type: 'GET',
data: "csurl=http%3A//tumblr.imperishableinheritance.com
#content",
dataType: 'html',
cache: false,
beforeSend: function() { $("#sideblog").hide() ;
// You could Even Put SOme
loading bars ....
},
success: function (txt){ $
("#sideblog").html(txt).slideDown();}
});

Synes godt om

martiinkolle Nybegynder

22. december 2010 - 15:22 #6

Har lige prøvet at bruge Math.random()*99999, men det gør at det slet ikke virker. Har nu læst mange sidder igennem, og de siger, at der ofte mangler en return false; ,og derfor ikke virker i FF. Men det er jo lige hvor den skal være.. :D

Prøver lige det andet script. :D

Synes godt om

martiinkolle Nybegynder

27. december 2010 - 23:10 #7

beklager jeg ikke lige har fået svaret, men julen har jo været der.

heinzdmx, Smidder du ikke lige et svar. Du har været mest behjælpelig. :D

Synes godt om

heinzdmx Nybegynder

27. december 2010 - 23:57 #8

Svar :)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS