Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Vill inte ladda om hela sidan. Hur gör jag?

1
Skriv svar
Permalänk
Medlem
●

Vill inte ladda om hela sidan. Hur gör jag?

Hejsan!

Håller på och bygger en hemsida. Problemet är dock när jag klickar på mina länkar (Hem, Portofilo etc.) så laddas hela sidan om. Jag vill endast att informationsrutan skall laddas om.

Hur gör jag detta?

Tack på förhand!

MVH affe

Redigera
Citera flera Citera
Permalänk
Medlem
●

Finns flera sätt, tex frames och javascript.
Kolla in detta tex: http://jquery.com/demo/thickbox/

Visa signatur

...

Redigera
Citera flera Citera
Permalänk
Medlem
●

Finns lite olika sätt att få den effekten, vanligtvis så är det så det ska vara och om du har satt css och javascript i andra filer än direkt i htmlsidan så cachas de upp så att sidan laddas lite snabbare.
Men för att bara ladda om en del av sidan så skulle du kunna använda dig av iframes eller av AJAX. Du skulle också kunna göra sidan till en enda stor flashsak, det beror lite på vad din hemsidas natur är. Om det är en sida där du visar dina vackra bilder så kanske flash skulle vara bra. Om det är en "vanlig" sida så ska du nog behålla att den laddas om när du trycker på en länk.

Men om du säger vem som ska gå in på den så kan det vara lättare att peka på vad som antagligen är "rätt" sätt för dig.

/Peo

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Tänk också på att flash oftare än man tror är fel sätt.

Redigera
Citera flera Citera
Permalänk
Medlem
●

jag är rätt färsk när det gäller att skapa sidor.. Men iFrames kom jag på att jag har gjort förr. Skall nog inte vara så knasigt om jag minns rätt.

Prövar nog på det.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Liq
jag är rätt färsk när det gäller att skapa sidor.. Men iFrames kom jag på att jag har gjort förr. Skall nog inte vara så knasigt om jag minns rätt.

Prövar nog på det.

Iframes är INTE en bra teknik att använda på moderna sidor...

Har någon färdig klass liggande för att göra sånt:

function createRequestObject() {
   var req;
   if(window.XMLHttpRequest){
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}
function handleDivTag(divtag)
{
   var divtag;
   return divtag;
}
var http = createRequestObject();
var divhandler = new handleDivTag(null);

function browse(act,divtag) {
document.getElementById(divtag).innerHTML='<p>Laddar sidan</p>';
   http.open('get', act);
   http.onreadystatechange = handleResponse;
   divhandler.divtag = divtag;
   http.send(null);
}
function handleResponse() {
   if(http.readyState == 4 && http.status == 200){
         var response = http.responseText;
      if(response) {
         document.getElementById(divhandler.divtag).innerHTML = response;
      }
   }
}

där du anropar funktionen browse() på följande sätt:

browse('./en_undersida.php','div_att_skriva_till');

så om din sida ser ut ungefär såhär:

<html>
<head>
<title> My supercool webpage </title>
<script type='text/javascript>
function createRequestObject() {
   var req;
   if(window.XMLHttpRequest){
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}
function handleDivTag(divtag)
{
   var divtag;
   return divtag;
}
var http = createRequestObject();
var divhandler = new handleDivTag(null);

function browse(act,divtag) {
document.getElementById(divtag).innerHTML='<p>Laddar sidan</p>';
   http.open('get', act);
   http.onreadystatechange = handleResponse;
   divhandler.divtag = divtag;
   http.send(null);
}
function handleResponse() {
   if(http.readyState == 4 && http.status == 200){
         var response = http.responseText;
      if(response) {
         document.getElementById(divhandler.divtag).innerHTML = response;
      }
   }
} 
</script>
</head>
<body>
<div id='statisk_div_med_lankar'>
<a href="javascript:browse('./undersida1.php','div_att_skriva_till')">Undersida 1</a>
<a href="javascript:browse('./undersida2.php','div_att_skriva_till')">Undersida 2</a>
</div>
<div id='div_att_skriva_till'>

</div>
</body>
</html>

Så stannar länkarna kvar på sidan medan diven med idn div_att_skriva_till ändras.

Sen kan du självklart ändra raden
document.getElementById(divtag).innerHTML='<p>Laddar sidan</p>';
till någonting annat i stil med
document.getElementById(divtag).innerHTML='<img src="laddningsbild.gif" />';
för att få någon fancy indikering på att den faktiskt laddar sidan

Visa signatur

https://github.com/adisbladis

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du sen kör AJAX som adisbladis säger, och jag rekommenderar att du gör det, så se bara till att man faktiskt kan navigera på sidan även om JS saknas/är avstängt.

Visa signatur

Blogg. Webboken. Pinboard, Last.fm, Facebook, Kongregate. W3fools.
Validera din HTML, men skryt inte om att du gör det.
Använd HTML5 och kom ihåg semantiken!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Lättast att kolla om sidan funkar i bara html är att köra noscript till FF (vilket även är bra för säkerheten när du surfar).

Visa signatur

i7 920 | 12GB DDR3 | GTX 480 | GA-X58A-UD7 | 160GB SSD X25-M G2 | 1TB F3 HD103SJ | W7 64-bit | Mac Mini
Webb: bluekitestudios.com

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av adisbladis
Iframes är INTE en bra teknik att använda på moderna sidor...

Har någon färdig klass liggande för att göra sånt:

function createRequestObject() {
   var req;
   if(window.XMLHttpRequest){
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}
function handleDivTag(divtag)
{
   var divtag;
   return divtag;
}
var http = createRequestObject();
var divhandler = new handleDivTag(null);

function browse(act,divtag) {
document.getElementById(divtag).innerHTML='<p>Laddar sidan</p>';
   http.open('get', act);
   http.onreadystatechange = handleResponse;
   divhandler.divtag = divtag;
   http.send(null);
}
function handleResponse() {
   if(http.readyState == 4 && http.status == 200){
         var response = http.responseText;
      if(response) {
         document.getElementById(divhandler.divtag).innerHTML = response;
      }
   }
}

där du anropar funktionen browse() på följande sätt:

browse('./en_undersida.php','div_att_skriva_till');

så om din sida ser ut ungefär såhär:

<html>
<head>
<title> My supercool webpage </title>
<script type='text/javascript>
function createRequestObject() {
   var req;
   if(window.XMLHttpRequest){
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}
function handleDivTag(divtag)
{
   var divtag;
   return divtag;
}
var http = createRequestObject();
var divhandler = new handleDivTag(null);

function browse(act,divtag) {
document.getElementById(divtag).innerHTML='<p>Laddar sidan</p>';
   http.open('get', act);
   http.onreadystatechange = handleResponse;
   divhandler.divtag = divtag;
   http.send(null);
}
function handleResponse() {
   if(http.readyState == 4 && http.status == 200){
         var response = http.responseText;
      if(response) {
         document.getElementById(divhandler.divtag).innerHTML = response;
      }
   }
} 
</script>
</head>
<body>
<div id='statisk_div_med_lankar'>
<a href="javascript:browse('./undersida1.php','div_att_skriva_till')">Undersida 1</a>
<a href="javascript:browse('./undersida2.php','div_att_skriva_till')">Undersida 2</a>
</div>
<div id='div_att_skriva_till'>

</div>
</body>
</html>

Så stannar länkarna kvar på sidan medan diven med idn div_att_skriva_till ändras.

Sen kan du självklart ändra raden
document.getElementById(divtag).innerHTML='<p>Laddar sidan</p>';
till någonting annat i stil med
document.getElementById(divtag).innerHTML='<img src="laddningsbild.gif" />';
för att få någon fancy indikering på att den faktiskt laddar sidan

Tack!.. Jag skall pröva mig på detta. Känns lite rörigt bara. Jag återkommer hur det går!

Till er andra, tack för alla svar, ni är mycket hjälpsamma.

MVH
Affe

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Liq
Tack!.. Jag skall pröva mig på detta. Känns lite rörigt bara. Jag återkommer hur det går!

Till er andra, tack för alla svar, ni är mycket hjälpsamma.

MVH
Affe

någon som vet hur man kan få javascripts att fungera med ajax?

Visa signatur

[ASUS P9X79] [Corsair RM850i] [Corsair 32GB DDR3 1600mhz] [i7 3930K] [Noctua NH-D14] [Gainward GTX 1080 "GLH" Golden Sample 8GB GDDR5X][Sandisk 256GB][Fractal Design Define S]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Niklashog
någon som vet hur man kan få javascripts att fungera med ajax?

AJAX = Asynchronous J avaScript And Xml

Ajax är alltså en benämning på den teknik där man använder javascript för att anropa en server som svarar med att skicka tillbaka ett svar iform av xml

Visa signatur

Windows XP Pro SP2 x32 | Ubuntu x64 | Firefox | Adobe Photoshop CS2 | Eclipse | Starcraft Broodwar
(X)HTML | CSS | XML | PHP | Java | C++ | vim script |
Daniel Örn, Eagleorn | Google is my friend, and he will be Yours to if You ask him »

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Eagleorn
AJAX = Asynchronous J avaScript And Xml

Ajax är alltså en benämning på den teknik där man använder javascript för att anropa en server som svarar med att skicka tillbaka ett svar iform av xml

mm men försöker man ladda en fil med ett javascript i så fungerar inte javascriptet i filen. så jag undrar hur man fixar det~. använder för tillfället den här koden men det fungerar inte.

<script type="text/javascript">
function createRequestObject() {
   var req;
   if(window.XMLHttpRequest){
      req = new XMLHttpRequest();
   } else if(window.ActiveXObject) {
      req = new ActiveXObject("Microsoft.XMLHTTP");
   } else {
      alert('Problem creating the XMLHttpRequest object');
   }
   return req;
}
function handleDivTag(divtag)
{
   var divtag;
   return divtag;
}
var http = createRequestObject();
var divhandler = new handleDivTag(null);

function browse(act,divtag) {
document.getElementById(divtag).innerHTML='<p>Laddar sidan..</p>';
   http.open('get', act);
   http.onreadystatechange = handleResponse;
   divhandler.divtag = divtag;
   http.send(null);
}


function handleResponse() {
   if(http.readyState == 4 && http.status == 200){
         var response = http.responseText;
      if(response) {
         document.getElementById(divhandler.divtag).innerHTML = response;
	parseAjaxJS(document.getElementById(divhandler.divtag));
      }
   }
} 
function parseAjaxJS(node) {
	var st = node.getElementsByTagName('SCRIPT');
	var strExec;
	for(var i=0;i<st.length; i++) {
		if (bSaf) {
			strExec = st[i].innerHTML;
		} else if (bOpera) {
			strExec = st[i].text;
		} else if (bMoz) {
			strExec = st[i].textContent;
		} else {
			strExec = st[i].text;
		}
		
		//alert(strExec);
		
		try {
			eval(strExec.split("<!--").join("").split("-->").join(""));
			//eval(strExec); //dev
		} catch(e) {
			alert(e);
		}
	}
}
</script>


///////////////////////////
//////////////////////////
/////////////////////////

<a href="#" onclick="browse('./mp3player.php','mp3')">Test</a>

en polare sa att han visste hur man fixade det och la in funktionen parseAjaxJS och ändrade något annat men det fungerade inte :S. Så om någon annan vet hur man gör så hoppas jag den delar med sig

Visa signatur

[ASUS P9X79] [Corsair RM850i] [Corsair 32GB DDR3 1600mhz] [i7 3930K] [Noctua NH-D14] [Gainward GTX 1080 "GLH" Golden Sample 8GB GDDR5X][Sandisk 256GB][Fractal Design Define S]

Redigera
Citera flera Citera
Permalänk
Medlem
●
Citat:

Ursprungligen inskrivet av Niklashog
mm men försöker man ladda en fil med ett javascript i så fungerar inte javascriptet i filen. så jag undrar hur man fixar det~. använder för tillfället den här koden men det fungerar inte....

Okej, missuppfattade din fråga lite.

Har tyvärr inget rakt svar på din fråga, men du vill alltså hämta nya javascript från servern som skall köras på sidan? Något sånt här kanske: http://ajaxpatterns.org/On-Demand_Javascript

Visa signatur

Windows XP Pro SP2 x32 | Ubuntu x64 | Firefox | Adobe Photoshop CS2 | Eclipse | Starcraft Broodwar
(X)HTML | CSS | XML | PHP | Java | C++ | vim script |
Daniel Örn, Eagleorn | Google is my friend, and he will be Yours to if You ask him »

Redigera
Citera flera Citera
Permalänk
Medlem
●

Crap.
Jag hänger inte riktigt med om vad jag gör egentligen. Har aldrig varit på Javascript förr.

Kanske är bättre om jag kör med Iframe istället ändå? Eller har någon en grundlig guide för just javascriptet så jag lyckas med detta ngn gång? .. (;

Mvh
affe

Redigera
Citera flera Citera
Permalänk
Medlem
●

Om du tänker köra på en javascriptlösning så skulle jag rekomendera JQuery. Väldigt enkelt att göra lite flashiga saker med. Inklusive ajax.

Du hittar JQuery information här: http://jquery.com/
Och du kan då använda dig av ett så enkelt javascript som

$("#minDiv").load("minFilSomSkaLaddasIn.html");

för att ändra innehållet i en liten div.

/Peo

edit: Det fina med att använda ett bibliotek som JQuery är att du får en testad lösning som du kan känna dig säker på att den fungerar. Med en egenbyggd så ökar du din kunskap men du måste testa en hel del för att försäkra dig om att det fungerar som det är tänkt på alla browsers.

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tack Peo, jag ska ladda hem det och prova mig på det (: . Såg lätt ut.

Edit: Hur gör jag om jag har en bild som ska länka?

Vi säger att min bild heter about.gif. Hur skriver jag då för att länka?..

/affe

Senast redigerat
Redigera
Citera flera Citera
Permalänk
Medlem
●

Det är både lätt och knepigt. Lätt iochmed att det är så lite kod som ska till för att få saker att fungera. Och knepigt av samma orsak. Ta en titt här för att komma igång snabbt: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#...

Låt säga att du har en bild, vad den heter är oviktigt, men vi kan göra något åt det här hållet:

$(document).ready(function() {
     $(#minbildsID).click(function() {
         $("#minDiv").load("minFilSomSkaLaddasIn.html");
     });
 });

Och sen ha en

<img id="minbildsID" src="about.gif" />
<div id="minDiv"> </div>

Så det är ganska enkelt, sen går det enkelt att lägga in lite slide-in effekter när det laddas m.m. om man känner för det.

Men det du får tänka på är att när man löser det såhär så kommer användaren vid ett tryck på bakåtknappen högst troligt åka ut ur din sida istället för att backa innehållet. Därför brukar jag förespråka att ladda om hela sidan för likande problem.

/Peo

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara