Avatar billede BTEngineer Novice
10. september 2015 - 14:24 Der 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>

<select name="afdeling" id="afdeling" onchange="fetch_select_undercategory(this.value);" onfocus="fetch_select_undercategory(this.value);">
</select>

<select name="underafdeling" id="underafdeling" class="underafdeling" onchange="fetch_select_area(this.value);"></select>

<select name="area" id="area" class="area"></select>

Det script jeg har skrevet som kører dette er:
<script type="text/javascript">

function fetch_select(val) {
  $.ajax({
    type: 'POST',
    url: 'script.php',
    data: {
      'get_option': val,
        'get_session': '<?php echo $login_session; ?>'
    },
    success: function (response) {
      document.getElementById("afdeling").innerHTML=response;
    }
   

  });
}

function fetch_select_undercategory(val) {
  $.ajax({
    type: 'post',
    url: 'anmeld-script.php',
    data: {
      undercategory:val
    },
    success: function (response) {
      document.getElementById("underafdeling").innerHTML=response;
    }
  });
}

function fetch_select_area(val) {
  $.ajax({
    type: 'post',
    url: 'anmeld-script.php',
    data: {
      area:val
    },
    success: function (response) {
      document.getElementById("area").innerHTML=response;
    }
  });
}

$(document).ready(function(){
    $(".type").change(function(){
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="sygehus"){
                $(".area").hide();
            } else {
                $(".area").show();
            }
        });
    }).change();
});

</script>

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:

<option value='<?php echo $vis['afdeling']; ?>' <?php if($vis['afdeling'] == $vis_info['valgafdeling']) { echo "selected"; } ?> ><?php echo $vis['afdeling'];?></option>

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?

Håber der er nogen der kan hjælpe!

Mvh
Henrik
Avatar billede keysersoze Guru
10. september 2015 - 14:45 #1
Når du preselecter på serveren kan du vel også bare preudfylde på serveren? Hvis ikke så kør din fetch på $(document).ready(function () { fetch... });
Avatar billede BTEngineer Novice
10. september 2015 - 14:59 #2
Så stærk er jeg heller ikke i javascript/jquery.. Jeg er primært php-mand :)

Så jeg er ikke helt sikker på hvad du mener..
Avatar billede BTEngineer Novice
10. september 2015 - 18:14 #3
Fisker lidt efter at du måske har et eksempel, eller uddybende forklaring? :)
Avatar billede keysersoze Guru
10. september 2015 - 18:54 #4
Den første den med at gøre det på serveren gætter jeg på at du selv kan og det var måden jeg ville foretrække at gøre det på.

Ellers er det, selvom koden næsten allerede er givet i min kommentar, vel noget a la

$(document).ready(function () {
  fetch_select($('input[name="type"]').val());
});
Avatar billede BTEngineer Novice
11. september 2015 - 08:11 #5
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.

Kan du følge mig? :)

Den kode virker ikke.
Avatar billede BTEngineer Novice
11. september 2015 - 08:15 #6
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.

Håber stadig du kan hjælpe- og tak so fare :)
Avatar billede keysersoze Guru
11. september 2015 - 09:04 #7
Billederne siger mig ikke meget - du må lægge det online.
Avatar billede BTEngineer Novice
11. september 2015 - 09:27 #8
Okay du får adgang her:

http://expirebox.com/download/15829a796094065fd56fcdc56f8f312c.html

Der kan du hente en rtf fil, hvor info står i. :)
Avatar billede BTEngineer Novice
11. september 2015 - 17:29 #9
Nogle idéer? :)
Avatar billede keysersoze Guru
11. september 2015 - 18:20 #10
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.
Avatar billede BTEngineer Novice
11. september 2015 - 19:00 #11
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)

if(isset($_POST['get_option'])) {
   
    while ($vis = $hent->fetch(PDO::FETCH_ASSOC)) {
    ?>
      <option value='<?php echo $vis['afdeling']; ?>' <?php if($vis['afdeling'] == $vis_info['kommune']) { echo "selected"; } ?> ><?php echo $vis['afdeling'];?></option>
     
    <?
    }
} exit;
    ?>

Der ser du mit første response. Jeg kan ikke se hvordan jeg skulle dele to response op..

Sætter pris på din hjælp :)
Avatar billede keysersoze Guru
12. september 2015 - 17:59 #12
Ja, jeg vil tilføje noget a la dette til din success;

var afd = document.getElementById("underafdeling");

afd.innerHTML=response;

var val = afd.value;

if (val !== '') {
  fetch_select_area(val);
}
Avatar billede BTEngineer Novice
12. september 2015 - 18:11 #13
Jeg har tilføjet det, men uden effekt:

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;

      if (val !== '') {
              fetch_select_area(val);
        }
      document.getElementById("underafdeling").innerHTML=response;
    }
  });
}
Avatar billede BTEngineer Novice
12. september 2015 - 18:15 #14
Problemet er jo stadig, at funktionen først kaldes, når onchange="fetch_select_undercategory(this.value);" på  selve <select>-inputtet.
Avatar billede keysersoze Guru
12. september 2015 - 21:11 #15
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.

Hvis du er i tvivl om hvad der er hvad i din js så udskriv nogle værdier og hjælpevariabler undervejs vha fx console.log(afd) og tag et kig i din developer toolbar - http://www.web-dev.dk/post/2012/06/17/Bliv-en-hurtigere-webudvikler-med-browserv230;rkt248;jer.aspx - for at se om alt er som det skal være.
Avatar billede BTEngineer Novice
13. september 2015 - 08:36 #16
Tusinde tak for hjælpen Kim :)

Det virker som ønsket nu med din pseudo-code, efter at jeg fik tilpasset det rigtigt.

Men ville du måske uddybe, hvordan du ville have lavet det alternativt? Blot til refleksion :-)

Smid gerne et svar til points

God søndag
Avatar billede keysersoze Guru
13. september 2015 - 21:45 #17
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.
Avatar billede Ny bruger Nybegynder

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.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester