Hjälp med cookies + <select> i JavaScript

[osklar0328]

Jag skulle behöva hjälp med cookies i en funktion som byter stilmallar utan skript i HTML-koden.

Funktionen med att byta stilmallar med drop-down menyn "change" i <select> taggarna fungerar som den ska utan att jag använder javascript i html-koden. Men hur får man det att sparas i cookies så att när laddar om sidan så är den stilmallen man senast valt inställd? Nu när man laddar om väljer den automatiskt den första.

Jag har testat olika metoder som att använda onclick i html-koden och göra stilmalls-bytet genom länkar, <a>, istället och då sparas det i cookies. Men hur ska man göra för att i detta fall få det att sparas när väljer i drop-down menyn och sköta allt via det externa javascriptet?

Stilmallar:
[kod]<link rel="stylesheet" type="text/css" href="css/1.css" title="1">
<link rel="alternate stylesheet" type="text/css" href="css/2.css" title="2">
<link rel="alternate stylesheet" type="text/css" href="css/3.css" title="3">
<link rel="alternate stylesheet" type="text/css" href="css/4.css" title="4">[/kod]

HTML:

[kod]<select name="change" id="change">
<option id="s0" value="1">Standard</option>
<option id="s1" value="2">Utseende 2</option>
<option id="s2" value="3">Utseende 3</option>
<option id="s3" value="4">Utseende 4</option>
</select>[/kod]

JavaScript:

[kod]function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

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 chooseStyle(style) {

createCookie("style", style, 30);

var title = document.getElementById("change").value;
var theLinks = document.getElementsByTagName("link");

for(i = 0; i < theLinks.length; i++) {
var a = theLinks[i];
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function pageLoaded(){

var styleCookie = document.getElementById("change");
styleCookie.onchange = chooseStyle;

var style = readCookie("style");
if (style == null){
style = 0;
}
chooseStyle(style);
}

window.onload = pageLoaded;[/kod]

[osklar0328]

Ingen som kan hjälpa mig?

[voigtann1]

det är väl i princip samma sak som http://www.webforum.nu/showthread.php?t=185453 fast din kod har inget disabled attribut på dina link-element

[osklar0328]

Det är ju bara att jag inte förstår varför cookies inte fungerar, det gör det om jag har använder metoden som du länkade till men inte med det som jag vill göra..

[voigtann1]

Det är ju bara att jag inte förstår varför cookies inte fungerar, det gör det om jag har använder metoden som du länkade till men inte med det som jag vill göra..

Det är inte det som är problemet, att skapa en cookie med din kod och läsa av den är inga problem.

[osklar0328]

Men vad jag gör jag för fel?

[voigtann1]

du sätter en cookie till ett event objekt, vilket är inte det du önskar tror jag:
[kod] createCookie("style", style, 30);

var title = document.getElementById("change").value;
var theLinks = document.getElementsByTagName("link");[/kod]
vill du nog hellre köra:
[kod]
var title = document.getElementById("change").value;
var theLinks = document.getElementsByTagName("link");
createCookie("style", title, 30);
[/kod]och ta bort style parametern i huvudtaget.

[osklar0328]

vad menar du med det "ta bort style parametern i huvudtaget"? Jag är helt nybörjare på detta

[voigtann1]

function chooseStyle(style) {}

ta bort style ifrån den metoden som parameter, du använder dig inte av den på det sätt du vill

[osklar0328]

funkar inte, jag kör ju chrome men på server så det är ju inte lokalt så det är ju inte problemet.

nu ser det ut så här:

[kod]function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

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 chooseStyle() {

var title = document.getElementById("change").value;
var theLinks = document.getElementsByTagName("link");
createCookie("style", title, 30);

for(i = 0; i < theLinks.length; i++) {
var a = theLinks[i];
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function pageLoaded(){

var styleCookie = document.getElementById("change");
styleCookie.onchange = chooseStyle;

var style = readCookie("style");
if (style == null){
style = 0;
}
chooseStyle();
}

window.onload = pageLoaded;[/kod]

[voigtann1]

kör debug i chrome developer tools, och snälla använd [kod]-block för att kapslar in koder, bli lättare att läsa. cookie måste köras via en server om jag inte minns helt fel?

[osklar0328]

oj jaha när jag skrev koden så såg det bättre ut, sorry.

Jag får inte några felmedelanden i chrome när jag går in i javascripts konsolen. Är det något jag missar något stavfel. Det finns ju jättebra tutorials men alla har ju exempelvis onClick i html-koden och då fungerar det med cookies. men nu när jag helt separerar javascript från html fungerar det inte. Har det med min <select> meny att göra? eller det kanske inte är i den problemet ligger

[voigtann1]

fungera för mig: http://voigt.se/sandbox/wf/cookie_css/ du måste antingen vara på en lokal server eller lägga upp koden för att cookies skall sparas.

det ända jag ändrade på var till:[kod]if (style !== null){
document.getElementById("change").value = style;
}[/kod]att man sätter dropdown listans värde till style, för den kommer köra chooseStyle metoden direkt efter den och kolla vad #change har för värde.

Fast jag hade nog kanske funderat på att ha två olika metoder: en som sätter cookie och en som sätter CSSn

[osklar0328]

Ja nu funkar det! Jag hade gjort fel i min "function pageLoaded". Jag hade glömt hämta värdet från "change"

document.getElementById("change").value = style;

Nu ska jag sätta mig och gå igenom allt igen bit för bit, tusen tack för hjälpen att förstå!