Avatar billede kristianrnielsen Juniormester
23. august 2017 - 15:40 Der er 23 kommentarer

Toggler virker ikke (med det samme)

Kære Eksperter,

Jeg har et script, hvor brugeren via en checkbox, kan få indholdet ind i et textarea (i en anden frame). Dette virker fint.

Scriptet har så en "toggler", som trigger samtlige checkboxes i en given gruppe. Checkboxene bliver alle tjekket/aftjekket som de skal, men, indholdet følger ikke med - ikke med det samme, i hvert fald.

Men fjerner jeg en af tjekboksene, så kommer indholdet fra de  resterende boxe ind i textareaet som ønsket. Jeg kan derefter gen-tjekke den aftjekkede box, og så er alt indholdet der som det skal. Dette er dog et super irriterende workaround, da jeg selvfølgelig gerne vil have alt indholdet bliver pushet, lige så snart jeg aktivere toggleren.

Er der en fejl i en af de to følgende koder, eller kan dele af dem erstattes af en anden funktion, som pusher alt indholdet, uden at jeg skal af/gen-tjekke en af boxene efterfølgende?

Toggler script:

<script type='text/javascript'>//<![CDATA[

$(document).ready(function(){
    $(".toggler").click(function(e){
        e.preventDefault();
        $('.cat'+$(this).attr('data-prod-cat')).toggle();
    });
});
//]]>

</script>


"Push"-script:

<script type="text/javascript">
function updatebox()
{
    var textbox = parent.document.getElementById("textarea_navn");
    var values = [];
        if(document.getElementById('box_id').checked) {
        values.push(document.getElementById('box_id').value);
    }
</script>

En hver hjælp vil blive utroligt værdsat! :)

Alle de bedste ønsker,
Kristian Nielsen
Avatar billede keysersoze Guru
23. august 2017 - 16:07 #1
toggle mener jeg da plejer at betyde vis/skjul og ikke check/uncheck?

Medmindre du har forkortet koden for at vise os eksempler så er noget af koden ret "dum" og dermed unødigt tung - i din updatebox laver du en variabel, textbox, som du aldrig benytter og potentielt leder du to gange efter det præcis samme element, box_id, i stedet for at lægge dén i en variabel og så genbruge den. Jeg forstår heller ikke helt hvad dit array i updatebox gør godt for.

Bortset fra det så er mit gæt, at der ikke køres de events du forventer - fx bliver en onclick ikke kørt hvis du ændrer en værdi via JS så sørg for at opsætte koden så du sender/lytter de rette events.
Avatar billede olsensweb.dk Ekspert
23. august 2017 - 17:40 #2
ref google jquery toggle checkbox state
https://stackoverflow.com/questions/4177159/toggle-checkboxes-on-off
https://stackoverflow.com/questions/1467228/click-toggle-with-jquery

du skal bruge
http://api.jquery.com/attr/
eller
http://api.jquery.com/prop/

ellers må du anvende dit dev tools i din browser (F12), for at se hvor det går galt
Avatar billede kristianrnielsen Juniormester
23. august 2017 - 17:48 #3
Hov, det er mig som har kopieret den helt forkerte del af scriptet - det er naturligvis ikke toggleren jeg skal bruge, men følgende:

Trigger-boxen:

<input type="checkbox" id="ckbCheckAll26" style="width: 20px; height: 20px;">

Og selve scriptet:

<script type='text/javascript'>//<![CDATA[

$(document).ready(function () {
    $("#ckbCheckAll26").click(function () {
        $(".checkBoxClass26").prop('checked', $(this).prop('checked'));
    });
   
    $(".checkBoxClass26").change(function(){
        if (!$(this).prop("checked")){
            $("#ckbCheckAll26").prop("checked",false);
        }
    });
});

</script>

Jeg beklager mange gange at jeg har fået dem mixet. Jeg håber spørgsmålet/koden giver mere mening nu.
Avatar billede keysersoze Guru
23. august 2017 - 18:33 #4
Benyt .change() efter du har sat prop.
Avatar billede kristianrnielsen Juniormester
23. august 2017 - 18:35 #5
Hej keysersoze, kan jeg få dig til at komme med et eksempel? Jeg er ikke særlig stærk i javascript, så ville værdsætte meget hvis du kunne vise mig hvor det skal puttes ind :)
Avatar billede keysersoze Guru
23. august 2017 - 18:38 #6
$(".checkBoxClass26").prop('checked', $(this).prop('checked')).change();
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 11:31 #7
Hvis jeg bruger følgende script:

Vælg alle:

<script type='text/javascript'>//<![CDATA[

$(document).ready(function () {
    $("#ckbCheckAll33").click(function () {
        $(".checkBoxClass33").prop('checked', $(this).prop('checked')).change();
    });
   
    $(".checkBoxClass33").change(function(){
        if (!$(this).prop("checked")){
            $("#ckbCheckAll33").prop("checked",false).change();
        }
    });
});

</script>


Push til textarea:

  <script type="text/javascript">
function updatebox()
{
    var textbox = parent.document.getElementById("tags_1");
    var values = [];

        if(document.getElementById('cb2687').checked) {
        values.push(document.getElementById('cb2687').value);
    }

        if(document.getElementById('cb404').checked) {
        values.push(document.getElementById('cb404').value);
</script>

Er problemet det samme, med at jeg skal un-checke en af boxene, før resten bliver smidt ind. Kan det være en del af updatebox() der gør, at det ikke sker med det samme?

Mange tak for tiden! :)
Avatar billede keysersoze Guru
24. august 2017 - 11:55 #8
Der er ikke noget i din kode, der kalder updatebox - og der er heller ikke noget i din kode, der indsætter nogen værdier nogen steder (ud over i et array, som heller ikke bruges til noget). Ud fra den kode du giver er det umuligt at gætte sig til noget.
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 12:08 #9
Jeg beklager hvis koden er noget rod - jeg er som sagt ikke super stærk i dette her.

Det er muligvis nemmere at se koden i aktion (hvis du bruger "Vis kilde") på følgende:

http://promochoons.com/clients/addressbook.php?board=9&campaign=243

Den kode er i en iframe, som så pusher mailadresserne hen til en textbox i "parent"-vinduet. Textboxen ser ud som følger:

<textarea name="mails" rows="15" id="tags_1" style="height: 600px; width: 350px;">
</textarea>

Som sagt, hvis jeg bruger "check-all" funktionen, sker der intet - men hvis jeg så un-checker "Name 1", så bliver 2, 3 og 4 tilføjet fuldstændig efter hensigten - der skal bare lige ske en eller anden form for trigger funktion.

Jeg håber det gør det mere overskueligt - hvis det er helt ude i skoven, må jeg prøve at nørde videre selv - men værdsætter den tid I har lagt i jeres hjælp! :)
Avatar billede keysersoze Guru
24. august 2017 - 12:50 #10
Siden er tom?
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 13:06 #11
Beklager - skulle lige have slået noget sikkerhed fra - prøv igen :)
Avatar billede keysersoze Guru
24. august 2017 - 13:17 #12
Først og fremmest så kig i din developer toolbar og vær sikker på at der ikke logges fejl her. Så længe der er fejl kan du ikke forvente at koden gør hvad du forventer. http://www.soze.dk/miniblog/bliv-en-hurtigere-webudvikler-med-browservaerktoejer/

Dernæst, som skrevet i #1, så vær sikker på hvilke events du kører kontra hvad du forventer/lytter på. Du har sat updatebox til at blive kørt på onclick men du ændrer jo bare en property. Det vil nok give mere mening at lytte på onchange.
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 13:21 #13
Det prøver jeg - mange tak :)

