DIV trubbel

[MsBlues]

Vet någon här på Eforum om man ladda in en htmlsida i en div genom att använda divens id i target=""?

 

Någon som vet hur man gör, eller hur man kanske skulle kunna få till det med hjälp av ajax? (Vid ett sådant svar skulle en utförlig beskrivning önskas )

 

Jag vill mao uppnå samma funktionalitet som med en iframe.

Min kod:

 

CSS:

 

#maincontent {

font-family: verdana, arial;

font-size: 11px;

color: #000;

 

}

 

#mainmenu {

font-family: verdana, arial;

font-size: 11px;

color: #000;

 

}

 

#contentdiv {

font-family: verdana, arial;

font-size: 11px;

width: 200px;

height: 200px;

border: 1px solid;

overflow: auto;

 

}

 

DIVS i htmlfil:

 

<div id="maincontent">

 

<div id="mainmenu">

 

<a href="sida1.html" target="contentdiv">Sida 1</a>

<a href="sida2.html" target="contentdiv">Sida 2</a>

<a href="sida3.html" target="contentdiv">Sida 3</a>

 

</div>

 

<div id="contentdiv">

 

Här skall innehållet för länksidorna visas om möjligt?...

 

</div>

 

</div>

 

Mycket tacksam för hjälp och delar gladeligen ut poäng!

 

[inlägget ändrat 2006-05-31 09:53:45 av MsBlues]

[inlägget ändrat 2006-05-31 09:54:24 av MsBlues]

[inlägget ändrat 2006-05-31 09:54:47 av MsBlues]

[HeT]

Hej!

Om du vill ha samma funktionalitet som en iframe varför inte använda en sådan? Att ladda in en htmlsida med doctype-deklaration, head-taggar och ccs-er i en div skulle jag säga är omöjligt. Däremot går det ju att ladda in information (html-kod)...

Satsa på en iframe. Eller finns det någon anledning att inte göra det?

/Tjo

H

 

[MsBlues]

Tack för svaret HeT!

Anledningen är att jag inte vill använda frames och skulle vilja testa en ny variant. Iframes har jag kört med ett tag nu.

Har hört att det skall fungera att ladda in en html fil i en div... Någon annan som vet?

 

 

 

[Micke_skane]

Du kanske tänker på SSI.

Kolla lite här om SSI:

http://www.webdesignskolan.com

 

Längst ner på sidan om SSI finns en länk till fler länkar om SSI.

 

[inlägget ändrat 2006-05-31 10:46:57 av Micke_skane]

[Anjuna Moon]

Som HeT redan påpekat så kan du inte göra exakt det du vill, vare sig med SSI eller Ajax, eftersom ett html-dokument endast kan bestå av en uppsättning doctype-deklarationer samt en uppsättning html- och head-taggar. Har du däremot en html-fil som inte innehåller detta (ex. en fil som enbart innehåller kod för ett lager) så kan du fixa det både med SSI eller, om du vill ha det dynamiskt, med Ajax.

 

[MsBlues]

Tack för era svar båda två, Ajuna och Micke!!

 

Låter intressant.

Någon som har någon tutorial i backfickan att göra detta med ajax?

 

 

Hur skulle ni själva lösa detta problem?

 

 

 

[Anjuna Moon]

Hur skulle ni själva lösa detta problem?

Det beror på situationen. Normalt sett ser jag inget behov av att ladda in innehåll dynamiskt på sidan, då sidladdningar blir ett alltmindre prestandaproblem med ökade bredbandshastigheter.

 

Men vill du ha funktionaliteten som iframes erbjuder, fast med filer som inte innehåller tidigare nämnda taggar så skulle jag lösa det antingen via

 

- Ajax: Om det handlar om en stor mängd sidor, eller en mindre mängd sidor men med mycket innehåll vars innehåll skall kunna laddas in

- Javascript: Med mindre mängder utbytbart innehåll skulle jag lagra informationen i dolda lager istället och via JS skifta vilket lager som skall visas.

 

Vilken variant vill du ha exempel på?

 

[MsBlues]

Du har helt rätt vad gäller att folk i gemen nuförtiden faktiskt ha bredband och att ladda sidor är inget direkt problem, det går fort ändå för de flesta. Inte som när man satt med 56K och kunde gå och käka lunch när man skrev in www.boxman.se och när man kom tillbaka hade sidan laddats klart

 

Alltså, om du vet några tutorials som beskriver båda dessa sätt...så är jag intresserade av båda. Främst Ajax kanske..

Jag är himla intresserad av att lära mig nya varanter på allt!

 

En grej jag tycker är himla snygg också, som jag sett på en del sidor som laddar innehåll med hjälp av ajax är att det visas som en .gif preloader innan tills sidan laddats klart. Lite coolt.

 

För att vika av på lite av ett sidospår så har jag gjort en sida för ett tag sedan där jag gjorde en php include av en textfil i en div. Dock är jag inte så insatt på området php heller så jag fattade aldrig om man kunde formatera innehållet i textfilen via css på något sätt. Som sagt ett sidospår. Dessutom ligger sidan jag tänkte testa detta med ajaxprylen på, på en windowsserver.

 

 

 

 

 

[Anjuna Moon]

Ok, här kommer ett Ajax-exempel. Sidan består av:

 

- En länk för att ladda filen Inc1.html (som i sin tur innehåller en div med lite text) i topplagret.

- En länk som försöker ladda html från en fil som inte existerar. Skall ge 404-fel.

- Ett lager i vilket du vill ladda in html i

 

http://c2.nordicplaza.com/eforum/AjaxInclude.html#

 

Exemplet är testat i IE6, FF1.5 och Opera8.53

 

[DanielForPresident]

Ser att du redan fått något svar om tips på hur AJAX fungerar. Här kommer något till:

 

http://www.w3schools.com/ajax/default.asp

 

Använder det själv till lite av varje. Ett exempel är:

http://www.webbradioguiden.se/listAll.aspx där jag hämtar in radiostationer baserat på föregående val. Egentligen inget avancerat men smidigt att använda just där. Många stora sidor använder Ajax idag, bla eniro.se .

 

[MsBlues]

Ahh TACK så hemskt mycket Anjuna!!

Tack också DanielForPresident, fick inte rösta mer idag - men poäng kommer imorrn!

 

[MsBlues]

Har nu kollat in webbradioguiden...

 

Egentligen inget avancerat men smidigt att använda just där.

 

- Ser vääldigt avancerat ut tycker jag! Håller med om att i en sådan lösning du gjort där passar Ajax alldeles utomordentligt bra. Mycket bra sida!

 

Om man skulle vilja lägga in en sådan där "preloader" iform av en .gif bild, som jag beskrev tidigare, vet någon av er hur man skulle göra då? (Menar mao att jag skulle vilja att den inkluderades på något sätt i Anjunas exempel så att när man klickar på Inc1.html så visas en .gif loader tills dess att sidan är laddad).

 

En sista lite kort fråga till Anjuna.

I din AjaxInclude.html har du skrivit en kommentar:

 

// I mitt exempel skickar jag inga parametrar till serverscriptet

// så det får vi utöka senare.

 

- Som den novis jag är på detta undrar jag bara vad du menar att man skulle kunna utöka med där?

 

// Kunde skrivit detta i föregående inlägget där jag svarade Anjuna så hade jag sparat lite plats i tråden och inte gjort den så hiskeligt lååång Sorry.//

 

[DanielForPresident]

En preloader kan du få fram genom att det första du göra i SendRequest funktionen är att visa en div med preloadern i ett lager ovanför diven (Counter) där contenten ska in. I LoadHtml funktionen gömmer du sen samma preloader-div sist i funktionen. I Anjuna Moons fina exempel laddas sidorna in så snabbt att du knappt kommer att hinna se preloadern men i andra lösningar där sidorna tar längre tid att lösa kan det vara en snygg lösning.

 

[MsBlues]

Hallå!

Känner mig lite dum, men jag är verkligen inte insatt i det här med ajax eller javascript. Brukar mest implementera

Du tror inte att du kan visa hur du menar med koden Anjuna har i sin AjaxInclude.html ? Jag förstår inte hur jag skall koda eller var jag skall lägga koden. Ponera att själva preloadern heter typ preloader.gif och skall visas i diven (Counter) innan sidan laddas färdigt.

 

Med den lilla text som ligger i divven i nuläget hinner man väl knappt se någon preloader, men om man t.ex. har ett bildgalleri så blir det ju säkert så att man ser den.

 

Appropå Ajax, så har http://www.prisjakt.nu/ använt Ajax på ett coolt sätt. Skriv t.ex. in Troja i Sökrutan så ser ni vad som händer.

 

 

[DanielForPresident]

Antingen kan du som sagt lägga det i ett lager ovanför counter som du döljer och visar.

 

<div id="preloader" style="position:absolute;left:120px;top:280px;display:block;z-index:10;"><img src="preloader.gif" ></div> 

function SendRequest(URL) {
document.getElementById('preloader').style.display = 'block';
...

function LoadHtml(sData) {
o=document.getElementById('Counter');
o.innerHTML=sData;
document.getElementById('preloader').style.display = 'none';
}

 

Eller så kan du sätta contenten i counter till att visa preloadern när du initierar requesten.

 

function SendRequest(URL) {
document.getElementById('Counter').innerHTML = '<img src="preloader.gif">';
...

 

När sen rätt sida hämtats för att visas i Countern kommer den koden/texten att ersätta preloadern.

 

Nu kan man skriva dessa scripten lite snyggare/flexiblare än jag gjort här men det var mest för att visa på hur man kan göra.

 

 

 

[MsBlues]

Tack så hemskt mycket för hjälpen..skall genast testa om jag kan få till det!

 

G U L D med så snälla människor!

 

[MsBlues]

Stötte visst på patrull.

När jag gör som du visar i Exempel 1 dvs. i AjaxInclude.html så laddar preloader.gif inne i divven counter hela tiden och fortsätter att göra så även när jag klickar på en av länkarna Inc1.html som skall laddas in. Så här har jag gjort:

 

[log]

<head>

<script language="JavaScript" TYPE="text/javascript">

<!--

var oAjax;

// Den användarfunktion som tar emot den hämtade datan

// Det är här du skall ändra vad som skall göras med den.

// I mitt fall lägger jag in värdet i en DIV

function LoadHtml(sData) {

o=document.getElementById('Counter');

o.innerHTML=sData;

document.getElementById('preloader').style.display = 'none';

 

}

 

// I mitt exempel skickar jag inga parametrar till serverscriptet

// så det får vi utöka senare.

function SendRequest(URL) {

var sUrl=URL;

oAjax=GetXmlHttpObject(StateHasChanged)

oAjax.open("GET", sUrl , true)

oAjax.send(null)

document.getElementById('preloader').style.display = 'block';

 

}

 

// Följande funktion kontrollerar om datan är färdighämtad.

// Om den är det anropas användarfunktionen med den data som

// hämtades.

function StateHasChanged() {

if (oAjax.readyState==4 || oAjax.readyState=='complete') {

sData=oAjax.responseText;

LoadHtml(sData);

}

}

 

// Olika läsare kräver olika metoder för att

// skapa Ajax-objektet.

function GetXmlHttpObject(oHndl) {

var oXH=null;

var oAg=navigator.userAgent;

if (oAg.indexOf("MSIE")==-1 && (oAg.indexOf("Opera")>=-1 || oAg.indexOf("Mozilla")>=-1)) {

oXH=new XMLHttpRequest();

oXH.onload=oHndl;

oXH.onerror=oHndl;

return oXH;

}

if (oAg.indexOf("MSIE")>=-1) {

sCls="Msxml2.XMLHTTP";

if (oAg.indexOf("MSIE 5.5")>=-1)

sCls="Microsoft.XMLHTTP";

try {

oXH=new ActiveXObject(sCls);

oXH.onreadystatechange=oHndl;

return oXH;

} catch(e) {

alert("ActiveX-scriptning verkar vara avslaget");

return ;

}

}

}

//-->

</script>

</head>

[/log]

 

<body>

<a href="#" onclick="SendRequest('Inc1.html');">Ladda Inc1.html</a><br>

<a href="#" onclick="SendRequest('Inc2.html');">Ladda Inc2.html</a>

<div id="preloader" style="position:absolute;left:120px;top:280px;display:block;

z-index:10;"><img src="preloader.gif" ></div>

<div id="Counter" style="height:400px;width:400px;border:1px solid black;"></div>

</body>

 

I Exempel 2 så laddar preloader.gif först när jag klickat på länken Inc1.html och fortsätter också att ladda - Inc1.html visas mao aldrig i divven counter. Så här har jag gjort i AjaxInclude.html :

 

[log]

<head>

<script language="JavaScript" TYPE="text/javascript">

<!--

var oAjax;

// Den användarfunktion som tar emot den hämtade datan

// Det är här du skall ändra vad som skall göras med den.

// I mitt fall lägger jag in värdet i en DIV

function LoadHtml(sData) {

o=document.getElementById('Counter');

o.innerHTML=sData;

 

}

 

// I mitt exempel skickar jag inga parametrar till serverscriptet

// så det får vi utöka senare.

function SendRequest(URL) {

var sUrl=URL;

oAjax=GetXmlHttpObject(StateHasChanged)

oAjax.open("GET", sUrl , true)

oAjax.send(null)

document.getElementById('Counter').innerHTML = '<img src="preloader.gif">';

 

}

 

// Följande funktion kontrollerar om datan är färdighämtad.

// Om den är det anropas användarfunktionen med den data som

// hämtades.

function StateHasChanged() {

if (oAjax.readyState==4 || oAjax.readyState=='complete') {

sData=oAjax.responseText;

LoadHtml(sData);

}

}

 

// Olika läsare kräver olika metoder för att

// skapa Ajax-objektet.

function GetXmlHttpObject(oHndl) {

var oXH=null;

var oAg=navigator.userAgent;

if (oAg.indexOf("MSIE")==-1 && (oAg.indexOf("Opera")>=-1 || oAg.indexOf("Mozilla")>=-1)) {

oXH=new XMLHttpRequest();

oXH.onload=oHndl;

oXH.onerror=oHndl;

return oXH;

}

if (oAg.indexOf("MSIE")>=-1) {

sCls="Msxml2.XMLHTTP";

if (oAg.indexOf("MSIE 5.5")>=-1)

sCls="Microsoft.XMLHTTP";

try {

oXH=new ActiveXObject(sCls);

oXH.onreadystatechange=oHndl;

return oXH;

} catch(e) {

alert("ActiveX-scriptning verkar vara avslaget");

return ;

}

}

}

//-->

</script>

</head>

 

<body>

 

<a href="#" onclick="SendRequest('Inc1.html');">Ladda Inc1.html</a><br>

<a href="#" onclick="SendRequest('Inc2.html');">Ladda Inc2.html</a><br><br><br>

<div id="Counter" style="height:400px;width:400px;border:1px solid black;"></div>

 

</body>

[/log]

 

Jag har säkert missuppfattat hur du menade... hoppas att du el Anjuna kan se vad jag gör galet. Tack än en gång för hjälpen!

 

[MsBlues]

Anjuna el Daniel...om ni har tid vore jag jätte-tacksam om ni kunde klura ut hur vad jag gjort för fel i kodexemplen ovan.

 

Vad gäller Ajax så har jag läst lite på nätet om det här med att "Back" knappen i webbläsaren inte fungerar med ajax-tekniken. Har också läst att det skall finnas någon lösning på det, men det verkar vara rena grekiskan. Är det något ni händelsevis känner till?

 

 

[Anjuna Moon]

Lite senare om jag hinner, har en del projekt att knyta samman innan semestern.

 

[MsBlues]

Ok, Anjuna..jag väntar tills ni har tid :-)

 

[MsBlues]

Finns det i n g e n i hela världen som kan hjälpa mig att få till det som jag beskrivit i mitt inlägg i denna tråg från 1 juni 2006 12:52??

 

Skämt & sido så vore jag mkt tacksam för lite hjälp.

 

[MsBlues]

Eftersom ingen verkar ha något svar på min fundering ang. att visa en preloader innan sidan laddats klart (som Daniel for president visade)..

 

[log]

I Exempel 1 dvs. i AjaxInclude.html så laddar preloader.gif inne i divven counter hela tiden och fortsätter att göra så även när jag klickar på en av länkarna Inc1.html som skall laddas in.

 

Så här har jag gjort:

 

 

<head>

<script language="JavaScript" TYPE="text/javascript">

<!--

var oAjax;

// Den användarfunktion som tar emot den hämtade datan

// Det är här du skall ändra vad som skall göras med den.

// I mitt fall lägger jag in värdet i en DIV

function LoadHtml(sData) {

o=document.getElementById('Counter');

o.innerHTML=sData;

document.getElementById('preloader').style.display = 'none';

 

}

 

// I mitt exempel skickar jag inga parametrar till serverscriptet

// så det får vi utöka senare.

function SendRequest(URL) {

var sUrl=URL;

oAjax=GetXmlHttpObject(StateHasChanged)

oAjax.open("GET", sUrl , true)

oAjax.send(null)

document.getElementById('preloader').style.display = 'block';

 

}

 

// Följande funktion kontrollerar om datan är färdighämtad.

// Om den är det anropas användarfunktionen med den data som

// hämtades.

function StateHasChanged() {

if (oAjax.readyState==4 || oAjax.readyState=='complete') {

sData=oAjax.responseText;

LoadHtml(sData);

}

}

 

// Olika läsare kräver olika metoder för att

// skapa Ajax-objektet.

function GetXmlHttpObject(oHndl) {

var oXH=null;

var oAg=navigator.userAgent;

if (oAg.indexOf("MSIE")==-1 && (oAg.indexOf("Opera")>=-1 || oAg.indexOf("Mozilla")>=-1)) {

oXH=new XMLHttpRequest();

oXH.onload=oHndl;

oXH.onerror=oHndl;

return oXH;

}

if (oAg.indexOf("MSIE")>=-1) {

sCls="Msxml2.XMLHTTP";

if (oAg.indexOf("MSIE 5.5")>=-1)

sCls="Microsoft.XMLHTTP";

try {

oXH=new ActiveXObject(sCls);

oXH.onreadystatechange=oHndl;

return oXH;

} catch(e) {

alert("ActiveX-scriptning verkar vara avslaget");

return ;

}

}

}

//-->

</script>

</head>

 

<body>

<a href="#" onclick="SendRequest('Inc1.html');">Ladda Inc1.html</a><br>

<a href="#" onclick="SendRequest('Inc2.html');">Ladda Inc2.html</a>

<div id="preloader" style="position:absolute;left:120px;top:280px;display:block;

z-index:10;"><img src="preloader.gif" ></div>

<div id="Counter" style="height:400px;width:400px;border:1px solid black;"></div>

</body>

 

I Exempel 2 så laddar preloader.gif först när jag klickat på länken Inc1.html och fortsätter också att ladda - Inc1.html visas mao aldrig i divven counter. Så här har jag gjort i AjaxInclude.html :

 

<head>

<script language="JavaScript" TYPE="text/javascript">

<!--

var oAjax;

// Den användarfunktion som tar emot den hämtade datan

// Det är här du skall ändra vad som skall göras med den.

// I mitt fall lägger jag in värdet i en DIV

function LoadHtml(sData) {

o=document.getElementById('Counter');

o.innerHTML=sData;

 

}

 

// I mitt exempel skickar jag inga parametrar till serverscriptet

// så det får vi utöka senare.

function SendRequest(URL) {

var sUrl=URL;

oAjax=GetXmlHttpObject(StateHasChanged)

oAjax.open("GET", sUrl , true)

oAjax.send(null)

document.getElementById('Counter').innerHTML = '<img src="preloader.gif">';

 

}

 

// Följande funktion kontrollerar om datan är färdighämtad.

// Om den är det anropas användarfunktionen med den data som

// hämtades.

function StateHasChanged() {

if (oAjax.readyState==4 || oAjax.readyState=='complete') {

sData=oAjax.responseText;

LoadHtml(sData);

}

}

 

// Olika läsare kräver olika metoder för att

// skapa Ajax-objektet.

function GetXmlHttpObject(oHndl) {

var oXH=null;

var oAg=navigator.userAgent;

if (oAg.indexOf("MSIE")==-1 && (oAg.indexOf("Opera")>=-1 || oAg.indexOf("Mozilla")>=-1)) {

oXH=new XMLHttpRequest();

oXH.onload=oHndl;

oXH.onerror=oHndl;

return oXH;

}

if (oAg.indexOf("MSIE")>=-1) {

sCls="Msxml2.XMLHTTP";

if (oAg.indexOf("MSIE 5.5")>=-1)

sCls="Microsoft.XMLHTTP";

try {

oXH=new ActiveXObject(sCls);

oXH.onreadystatechange=oHndl;

return oXH;

} catch(e) {

alert("ActiveX-scriptning verkar vara avslaget");

return ;

}

}

}

//-->

</script>

</head>

 

 

<body>

 

<a href="#" onclick="SendRequest('Inc1.html');">Ladda Inc1.html</a><br>

<a href="#" onclick="SendRequest('Inc2.html');">Ladda Inc2.html</a><br><br><br>

<div id="Counter" style="height:400px;width:400px;border:1px solid black;"></div>

 

</body>

 

[/log]

 

..så tänkte jag bara höra hur man gör om man har en länk inne i Inc1.html och vill att den skall öppnas inuti divven "Counter" i ajaxinclude.html, hur gör man då?

 

[inlägget ändrat 2006-06-14 09:16:24 av MsBlues]

[inlägget ändrat 2006-06-14 09:20:47 av MsBlues]

[inlägget ändrat 2006-06-14 09:22:08 av MsBlues]

[zerblat]

Jag skulle vilja påstå att du gör det alldeles för komplicerat. Behöver du verkligen AJAX? Det låter mer som att det du bör kolla på är nån variant av SSI (använd hellre t ex PHP om du har tillgång till det).

http://php.about.com/od/tutorials/ht/template_site.htm

http://www.alistapart.com/articles/phpcms/

http://www.ibdhost.com/help/templates/

 

Ett problem med AJAX-lösningen är att du ställer ett större krav på webbläsaren -- besökaren måste ha tillgång till Javascript (och ha det påslaget) och dessutom skjuter du över uppgiften att plocka ihop webbsidorna från servern till klienten. Förutom det finns förstås de normala invändningarna: bakåtknappen, omöjligt att länka till eller spara bokmärken till individuella sidor. Den enda fördelen är att du slipper ladda om sidans andra element vid sidbyten. Om du inte har supertunga sidor så bör inte det vara ett stort nog problem för att väga upp nackdelarna.

 

Därmed inte sagt att AJAX inte har sina användningar. Det finns situationer då det är en enorm fördel att kunna skicka data mellan klienten och servern utan att ladda om sidan.

 

[MsBlues]

Tack för länkarna!

I detta fall har jag inte tillgång till php, utan asp. Därför tänkte jag på ajax som är plattformsoberoende. Mycket intressanta länkar i vilket fall, skall gå igenom dem - bra att lära sig nya saker!!