Panelen



Forumnavigering
Senast inloggade
RSS
Sponsorer

Forum > Klientspråk > JavaScript

Refresh page on tab click

Shadi
Shadi

Gradering

#18220

Tjenare

Jag hjälpte häromdan pbf med att hitta en lösning på ett problem. Man använder jQuery Tabs.
Det som skulle hända är att när man klickade på en tab så skulle man ladda om sidan och visa den tabben man hade klickat på. Jag försökte med olika metoder och kom fram till en lösning. Titta på följande kod:

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

$(function() {    
    
    var cookieName = 'SelectedTab';
    var pageName = 'test.html';
    var theCookie = readCookie(cookieName);
    
    if(theCookie != null){
        location.href = pageName+'#'+theCookie;
        document.cookie = cookieName+'= ; expires=Thu, 2 Aug 2008 20:47:11 UTC; path=/'
        location.reload();
    }
    $("#tabs").tabs({
        select: function(event, ui){
            document.cookie = cookieName+'='+ui.panel.id+'; expires=Thu, 2 Aug 3008 20:47:11 UTC; path=/'
            location.href = pageName;
            return false;
        }
    });
});
  1. Jag sparar hashen på länken i en kaka när man klickar på den.
  2. Man skickas vidare till samma sida (en typ av refresh)
  3. Vid refreshen så kontrolleras hashen i cookien, hashen läggs till i adressfältet och sidan laddas om.

Voila! Men...det känns onödigt att ladda om sidan två gånger för att det ska fungera. Frågan är hur man kan optimera den här koden. Det vore kul att se hur ni skulle göra istället.

Testlänk: http://www.domat.se/test.html

Administratör på AspKoll.se!
Redigerades av Shadi den 18 oktober 2009. Läs tidigare inlägg.
Redigerades av Shadi den 18 oktober 2009. Läs tidigare inlägg.
ID: #18220 | Skapades: 2009-10-18 23:40:18 | Tråden har 8 svar och har lästs 683 gånger.

voigtan
voigtan

Gradering

#18221

Får man fråga varför du måste ladda om sidan? Ser inte någon vits att köra jquery tabbar om du ändå skall ladda om sidan du är på.

Och om jag inte minns helt fel från jquery-tab så räcker det att du redirectar (om du nu måste det) till ID taben:

sidan.html#tab2 (om det är tab2 som är ID för tabb 2). i ditt fal: http://www.domat.se/test.html#tab-2

Varför skall du spara det i en cookie och skickar användarn vidare, känns som du gå ett steg för mycket, samtidigt så ser jag inte varför man nu skall använda sig av javascript och sen inte använda sig av biblioteketet jquery-ui

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
Redigerades av voigtan den 19 oktober 2009. Läs tidigare inlägg.
Redigerades av voigtan den 19 oktober 2009. Läs tidigare inlägg.
Redigerades av voigtan den 19 oktober 2009. Läs tidigare inlägg.
ID: #18221 | Skapades: 2009-10-19 06:33:36

Shadi
Shadi

Gradering

#18222

Anledningen till att jag laddar om sidan på slutet är att om man bara navigerar till test.html#tab-2 så visas inte denna. Sidan laddas inte om och tabben visas inte, så jag antar att det är ett cache problem. Då löser jag det med en refresh av sidan, det löser just det problemet. Så det som skulle göras var att

  1. Ladda om sidan
  2. Visa den nya taben.

Jag försökte hitta svar runtom på olika sidor, men jag hittade inte. Så jag kom på en egen lösning. Men jag skulle välkomna bättre idéer, det är därför jag postar detta =)

Administratör på AspKoll.se!
ID: #18222 | Skapades: 2009-10-19 19:06:20

voigtan
voigtan

Gradering

#18223

http://www.domat.se/test.html#tab-2 => Markera ju dina andra tabb, om du länkar från en sida så kommer den vara markerad... så jag förstå inte alls vad problemet är från början

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #18223 | Skapades: 2009-10-19 21:54:14

Shadi
Shadi

Gradering

#18224

Pröva att stå i test.html#tab-2 och sen i adressfältet skriva test.html#tab-3, du kommer att se att den inte byter tab. Försök även att när du står på den sidan att med JS navigera dig vidare till test.html#tab-3, samma problem.

Administratör på AspKoll.se!
ID: #18224 | Skapades: 2009-10-19 22:25:02

voigtan
voigtan

Gradering

#18225

Din kod är ju exakt samma som vad den gör by default, du måste ju trycka på något för att den skall ändra tabben, om jag trycker på tab-3 och kör en riktig reload så kommer den markera tab-3 om det är det den har i sitt addressfält. Jag förstå inte alls vad problemet är om jag skall vara ärlig.

$(function() {    
    var pageName = 'test.html';
    $("#tabs").tabs({
        select: function(event, ui){
            location.href = pageName + "#" + ui.panel.id;
        }
    });
});
Om du vill få en "direkt" rapport.

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
Redigerades av voigtan den 20 oktober 2009. Läs tidigare inlägg.
ID: #18225 | Skapades: 2009-10-20 06:37:51

Shadi
Shadi

Gradering

#18226

Problemet ligger i att din kod inte laddar om sidan, utan den byter bara tabs.

Din kod: http://www.domat.se/test2.html
Min kod: http://www.domat.se/test.html

Administratör på AspKoll.se!
ID: #18226 | Skapades: 2009-10-20 09:59:24

voigtan
voigtan

Gradering

#18227

Fortfarande:

Varför skall en sida laddas om? Då ser jag inte vitsen alls att köra jquery UI alls, vad är målet med att sidan måste laddas om?

Hur man ställer en fråga: http://support.microsoft.com/kb/q555375
ID: #18227 | Skapades: 2009-10-20 11:26:05

Shadi
Shadi

Gradering

#18228

Det vet jag inte, jag fick en uppgift om att det ska göra det bara. Det kan vara så att man vill att speciella flikar ska ladda om sidan. Varför kan vi bara spekulera kring, eller så kanske pbf kan förklara =)

Administratör på AspKoll.se!
ID: #18228 | Skapades: 2009-10-20 11:27:58
© Copyright 2007-2009 Shadi Domat | Version 3.0 | Sidkarta | Policy