Det som undre mig er bare, at det som sådan virker, så længe der er en af dem som bliver tjekket af. Alle boxe bliver markeret som de skal, men først når en checkes af, kommer de resterende ind i textareaet.

Så overvejede om det bare var en af kommandoerne som skulle byttes ud med noget andet.

Men jeg giver det et shot med browserværktøjerne - mange tak for din tid (og ikke mindst tålmodighed :) )
Avatar billede keysersoze Guru
24. august 2017 - 13:32 #14
Igen pga events - hvis du klikker på en checkbox køres din updatebox fordi det er en onclick-event, som du jo lytter på, men når du opdaterer propertien via JavaScript køres eventen ikke da der jo ikke sker et klik. Til gengæld sker der en change i begge tilfælde så hvis du lytter på onchange i stedet vil det virke.

Det vil dog næppe være hensigtsmæssigt bare at skifte onclick ud med onchange for så køres updatebox lige så mange gange som der er checkboxe - det kunne derfor i stedet måske give mening bare at kalde updatebox direkte fra din checkall funktion.
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 13:52 #15
Altså bare køre oncheck="updatebox()" istedet for onclick="updatebox()" i checkboxene?
Avatar billede keysersoze Guru
24. august 2017 - 14:02 #16
Tror ikke der er noget der hedder oncheck?
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 14:05 #17
Jeg har ingen anelse, for at være ærlig. Det var bare ift "Til gengæld sker der en change i begge tilfælde så hvis du lytter på onchange i stedet vil det virke." - vidst ikke om onclick skulle skiftes ud med onchange.

Er primært PHP programmør, så det er semi sort kode for mig.
Avatar billede keysersoze Guru
24. august 2017 - 14:18 #18
Der er også forskel på onchange og som du skrev oncheck.

Som skrevet i #14, hvis du bare udskifter onclick med onchange vil din kode blive kørt lige så mange gange som der er antal checkboxe - ikke videre hensigtsmæssigt. Derfor foreslog jeg at du bare kaldte updatebox i din checkall-funktion.
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 15:20 #19
Ah, det er nok mig som har læst for hurtigt :)

Hvordan ville det kald skulle implementeres i checkall, eksempelvis i følgende?

<script type='text/javascript'>//<![CDATA[

$(document).ready(function () {
    $("#ckbCheckAll151").click(function () {
        $(".checkBoxClass151").prop('checked', $(this).prop('checked')).change();
    });
   
    $(".checkBoxClass151").change(function(){
        if (!$(this).prop("checked")){
            $("#ckbCheckAll151").prop("checked",false).change();
        }
    });
});

</script>
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 15:31 #20
onclick og onchange fungerer umiddelbart ens - stadig det samme med, at en af boksene lige skal klikkes inden resten følger med.
Avatar billede keysersoze Guru
24. august 2017 - 17:24 #21
Kald

updatebox();

hvor der er behov for den.

Hvis du er i tvivl om hvad din kode overhovedet gør så indsæt

console.log('something');

rundt omkring og følg med i hvad din kode gør og ikke gør via developer toolbaren.
Avatar billede kristianrnielsen Juniormester
24. august 2017 - 17:31 #22
Så eksempelvis

<script type='text/javascript'>//<![CDATA[

$(document).ready(function () {
    $("#ckbCheckAll151").click(function () {
        $(".checkBoxClass151").prop('checked', $(this).prop('checked')).change();
    });
 
    $(".checkBoxClass151").change(function(){
        if (!$(this).prop("checked")){
            $("#ckbCheckAll151").prop("checked",false).change();
        }
    });
updatebox();
});

Eller er jeg helt skævt på den?
</script>
Avatar billede keysersoze Guru
24. august 2017 - 17:37 #23
Hvis du debugger, eksempelvis som jeg foreslog, så ville du kunne se hvornår hvilke funktioner kørte. Men nej, lige nu kalder du updatebox på page load og ikke på klik på checkall.
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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