Oprettet lør. d. 28. juli 2012 kl. 15:29:47
100 point uddelt | 30 kommentarer
Tilpasse options i selectboks ud fra anden selectboks
Hej folkensJeg sidder og roder lidt med en form. Jeg ønsker at gøre den lidt dynamisk, men det vil ikke rigtig som jeg vil - måske nok fordi jeg ikke er den mest øvede i JavaScript.
Lad os sige, at jeg har to selectbokse. I den ene er der 50 valgmuligheder. Numrene 1 - 50. Hvis jeg vælger nummer 23 f. eks., så skal selectboks nummer to få valgmulighederne 0 - 23. Hvis jeg vælger 5 i den første selectboks, så skal selectboks to have valgmulighederne 0 - 5 osv ...
Jeg tænker umiddelbart, at jeg vil lave det ved at trække value ud af den første boks og så lave en for løkke, så den løber det ønskede antal gange og udprinter en option med et fortløbende nummer. Men det kan jeg desvære ikke få til at virke, da jeg er lidt i tvivl om, hvordan jeg får det hele til at hænge sammen. Der indgår noget PHP i den option, som skal kreeres, så det skal med ind på en eller anden måde.
Optionen skal se således ud, når den kommer ud:
<option <?php if ($_POST['antalVinduer'] == "1") {echo "SELECTED";}?>>1</option>
<option <?php if ($_POST['antalVinduer'] == "2") {echo "SELECTED";}?>>2</option>
osv...
Jeg håber der er en, som kan hjælpe mig lidt på vej, mht. hvordan det bør laves.
På forhånd tak og fortsat god weekend.
Skrevet lør. d. 28. juli 2012 kl. 15:55:50| #1
olebole (216.723 point)
<ole>
Du kan gøre det ved at downloade alle data og lade JS foretage sorteringen på klienten.
En anden løsning er kun at downloade de nødvendige data til at starte med - og derefter hente de sorterede data med Ajax. Det er, hvad Eksperten gør på kategorisiderne.
Uanset valg af løsning, må vi nødvendigvis vide, hvilke kriterier sorteringen præcist skal foregå udfra
/mvh
</bole>
Du kan gøre det ved at downloade alle data og lade JS foretage sorteringen på klienten.
En anden løsning er kun at downloade de nødvendige data til at starte med - og derefter hente de sorterede data med Ajax. Det er, hvad Eksperten gør på kategorisiderne.
Uanset valg af løsning, må vi nødvendigvis vide, hvilke kriterier sorteringen præcist skal foregå udfra
/mvh
</bole>
Skrevet lør. d. 28. juli 2012 kl. 16:55:22| #2
Hej olebole,
Hvad mener du mere præcist, når du skriver "sortere data"?
Umiddelbart er der jo ikke den store sortering, da det bare er en række options, der skal "oprettes" i en selectboks. Antallet som skal "oprettes" fås fra den første selectboks, hvor der altid er valgmulighederne 1, 2,3 .. og op til 50. Så det er de kriterier, der er.
Selvfølgelig skal den "sorteres" sådan, at felterne kommer i nummerisk orden fra 0 og opefter i de oprettede options, men det vil også automatisk være tilfældet, ved at lave det i en løkke og addere tallet med 1 for hvert loop.
Jeg har overvejet AJAX, men er gået væk fra ideen igen, da der ikke er nogen grund til at benytte det, da det hele kan ordnes hos klienten og der ikke som sådan skal udføres noget PHP eller andet før en senere fase, hvor der klikkes på submit.
Alle data kan downloades. Resten skabes jo alligevel først, når der vælges et punkt i den første selectboks.
Hvad mener du mere præcist, når du skriver "sortere data"?
Umiddelbart er der jo ikke den store sortering, da det bare er en række options, der skal "oprettes" i en selectboks. Antallet som skal "oprettes" fås fra den første selectboks, hvor der altid er valgmulighederne 1, 2,3 .. og op til 50. Så det er de kriterier, der er.
Selvfølgelig skal den "sorteres" sådan, at felterne kommer i nummerisk orden fra 0 og opefter i de oprettede options, men det vil også automatisk være tilfældet, ved at lave det i en løkke og addere tallet med 1 for hvert loop.
Jeg har overvejet AJAX, men er gået væk fra ideen igen, da der ikke er nogen grund til at benytte det, da det hele kan ordnes hos klienten og der ikke som sådan skal udføres noget PHP eller andet før en senere fase, hvor der klikkes på submit.
Alle data kan downloades. Resten skabes jo alligevel først, når der vælges et punkt i den første selectboks.
Skrevet lør. d. 28. juli 2012 kl. 18:38:19| #3
olebole (216.723 point)
Okay, så forstår jeg. Jeg ved ikke, hvordan du udskriver den oprindelige select, men jeg har lavet et eksempel, som viser princippet:
<?php
function getSelects() {
$aHtml = array('<select onchange="setSel(this)">');
$sHtml = '<select id="selSecond"><option value="-1"></option></select>';
for ($i=1; $i<51; $i++) {
$aHtml[] = '<option value="'.$i.'">'.$i.'</option>';
}
$aHtml[] = '</select>';
return implode('', $aHtml).' '.$sHtml;
}
?>
<script type="text/javascript">
var elmSecSel = null;
function setSel(elmSel) {
if (!elmSecSel) elmSecSel = document.getElementById("selSecond");
var elm, elmTmp = elmSecSel.cloneNode(false)
for (var i=0; i<=elmSel.value; i++) {
elm = document.createElement("option");
elm.appendChild(document.createTextNode(i));
elm.setAttribute("value", i);
elmTmp.appendChild(elm);
}
elmSecSel.parentNode.replaceChild(elmTmp, elmSecSel);
elmSecSel = elmTmp;
}
</script>
<?php echo getSelects() ?>
function getSelects() {
$aHtml = array('<select onchange="setSel(this)">');
$sHtml = '<select id="selSecond"><option value="-1"></option></select>';
for ($i=1; $i<51; $i++) {
$aHtml[] = '<option value="'.$i.'">'.$i.'</option>';
}
$aHtml[] = '</select>';
return implode('', $aHtml).' '.$sHtml;
}
?>
<script type="text/javascript">
var elmSecSel = null;
function setSel(elmSel) {
if (!elmSecSel) elmSecSel = document.getElementById("selSecond");
var elm, elmTmp = elmSecSel.cloneNode(false)
for (var i=0; i<=elmSel.value; i++) {
elm = document.createElement("option");
elm.appendChild(document.createTextNode(i));
elm.setAttribute("value", i);
elmTmp.appendChild(elm);
}
elmSecSel.parentNode.replaceChild(elmTmp, elmSecSel);
elmSecSel = elmTmp;
}
</script>
<?php echo getSelects() ?>
Skrevet lør. d. 28. juli 2012 kl. 18:54:30| #4
mireigi (20.117 point)
En måde at løse det på er denne.
arrUnderkategori udfylder du med værdier fra PHP, eller du kan manuelt indtaste dem, hvis de er statiske.
Det samme gælder for mulighederne i select med ID "kategori".
arrUnderkategori udfylder du med værdier fra PHP, eller du kan manuelt indtaste dem, hvis de er statiske.
Det samme gælder for mulighederne i select med ID "kategori".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
<title>Autofill Select List</title>
</head>
<body>
Kategori:
<select id="kategori">
<option value="0">Vælg</option>
<option value="1">Mad</option>
<option value="2">Drikke</option>
<option value="3">Dessert</option>
</select><br />
Underkategori:
<select id="underkategori" disabled="disabled">
</select>
<script type="text/javascript">
var arrUnderkategori = new Array();
arrUnderkategori[1] = [[1, "Bøf"], [2, "Hummer"], [3, "Suppe"]];
arrUnderkategori[2] = [[1, "Vand"], [2, "Øl"], [3, "Vin"]];
arrUnderkategori[3] = [[1, "Is"], [2, "Irish Coffee"]];
function populateList(id)
{
var underkategori = document.getElementById("underkategori");
while (underkategori.firstChild)
underkategori.removeChild(underkategori.firstChild);
if (id != null && id > 0 && arrUnderkategori[id] != null)
{
for (var i = 0; i < arrUnderkategori[id].length; i++)
{
var option = document.createElement("option");
option.value = arrUnderkategori[id][i][0];
option.text = arrUnderkategori[id][i][1];
underkategori.appendChild(option);
}
underkategori.removeAttribute("disabled");
}
else
{
underkategori.setAttribute("disabled", "disabled");
}
}
document.getElementById("kategori").onchange = function () { populateList(this.value); };
</script>
</body>
</html>
Skrevet lør. d. 28. juli 2012 kl. 19:42:38| #5
olebole (216.723 point)
Det er vist noget helt andet, der spørges om - og så er fremgangsmåden ikke særlig effektiv. Når der skal udføres mange DOM-manipulationer på et element, bør det trækkes ud af DOM-træet imens. Ellers sætter man browseren på unødigt renderingsoverarbejde *o)
Skrevet lør. d. 28. juli 2012 kl. 19:43:50| #6
olebole (216.723 point)
- og så skal et SELECT element i øvrigt indeholde mindst ét OPTION element, når siden loades
Skrevet lør. d. 28. juli 2012 kl. 21:18:57| #7
Tak for jeres løsninger.
Jeg har forsøgt at bygge videre på dit princip olebole, og det virker ganske glimrende. Det fungerer lige som jeg havde tænkt mig - næsten da. Der er et par problematikker i forbindelse med måden at udføre det på som driller mig lidt.
Problemet er, at der ikke sker noget, før man har lavet et valg i den første selectboks. Det er klart, eftersom det er onChange som benyttes.
Den første selectboks starter default på 1. Da det nogen gange vil være vedkommendes valg, vil den anden selectboks ikke fungere, da der ikke er foretaget en "forandring" i den første.
Det samme gør sig gældende ved klik på submit, og hvor valideringen returnerer false. Der vil den anden selectboks opbygget af JS ikke huske det valg, der er gjort. Den vil være nulstillet. Det vil den første selectboks ikke (da jeg har tilføjet lidt PHP, så den husker valget). Men igen, vil den anden selectboks ikke fungere, da der ikke er gjort et aktivt valg i den første selectboks. Det er selvfølgelig planen, at den skal huske valget ved en false validering.
Lige af hvad jeg kan gennnemskue, bør disse problematikker kunne løses ved brug af onLoad ved siden af onChange. Jeg synes dog at huske noget om, at onLoad ikke fungerer direkte nede på et selectelement, hvorfor jeg har forsøgt mig med det i body elementet uden held.
Har forsøgt mig med noget i stil med <body onLoad="SetSel(*)">
Hvor * er den værdi som den første selectboks har og SetSel er navnet på JavaScript funktionen.
Det fungerer dog umiddelbart ikke.
Nogen ideer?
Jeg har forsøgt at bygge videre på dit princip olebole, og det virker ganske glimrende. Det fungerer lige som jeg havde tænkt mig - næsten da. Der er et par problematikker i forbindelse med måden at udføre det på som driller mig lidt.
Problemet er, at der ikke sker noget, før man har lavet et valg i den første selectboks. Det er klart, eftersom det er onChange som benyttes.
Den første selectboks starter default på 1. Da det nogen gange vil være vedkommendes valg, vil den anden selectboks ikke fungere, da der ikke er foretaget en "forandring" i den første.
Det samme gør sig gældende ved klik på submit, og hvor valideringen returnerer false. Der vil den anden selectboks opbygget af JS ikke huske det valg, der er gjort. Den vil være nulstillet. Det vil den første selectboks ikke (da jeg har tilføjet lidt PHP, så den husker valget). Men igen, vil den anden selectboks ikke fungere, da der ikke er gjort et aktivt valg i den første selectboks. Det er selvfølgelig planen, at den skal huske valget ved en false validering.
Lige af hvad jeg kan gennnemskue, bør disse problematikker kunne løses ved brug af onLoad ved siden af onChange. Jeg synes dog at huske noget om, at onLoad ikke fungerer direkte nede på et selectelement, hvorfor jeg har forsøgt mig med det i body elementet uden held.
Har forsøgt mig med noget i stil med <body onLoad="SetSel(*)">
Hvor * er den værdi som den første selectboks har og SetSel er navnet på JavaScript funktionen.
Det fungerer dog umiddelbart ikke.
Nogen ideer?
Skrevet lør. d. 28. juli 2012 kl. 21:56:27| #8
olebole (216.723 point)
Som jeg læser spørgsmålet, skal den anden SELECT være tom fra start. Er det ikke tilfældet, må jeg vide, hvad den så skal indeholde.
Valideringsfejlen skyldes uhensigtsmæssig validering. Af hensyn til brugeren valideres med JavaScript. Efterfølgende valideres af sikkerhedsmæssige grunde på serveren.
Med mindre, du har besøg af en hacker, fanger din JS-validering evt. fejl. Har du besøg af en hacker, behøver du ikke tage hensyn til vedkommendes brugeroplevelse, eller hvad der evt. måtte være nulstillet =)
Valideringsfejlen skyldes uhensigtsmæssig validering. Af hensyn til brugeren valideres med JavaScript. Efterfølgende valideres af sikkerhedsmæssige grunde på serveren.
Med mindre, du har besøg af en hacker, fanger din JS-validering evt. fejl. Har du besøg af en hacker, behøver du ikke tage hensyn til vedkommendes brugeroplevelse, eller hvad der evt. måtte være nulstillet =)
Skrevet lør. d. 28. juli 2012 kl. 22:41:31| #9
Det skal den ikke :-) Da den første selectboks står på 1 pr. default, når man kommer ind på siden, skal den anden selectboks derfor have valgmulighederne 0 og 1 allerede fra start af. Men det er jo nemt nok at fikse. Det er bare at give dem de to options i ren HTML fra starten af i stedet for den ene du har givet i dit eksempel.
Jeg ved nu ikke om jeg er helt enig med dig i, at valideringsprocessen er uhensigtsmæssig. Jeg går ud fra din mening henvender sig mod, at jeg validerer datainput på serveren fremfor hos klienten :-)
Jeg validerer altid så vidt muligt data igennem PHP (eller hvad det nu er), da jeg personligt synes bedst om dette. Dette er mere driftsikkert i min verden, da JavaScript kan deaktiveres af klienten. Jovist, så kan man selvfølgelig bare sørge for, at man ikke kan bruge formularen, hvis det er tilfældet, men så er hele den del af websitet også lagt ned og det kan jo være i en større eller mindre grad afhængig af den enkelte hjemmeside. Det er ikke et problem ved validering på serveren, da det altid vil fungere. Det kræver et reload og en lidt længere rejse for datapakken ja, men det synes jeg personligt ikke generer specielt meget. Det generer i hvert fald ikke mig - medmindre der er lange svartider fra serveren naturligvis.
At en person sjældent deaktiverer JavaScript er naturligvis rigtigt. Men det sker, da der er folk som konsekvent slår det fra, for at slippe for en masse irriterende skrammel som man desværre også kan (mis)bruge JavaScript til. Man kan selvfølgelig sagtens vælge bare at udelukke den del af potentielle kunder, da det er et fåtal, men der ønsker jeg hellere at levere en løsning, der virker for alle.
Angående hackere, så er jeg fuldstændig ligeglad med disse i denne situation. Det er hverken en form til login eller lignende med personfølsomme data bagved, så der er ikke det store mål i det for dem. Validering sker udelukkende for at sikre vi får de data igennem vi forventer og for at sørge for at holde spambots og irriterende teenagere, der keder sig på afstand.
Validering i klient eller ej, så forstår jeg nu stadig ikke helt, hvorfor det ikke virker at give den en værdi igennem onLoad på bodytag'et, da det så burde være "kørende" allerede før en ændring er foretaget i selectboksen.
Jeg ved nu ikke om jeg er helt enig med dig i, at valideringsprocessen er uhensigtsmæssig. Jeg går ud fra din mening henvender sig mod, at jeg validerer datainput på serveren fremfor hos klienten :-)
Jeg validerer altid så vidt muligt data igennem PHP (eller hvad det nu er), da jeg personligt synes bedst om dette. Dette er mere driftsikkert i min verden, da JavaScript kan deaktiveres af klienten. Jovist, så kan man selvfølgelig bare sørge for, at man ikke kan bruge formularen, hvis det er tilfældet, men så er hele den del af websitet også lagt ned og det kan jo være i en større eller mindre grad afhængig af den enkelte hjemmeside. Det er ikke et problem ved validering på serveren, da det altid vil fungere. Det kræver et reload og en lidt længere rejse for datapakken ja, men det synes jeg personligt ikke generer specielt meget. Det generer i hvert fald ikke mig - medmindre der er lange svartider fra serveren naturligvis.
At en person sjældent deaktiverer JavaScript er naturligvis rigtigt. Men det sker, da der er folk som konsekvent slår det fra, for at slippe for en masse irriterende skrammel som man desværre også kan (mis)bruge JavaScript til. Man kan selvfølgelig sagtens vælge bare at udelukke den del af potentielle kunder, da det er et fåtal, men der ønsker jeg hellere at levere en løsning, der virker for alle.
Angående hackere, så er jeg fuldstændig ligeglad med disse i denne situation. Det er hverken en form til login eller lignende med personfølsomme data bagved, så der er ikke det store mål i det for dem. Validering sker udelukkende for at sikre vi får de data igennem vi forventer og for at sørge for at holde spambots og irriterende teenagere, der keder sig på afstand.
Validering i klient eller ej, så forstår jeg nu stadig ikke helt, hvorfor det ikke virker at give den en værdi igennem onLoad på bodytag'et, da det så burde være "kørende" allerede før en ændring er foretaget i selectboksen.
Skrevet lør. d. 28. juli 2012 kl. 23:00:01| #10
olebole (216.723 point)
"Jeg validerer altid så vidt muligt data igennem PHP (eller hvad det nu er), da jeg personligt synes bedst om dette. Dette er mere driftsikkert i min verden" >> Du blander æbler og pærer =)
1) Udfra et brugervenlighedssynspunkt kan du ikke undvære validering i JavaScript.
2) Udfra et sikkerhedssynspunkt kan du ikke undvære validering i PHP.
Det er to fundamentalt forskellige ting, som ikke bør forveksles - og ikke kan erstatte hinanden. Begge dele bør være tilstede i enhver seriøs webapplikation.
Om der ligger følsomme oplysninger i den app. eller ej, bør ikke være afgørende for dine sikkerhedstiltag. Din sikkerhed i hver enkelt lille krog af din kode har afgørende betydning for hele serveren - og i værste fald hele hotellet.
Hvad det så er, der er dit egentlige problem, har jeg stadig ikke forstået. Du skriver, at den anden select 'ikke fungerer' - men hvad det betyder, ved jeg ikke =)
1) Udfra et brugervenlighedssynspunkt kan du ikke undvære validering i JavaScript.
2) Udfra et sikkerhedssynspunkt kan du ikke undvære validering i PHP.
Det er to fundamentalt forskellige ting, som ikke bør forveksles - og ikke kan erstatte hinanden. Begge dele bør være tilstede i enhver seriøs webapplikation.
Om der ligger følsomme oplysninger i den app. eller ej, bør ikke være afgørende for dine sikkerhedstiltag. Din sikkerhed i hver enkelt lille krog af din kode har afgørende betydning for hele serveren - og i værste fald hele hotellet.
Hvad det så er, der er dit egentlige problem, har jeg stadig ikke forstået. Du skriver, at den anden select 'ikke fungerer' - men hvad det betyder, ved jeg ikke =)
Skrevet søn. d. 29. juli 2012 kl. 00:14:28| #11
Ved submit, og hvis en validering ikke går igennem, så gemmes det valgte nummer ikke i den selection som skabes ud fra JS funktionen. Den nulstiller og står dermed på 0 igen.
For at man kan vælge det rigtige tal nu, skal der foretages en aktiv handling i den første selection, da onChange ellers ikke aktiveres. Den første selection gemmer sin værdi ved en falsk validering. Derfor er man nu nødt til at vælge et "forkert" tal, for derefter at gå tilbage på det rigtige tal, og herefter kan man så vælge det rigtige tal i den anden selectionboks også.
Det kan være lidt svært at forklare, men du kan teste det/se det visuelt, da jeg har lagt systemet online. http://www.dengroennefroe.dk/ (...)
Prøv at sætte "antal vinduer i alt" til 10 og "heraf antal vinduer" til 5 og klik så submit uden at udfylde andet. Du vil nu opdage, at den første selectboks du udfyldte gemmer sin værdi. Den anden nulstiller, og du kan ikke vælge 5 igen, uden at skulle vælge på ny i begge bokse. Det er ikke hensigtsmæssigt for brugeren, så det går ikke. Det er problemet lige nu.
Derfor er det som jeg ser det, nødvendigt at tilføje et "SELECTED mærke" ind på den rigtige option, så den gemmer værdien samt flette en onLoad ind, så den henter 0 - 10 ind igen automatisk.
For at man kan vælge det rigtige tal nu, skal der foretages en aktiv handling i den første selection, da onChange ellers ikke aktiveres. Den første selection gemmer sin værdi ved en falsk validering. Derfor er man nu nødt til at vælge et "forkert" tal, for derefter at gå tilbage på det rigtige tal, og herefter kan man så vælge det rigtige tal i den anden selectionboks også.
Det kan være lidt svært at forklare, men du kan teste det/se det visuelt, da jeg har lagt systemet online. http://www.dengroennefroe.dk/ (...)
Prøv at sætte "antal vinduer i alt" til 10 og "heraf antal vinduer" til 5 og klik så submit uden at udfylde andet. Du vil nu opdage, at den første selectboks du udfyldte gemmer sin værdi. Den anden nulstiller, og du kan ikke vælge 5 igen, uden at skulle vælge på ny i begge bokse. Det er ikke hensigtsmæssigt for brugeren, så det går ikke. Det er problemet lige nu.
Derfor er det som jeg ser det, nødvendigt at tilføje et "SELECTED mærke" ind på den rigtige option, så den gemmer værdien samt flette en onLoad ind, så den henter 0 - 10 ind igen automatisk.
Skrevet søn. d. 29. juli 2012 kl. 02:41:41| #12
mireigi (20.117 point)
Det problem kan løses på flere måder:
Jeg er mest tilhænger af den sidste.
Vil du slippe for javascriptet, kan du lave det i den bagvedliggende kode (PHP?) i stedet for.
<body onload="selectNumber(null)">
<script type="text/javascript">
selectNumber(null);
</script>
</body>
<script type="text/javascript">
window.onload += function(){ selectNumber(null); };
</script>
</head>
Jeg er mest tilhænger af den sidste.
Vil du slippe for javascriptet, kan du lave det i den bagvedliggende kode (PHP?) i stedet for.
Skrevet søn. d. 29. juli 2012 kl. 05:22:23| #13
olebole (216.723 point)
#11: Jamen, det er jo et ikke-problem. Valider med JavaScript og med PHP. Hvis det er en fejl, fanger du den med JS - og der submittes ikke.
Hvis det ikke er en fejl, men én der bevidst prøver at lave noget, han ikke burde, er der ingen grund til at tage hensyn til ham. Du fanger handlingen med PHP, og han kan passende begynde fra start.
Hvis der er tale om en fejl, er der ingen grund til at spilde brugerens tid med at skulle en tur forbi serveren. Det old-school 90'er tilgang.
@mireigi: Er der en speciel grund til, at du foretrækker den sidste version - udover, at den i hvertfald ingen skade gør? =)
Hvis det ikke er en fejl, men én der bevidst prøver at lave noget, han ikke burde, er der ingen grund til at tage hensyn til ham. Du fanger handlingen med PHP, og han kan passende begynde fra start.
Hvis der er tale om en fejl, er der ingen grund til at spilde brugerens tid med at skulle en tur forbi serveren. Det old-school 90'er tilgang.
@mireigi: Er der en speciel grund til, at du foretrækker den sidste version - udover, at den i hvertfald ingen skade gør? =)
Skrevet søn. d. 29. juli 2012 kl. 15:53:11| #14
Jeg har taget det til efterretning og lavet en JavaScript-validering foran PHP-kontrollen på hele formen, så der ikke foretages en unødvendig submit, som også giver andre problemer (dem tidligere nævnt) ..
Det vil sige, at det hele fungerer som det skal nu.
Tak for hjælpen!
olebole smid et svar. Du gav et eksempel, der relativt simpelt kunne bygges om og dermed fungere i mit system.
mireigi du kan også bare smide et svar. Din løsning fungerer ikke umiddelbart til det jeg efterspørger, men du har stadig brugt lidt tid på at forsøge at hjælpe :-)
Fortsat god weekend :o)
Det vil sige, at det hele fungerer som det skal nu.
Tak for hjælpen!
olebole smid et svar. Du gav et eksempel, der relativt simpelt kunne bygges om og dermed fungere i mit system.
mireigi du kan også bare smide et svar. Din løsning fungerer ikke umiddelbart til det jeg efterspørger, men du har stadig brugt lidt tid på at forsøge at hjælpe :-)
Fortsat god weekend :o)
Skrevet søn. d. 29. juli 2012 kl. 16:10:31| #15
olebole (216.723 point)
Det lyder fornuftigt. Så har du formodenlig også haft tid til at tænke argumentationen mod en JS-validering fra #9 igennem og set, at den ikke holder en halv dråbe vand *o)
Ellers tak, jeg samler som bekendt ikke point =)
Ellers tak, jeg samler som bekendt ikke point =)
Skrevet søn. d. 29. juli 2012 kl. 16:14:27| #16
olebole (216.723 point)
- og hvad events angår, så er den rigtige måde at sætte en event på, at bruge addEventListener eller attachEvent (afhængig af browser) - og så fjerne den igen, når den ikke længere skal bruges. Det kan f.eks. gøres med dette X-browser objekt:
- og det anvendes som følger:
var evnt = (function(){
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
- og det anvendes som følger:
function init() {
// Gør en hel masse her
// - når dokumentet er loaded
evnt.rem(window, "load", init);
}
evnt.add(window, "load", init);
// Gør en hel masse her
// - når dokumentet er loaded
evnt.rem(window, "load", init);
}
evnt.add(window, "load", init);
Skrevet søn. d. 29. juli 2012 kl. 16:53:05| #17
Nu er det ikke just JavaScript jeg roder mest med, så har lidt svært ved at gennemskue, hvordan dit eksempel fungerer og hvordan jeg bør benytte det.
Men altså det du egentlig siger er, at jeg først bør hente/køre diverse funktioner, når de rent faktisk skal bruges?
Altså eksempelvis valideringen. Den skal først køres ved et klik på submit. Derved kan man med addEventListener skrive ind, det skal ske ved click, den funktion det drejer sig om og så en boolean. Eller hvad?
Og hvilken fordel giver det? Hurtigere ydelse? Til gengæld er der meget af det som ikke er cross-browser pålideligt. Hvorfor du nok også kombinere to anvendelsesmuligheder?
Men altså det du egentlig siger er, at jeg først bør hente/køre diverse funktioner, når de rent faktisk skal bruges?
Altså eksempelvis valideringen. Den skal først køres ved et klik på submit. Derved kan man med addEventListener skrive ind, det skal ske ved click, den funktion det drejer sig om og så en boolean. Eller hvad?
Og hvilken fordel giver det? Hurtigere ydelse? Til gengæld er der meget af det som ikke er cross-browser pålideligt. Hvorfor du nok også kombinere to anvendelsesmuligheder?
Skrevet søn. d. 29. juli 2012 kl. 17:25:45| #18
olebole (216.723 point)
Nu var event-handler-objektet mest ment i forhold til mireigi's forsøg på at sætte en onload handler ... ikke mindst hans ikke-fungerende 'favoritversion' (nummer tre) =)
Spekulationer om, hvorvidt man overhovedet bør bruge JS til at validere med, når det teoretisk kan slås fra, er næppe heller aktuelle ved en applikation, hvis virkemåde afhænger af, at JS er slået til *o)
Du har ret i, at der stadig er forskelle mellem browsernes JS-implementeringer, men de er efterhånden *meget* små - og langt mindre end forskellene mellem HTML- og CSS-fortolkningerne.
Hvis du gør som følger, virker det i alle gængse browsere - og meget langt tilbage:
Spekulationer om, hvorvidt man overhovedet bør bruge JS til at validere med, når det teoretisk kan slås fra, er næppe heller aktuelle ved en applikation, hvis virkemåde afhænger af, at JS er slået til *o)
Du har ret i, at der stadig er forskelle mellem browsernes JS-implementeringer, men de er efterhånden *meget* små - og langt mindre end forskellene mellem HTML- og CSS-fortolkningerne.
Hvis du gør som følger, virker det i alle gængse browsere - og meget langt tilbage:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var evnt = (function(){
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
function validate(e) {
var bKill = false;
if (this.navn.value==="") {
alert("Du skal skrive dit navn.");
this.navn.focus();
bKill = true;
}
else if (this.phone.value==="") {
alert("Du skal skrive dit telefonnummer.");
this.phone.focus();
bKill = true;
}
if (bKill) {
if (e) e.preventDefault();
else event.returnValue = false;
return;
}
evnt.rem(this, "submit", validate);
}
function init() {
var elmFrm = document.getElementById("minForm");
evnt.add(elmFrm, "submit", validate);
evnt.rem(window, "load", init);
}
evnt.add(window, "load", init);
</script>
</head>
<body>
<form id="minForm" action="">
<p><label>Navn: <input name="navn" type="text"></label></p>
<p><label>Telefon: <input name="phone" type="text"></label></p>
<p><button type="submit">Send</button></p>
</form>
</body>
</html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
var evnt = (function(){
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
function validate(e) {
var bKill = false;
if (this.navn.value==="") {
alert("Du skal skrive dit navn.");
this.navn.focus();
bKill = true;
}
else if (this.phone.value==="") {
alert("Du skal skrive dit telefonnummer.");
this.phone.focus();
bKill = true;
}
if (bKill) {
if (e) e.preventDefault();
else event.returnValue = false;
return;
}
evnt.rem(this, "submit", validate);
}
function init() {
var elmFrm = document.getElementById("minForm");
evnt.add(elmFrm, "submit", validate);
evnt.rem(window, "load", init);
}
evnt.add(window, "load", init);
</script>
</head>
<body>
<form id="minForm" action="">
<p><label>Navn: <input name="navn" type="text"></label></p>
<p><label>Telefon: <input name="phone" type="text"></label></p>
<p><button type="submit">Send</button></p>
</form>
</body>
</html>
Skrevet søn. d. 29. juli 2012 kl. 17:59:18| #19
olebole (216.723 point)
Lige en forklaring af denne konstruktion:
Alle browsere, untagen IE, understøtter ELEMENT.addEventListener. Da variablen evnt sættes til en 'selvafviklende' funktion (parenteserne efter function statement'et gør, at funktionen afvikles, når den læses), vil variablen se sådan ud i alle ikke-IE browsere:
- og sådan, hvis browseren er en IE:
Det betyder, jeg kun bruger kræfter på at spørge til, hvad browseren understøtter, én gang. Derfra indeholder objektet de to metoder, som er 'skræddersyet' til browseren.
Hvis du skriver:
- så fyres kun den ene funktion (init) af på onload. I den funktion må du så foretage alle de andre funktionskald, der måtte skulle udføres på onload.
Når du bruger de to browserspecifikke metoder, tilføjer du hver handler funktion til en liste. Når event'en fyres af, bladres denne liste igennem og alle handlerne kaldes på stribe.
Du kan som eksempel prøve denne:
- og derefter denne:
var evnt = (function(){
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
Alle browsere, untagen IE, understøtter ELEMENT.addEventListener. Da variablen evnt sættes til en 'selvafviklende' funktion (parenteserne efter function statement'et gør, at funktionen afvikles, når den læses), vil variablen se sådan ud i alle ikke-IE browsere:
var evnt = {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
}
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
}
- og sådan, hvis browseren er en IE:
var evnt = {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
Det betyder, jeg kun bruger kræfter på at spørge til, hvad browseren understøtter, én gang. Derfra indeholder objektet de to metoder, som er 'skræddersyet' til browseren.
Hvis du skriver:
window.onload = init;
- så fyres kun den ene funktion (init) af på onload. I den funktion må du så foretage alle de andre funktionskald, der måtte skulle udføres på onload.
Når du bruger de to browserspecifikke metoder, tilføjer du hver handler funktion til en liste. Når event'en fyres af, bladres denne liste igennem og alle handlerne kaldes på stribe.
Du kan som eksempel prøve denne:
<script type="text/javascript">
function foo() {
alert("Foo");
}
function bar() {
alert("Bar");
}
window.onload = foo;
window.onload = bar;
</script>
function foo() {
alert("Foo");
}
function bar() {
alert("Bar");
}
window.onload = foo;
window.onload = bar;
</script>
- og derefter denne:
<script type="text/javascript">
var evnt = (function(){
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
function foo() {
alert("Foo");
}
function bar() {
alert("Bar");
}
evnt.add(window, "load", foo);
evnt.add(window, "load", bar);
</script>
var evnt = (function(){
if (window.addEventListener) return {
add: function(obj, sType, fn) {
obj.addEventListener(sType, fn, false);
},
rem: function(obj, sType, fn) {
obj.removeEventListener(sType, fn, false);
}
};
return {
add: function(obj, sType, fn) {
obj.attachEvent("on"+sType, fn);
},
rem: function(obj, sType, fn) {
obj.detachEvent("on"+sType, fn);
}
}
})();
function foo() {
alert("Foo");
}
function bar() {
alert("Bar");
}
evnt.add(window, "load", foo);
evnt.add(window, "load", bar);
</script>
Skrevet søn. d. 29. juli 2012 kl. 22:02:13| #20
Accepteret svar!50 point tildelt
mireigi (20.117 point)
@olebole:[b] Jeg foretrækker den sidste fordi jeg så undgår to ting:
1. Clutter i body-tagget, hvis flere functions skal afvikles onload.
2. Usikkerhed om, hvorvidt andre functions er startet. Nogle startes, hvor de er indsat på siden, andre først ved onload.
Jeg må dog lige huske at skrive din eventlistener ned. Kan aldrig huske den :)
[b]@webweaver: Bare giv mig 10- point og tag resten selv. Vil ikke tage det hele, når olebole har været primære bidrager til løsningen.
1. Clutter i body-tagget, hvis flere functions skal afvikles onload.
2. Usikkerhed om, hvorvidt andre functions er startet. Nogle startes, hvor de er indsat på siden, andre først ved onload.
Jeg må dog lige huske at skrive din eventlistener ned. Kan aldrig huske den :)
[b]@webweaver: Bare giv mig 10- point og tag resten selv. Vil ikke tage det hele, når olebole har været primære bidrager til løsningen.
Skrevet søn. d. 29. juli 2012 kl. 22:52:26| #21
Accepteret svar!50 point tildelt
Du får lidt ekstra udover de 10 point. Jeg kan godt undvære dem :o)
#olebole, jeg kigger nærmere på din forklaring og dine eksempler, så snart jeg får tid :)
#olebole, jeg kigger nærmere på din forklaring og dine eksempler, så snart jeg får tid :)
Skrevet man. d. 30. juli 2012 kl. 04:29:13| #22
olebole (216.723 point)
#20: Min pointe tidligere var, at den tredie ikke fungerer. I stedet skal du ud i noget i stil med:
<script type="text/javascript">
var oEvntWinLoad = window.onload;
if (typeof oEvntWinLoad==="function") {
window.onload = function() {
oEvntWinLoad();
selectNumber(null);
}
} else {
window.onload = function(){ selectNumber(null); };
}
</script>
- men det er langt mere effektivt at bruge 'rigtige' event listeners.
Desuden har det den fordel (hvis man undgår at pakke ind i anonyme funktioner), at keyword'et this - som det skal - peger på target elementet indenfor handleren.
Det betyder ikke så meget, når eventen stammer fra Window objektet, men det er vigtigt ved alle andre event targets
<script type="text/javascript">
var oEvntWinLoad = window.onload;
if (typeof oEvntWinLoad==="function") {
window.onload = function() {
oEvntWinLoad();
selectNumber(null);
}
} else {
window.onload = function(){ selectNumber(null); };
}
</script>
- men det er langt mere effektivt at bruge 'rigtige' event listeners.
Desuden har det den fordel (hvis man undgår at pakke ind i anonyme funktioner), at keyword'et this - som det skal - peger på target elementet indenfor handleren.
Det betyder ikke så meget, når eventen stammer fra Window objektet, men det er vigtigt ved alle andre event targets
Skrevet man. d. 30. juli 2012 kl. 04:30:19| #23
olebole (216.723 point)
<script type="text/javascript">
var oEvntWinLoad = window.onload;
if (typeof oEvntWinLoad==="function") {
window.onload = function() {
oEvntWinLoad();
selectNumber(null);
}
} else {
window.onload = function(){ selectNumber(null); };
}
</script>
... sådan! =)
Skrevet man. d. 30. juli 2012 kl. 12:53:20| #24
mireigi (20.117 point)
@olebole: Så lærte jeg jo noget nyt i dag også :)
Men hvad er den egentlige årsag til at det ikke virker? Jeg kan fint få det til at virke, også med flere functions i onload - så det må vel være noget cross-browser halløj?
Og er
Ikke det samme som du gør?
Er onload == null, tilføjes den nye function
Er onload != null, tilføjes den nye function til sidst i rækken af scripts.
Eller har jeg helt misforstået += i brug ved functions?
Men hvad er den egentlige årsag til at det ikke virker? Jeg kan fint få det til at virke, også med flere functions i onload - så det må vel være noget cross-browser halløj?
Og er
windows.onload +=...;
Ikke det samme som du gør?
Er onload == null, tilføjes den nye function
Er onload != null, tilføjes den nye function til sidst i rækken af scripts.
Eller har jeg helt misforstået += i brug ved functions?
Skrevet man. d. 30. juli 2012 kl. 14:48:23| #25
olebole (216.723 point)
Nej, det er noget fundamentalt andet. Det giver set fra et programmatisk synspunkt absolut ikke mening at bruge '+' i den sammenhæng.
Nej, det har intet med 'X-browser halløj' at gøre. Undskyld mig, men der er tale om helt åbenlyst 'kodevrøvl', som ikke må kunne fungere i nogen somhelst browser. Operatoren '+' kan henholdsvis konkatenere strenge og addere tal - men den giver ingen mening i forbindelse med strenge.
Jeg er 100% sikker på, du husker forkert, hvis du mener at have set det virke =)
Nej, det har intet med 'X-browser halløj' at gøre. Undskyld mig, men der er tale om helt åbenlyst 'kodevrøvl', som ikke må kunne fungere i nogen somhelst browser. Operatoren '+' kan henholdsvis konkatenere strenge og addere tal - men den giver ingen mening i forbindelse med strenge.
Jeg er 100% sikker på, du husker forkert, hvis du mener at have set det virke =)
Skrevet man. d. 30. juli 2012 kl. 14:49:47| #26
olebole (216.723 point)
- men da jeg også er vild med at lære, må du på den anden side meget gerne vise mig et eksempel på, at du kan få det til at fungere =)
Skrevet man. d. 30. juli 2012 kl. 23:01:32| #27
mireigi (20.117 point)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
<title>Untitled Page</title>
<script type="text/javascript">
window.onload += new function () { alert("Hej"); };
</script>
</head>
<body>
</body>
</html>
Det virker ganske fint hos mig i nyeste version af FireFox. Det skal dog lige siges, at uden new keywordet, virker det ikke.
Skrevet man. d. 30. juli 2012 kl. 23:14:35| #28
olebole (216.723 point)
Så er det lettere bare at skrive:
- og resultatet er præcis det samme. Alert'en fyres af i det øjeblik, browseren læser den pågældende linje =)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ (...)
<html xmlns="http://www.w3.org/ (...)
<head>
<title>Untitled Page</title>
<script type="text/javascript">
alert("Hej");
</script>
</head>
<body>
</body>
</html>
<html xmlns="http://www.w3.org/ (...)
<head>
<title>Untitled Page</title>
<script type="text/javascript">
alert("Hej");
</script>
</head>
<body>
</body>
</html>
- og resultatet er præcis det samme. Alert'en fyres af i det øjeblik, browseren læser den pågældende linje =)
Skrevet man. d. 30. juli 2012 kl. 23:39:20| #29
mireigi (20.117 point)
Ah ja, det er selvfølgelig derfor det fungerer :)
Fik lige læst lidt op på det imens.
Sådan går det når alt er selvlært og man drager konklusioner ud fra egne erfaringer :)
Fik lige læst lidt op på det imens.
Sådan går det når alt er selvlært og man drager konklusioner ud fra egne erfaringer :)
Skrevet tir. d. 31. juli 2012 kl. 00:34:00| #30
olebole (216.723 point)
Din erfaring holdt jo godt nok ... men tolkningen var knap så heldig =)
Den gamle kvantefysiker Werner Heisenberg sagde engang de kloge ord:
"Det, vi oplever, er ikke naturen - men naturen, udsat for vores måde at spørge på"
Når det det glimter i lille Theofiles Flyvehans's ble, er det måske ikke besøget hos nummerologen, som udmønter sig i, at han nu skider guld. Det kunne også bare være, fordi han har forædt sig i en æske af farfars messingstifter *D
Den gamle kvantefysiker Werner Heisenberg sagde engang de kloge ord:
"Det, vi oplever, er ikke naturen - men naturen, udsat for vores måde at spørge på"
Når det det glimter i lille Theofiles Flyvehans's ble, er det måske ikke besøget hos nummerologen, som udmønter sig i, at han nu skider guld. Det kunne også bare være, fordi han har forædt sig i en æske af farfars messingstifter *D
Log ind
Seneste spørgsmål
Første ID er tom ?
Oprettet den 11. maj 2013 kl. 11.54
ingeman giver 200 point for svar | Giv et svar »
alert box frem hvis der intet indhold er på siden
Oprettet den 8. maj 2013 kl. 19.43
tobrukDk giver 60 point for svar | Giv et svar »
Seneste guides
Seneste nyheder
Tips & Tricks fra PC World
Her er seks Google Labs-funktioner, som du skal slå til med det samme
Gmail Labs giver dig adgang til en masse smarte funktioner, som Googles ingeniører leger med i øjeblikket.
Anmeldelser fra PC World
Test: Samsung Galaxy S4 er et hit - trods gøglertricks
Kan Samsung beholde førertrøjen i det store Android-race? Galaxy S4 er smækfyldt med innovative funktioner, men også med en del gøgl. Er det for meget? Få vores dom over Samsungs nye topmodel.
Seneste blogindlæg
Tvangslukke spørgsmål: Hvad er den bedste løsning?
Hej Vi har mange åbne spørgsmål på Eksperten. Vi ville gerne tvangslukke dem - så et spørgsmål efter f.eks. 6 måneder lukkes. Men der er et par uklarheder som ville være gode at få lidt input til:...
Nyheder fra PC World
Tre smarte trick som gør Windows 8 bedre
Boot direkte til skrivebordet, få en strategisk godt placeret luk-knap og slip for at logge ind. Her er tre tips til Windows 8, som gør det nemmere at blive venner med styresystemet.
Nyheder fra Computerworld
Galleri: Her er Googles nyeste værktøj og legetøj
Google har i denne uge afholdt udviklerkonferencen I/O i San Francisco. Se her hvad søgegiganten kunne præsentere af nyskabelser.
IT Kurser
Samarbejdspartnere
Udgiver · © 2013 IDG Danmark A/S · Hørkær 18 · 2730 Herlev · Tlf.: 77 300 300 · Fax: 77 300 301 · Brug af personoplysninger