10. september 2015 - 14:24Der er
16 kommentarer og 1 løsning
Javascript/Ajax og HTML5 - DropDown
Hej Eksperter.
Jeg er igang med et projekt, hvor jeg arbejder med en masse dropdowns.
Der er disse drop downs: <select name="type" id="type" class="type" onchange="fetch_select(this.value);"> <option value="">Vælg</option> <option value="kategori1">kategori1</option> <option value="kategori2" >kategori2</option> <option value="kategori3">kategori3</option> </select>
Script.php administerer den data der sendes og afgiver respons. Mit problem er at jeg i min script.php har gjort således, at hvis det er en bruger, som allerede har valgt en afdeling under oprettelsen, "selecter" den selv:
Det virker perfekt. Man vælger Kategori 1, og så henter den disse muligheder i næste drop down, medmindre at man har valgt en afdeling, så selector den selv. Problemet er så bare, at den ikke selv kører funktionen onchange="fetch_select_undercategory(this.value);", dvs. for at man får de næste muligheder i #underafdeling, skal man alligevel trykke og så onchange bliver aktiveret.
Hvordan gør jeg således at hvis der er en value der er selected, så kører den funktionen onchange="fetch_select_undercategory(this.value);" med den selected værdi?
Jeg preudfylder også.. Men problemet er, at selvom select-boksen er udfyldt og f.eks. "Afdeling 124" er selected, så køres function fetch_select_undercategory(val) { ikke ved onchange, fordi brugeren jo netop ikke skal udfylde "Afdeling 124", hvis de i forvejen har gjort det under der profilindstillinger.
Du kan se forskellen her http://postimg.org/gallery/1zvvc8kn6/ på at den preselecter og at man selv vælger afdeling/kommune, hvor onchange aktiveres. Når en afdeling er preselected, så kan den ikke finde ud af at aktiverer den næste funktion med den preselected's værdi.
Generelt er der mange ting jeg ville gøre anderledes - i den specifikke case ville jeg fx servere JSON i stedet for HTML i AJAX og på den måde undgå innerHTML samt beslutte mig for om jeg ville arbejde med jQuery eller med JavaScript.
Men for at tage det ud fra hvad du har nu så opdager javascripten jo aldrig en change når du bare skifter options ud med nogle andre - så 2 muligheder for at løse dette var enten i dit ene kald at returnere options til begge select såfremt afdeling var forudvalgt og dermed altså skifte options begge steder og ellers kunne du inde i din fetch-metode efter options er skiftet ud aflæse value og hvis den er forskellig fra tom så køre din anden fetch-metode.
Ja, jeg ved godt det er en kringlet måde at gøre det på måske. Men som sagt er jeg relativ ny til at kode javascript/jquery. Det er noget helt andet med PHP. Men jeg har arbejdet en smule med JSON encode/decode.
Præcis, det er problemet.. Mulighed giver meget god mening synes jeg. Men hvordan gør jeg det kodemæssigt? Du vil have tilføjet noget til følgende:
function fetch_select_undercategory(val) { $.ajax({ type: 'post', url: 'anmeld-script.php', data: { undercategory:val }, success: function (response) { document.getElementById("underafdeling").innerHTML=response; } }); }
Antager jeg.. Hvis du mener, at jeg skal returnere til begge select fra min anmeld-script.php, så tror jeg ikke det umiddelbart er muligt. Jeg kan ikke kontrollere to response.
Det første kald er her: (har undladt alle queries)
function fetch_select_undercategory(val) { $.ajax({ type: 'post', url: 'anmeld-script.php', data: { undercategory:val }, success: function (response) { var afd = document.getElementById("underafdeling"); afd.innerHTML=response; var val = afd.value;
Selvom du ikke er stærk i js så prøv stadig at læse min kode (og kommentar, hvor jeg skriver "a la" og ikke at det er en endelige løsning) - så meget er syntaksen trods alt heller ikke anderledes end PHP. Jeg har fx allerede innerHTML med så du skal ikke have den en gang til.
Du kører vel en af de der fetch-metoder for at udfylde afdeling - den fetch har en success og det er her du skal fylde min pseudo-kode ind. Det der sker er, at når innerHTML er opdateret så aflæser vi value, og er value forskellig fra tom (dvs afdeling er valgt på forhånd) så kører ved den fetch-metode, der svarer til at vi har valgt en afdeling.
Der er vel to veje at gå - egen kode eller brug af et framework/library.
Med din egen kode ville jeg benytte JSON da jeg så let kunne sende flere samlinger af data afsted og på baggrund af hvad der kom retur kunne jeg opdatere efter behov. Jeg ville også beslutte mig for om jeg skrev ren javascript eller ren jQuery.
Med et framework/library, fx Knockout eller React, ville du kunne opbygge din klientkode mere som en rigtig applikation med modeller, events osv ligesom du ville få givet færdige og let tilgængelige funktioner til trivielle tasks.
Men faktisk tror jeg også at noget af din PHP kunne opdateres - det er fx ikke normalt at man lægger navne i values på selects, her ville det som udgangspunkt være et ID.
Synes godt om
Ny brugerNybegynder
Din løsning...
Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.