bootstrap button.js en php variable

[Thuurke]

Hallo,

Ik ben aan het proberen om mooie bootstrap buttons te gebruiken voor checkboxen en radioboxen via button.js http://getbootstrap.com/javascript/#buttons. Ze worden nu ook netjes getoond. Nu is echter de vraag hoe ik de checked-status van de knoppen koppel aan een php variabele.

Bv variabele $switchstatus = on dat dan de actieve state van die knop ook zo staat. Voor php is dit uiteraard mogelijk met de checked optie in de input zetten. Nu nog de jquery kant
Vb

<?php $switchstatus = "on"; ?>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" value="on" <?php if $switchstatus == "on" { echo 'checked=checked';} ?>> On
</label>
<label class="btn btn-primary">
<input type="radio" name="options" value="off" <?php if $switchstatus == "off" { echo 'checked=checked'} ?>> Off
</label>
</div>

[ Voor 8% gewijzigd door Thuurke op 30-11-2013 10:46 ]

[denemio]

Ik volg je vraag niet helemaal? Je weet dat een php variable niet verandert wanneer je een radio verandert?

Zoals je het hier hebt staan neem ik aan dat je de waarde voor $switchstatus ergens opgeslagen hebt (sessie, cookie, database)?
Om de waarde uit te lezen zou je het formulier moeten posten. Of een ajax request moeten maken.

[Thuurke]

Het is inderdaad dat de php variabele uit een database komt. Heb dus mijn voorbeeld code in de vraagstelling aangepast. De vraag is hoe ik de $switchstatus invloed kan laten uitvoeren op de state van de js-knoppen (de html knoppen staan namelijk wel goed). Ze staan nu namelijk allebei gewoon in de "not pressed"-stand terwijl dus de "on"-knop pressed moet zijn als $switchstatus="on" en omgekeerd.

[ Voor 25% gewijzigd door Thuurke op 30-11-2013 10:45 ]

[hylke94]

Probeer eens "checked=checked" ipv "checked"...

[Thuurke]

hylke94 schreef op zaterdag 30 november 2013 @ 10:46:
Probeer eens "checked=checked" ipv "checked"...

Dat is de html-kant, maar ik bedoel dus de js-kant.

[hylke94]

A.Koolen schreef op zaterdag 30 november 2013 @ 10:47:
[...]


Dat is de html-kant, maar ik bedoel dus de js-kant.

Je moet toch juist de html wijzigen (met js idd) om een radiobutton te "checken"...

http://stackoverflow.com/...on-status-with-javascript

[Thuurke]

Oh ja op die manier Het php had ik al gemaakt en wilde ik nu mooier maken met het button.js gebeuren.

Ik heb even wat geprobeerd aan de hand van je link:

code:

<form name="testform">
    <div class="col-lg-9 btn-group" data-toggle="buttons">
        <label class="radio-inline btn btn-success"><input type="radio" id="test1" name="test" value="1" />Ja</label>
        <label class="radio-inline btn btn-danger"><input type="radio" id="test0" name="test" value="0" />Nee</label>
    </div>

Zonder js-commando zijn beide buttons niet checked.

Voeg ik het volgende onder de bovenstaande code toe:

code:

<script>
document.testform.test[0].checked=true;
</script>

dan wordt de html-radio Ja gechecked.

De buttons blijven echter in de niet actieve modus staan. Beide zijn dus licht groen (#5cb85c)/rood (#d9534f) en als je er overheen gaat (hover) worden ze de normale kleur groen(#47a447)/rood (#d2322d).
Hoe krijg ik het voor elkaar dat de Ja-button dan ook actief is?

[ Voor 4% gewijzigd door Thuurke op 30-11-2013 12:17 ]

[Thuurke]

Ik heb een jsfiddle gemaakt die het mogelijk beter verklaart. http://jsfiddle.net/Fs9az/5/
Hoe krijg ik de ja of nee knop onload geactiveerd?

[DJMaze]

Niet om te zeuren hoor, maar bootstrap.css + jqeuery2 + buttons.js ?!?
Je bent gedoemd met dit project.

1. maak een <form>
2. voeg een <button type="reset">
3. wijzig checkbox/radio status
4. click de reset knop

1. maak een <form>
2. voeg een <button type="button" onclick="document.getElementById('checkbox1').checked = false">
3. wijzig checkbox/radio status
4. click de reset knop

Kijk dan nog eens of het werkt

[Thuurke]

DJMaze schreef op zaterdag 30 november 2013 @ 18:09:
Niet om te zeuren hoor, maar bootstrap.css + jqeuery2 + buttons.js ?!?
Je bent gedoemd met dit project.

Ik vind het wel meevallen bootstrap 3 + jquery 2 werkt naar behoren. Het zou leuk zijn om met button.js nog mooie fancy buttons te krijgen (eigenlijk vooral bedoeld voor tablet/smartphone), maar het hoeft niet perse.

Je suggestie kan ik trouwens niet helemaal volgen.

[DJMaze]

Voeg eens een reset button toe.
Wijzig de status van een checkbox of radio.
Klik de reset button.
Staat de status van de checkbox/radio weer zoals hij was?

Bijvoorbeeld: checked = false
Jij zet hem via buttons.js op true
Na reset staat hij dan ook echt op false?
Zo niet, de waarde die naar de server word gestuurd is wel: false

[ Voor 7% gewijzigd door DJMaze op 30-11-2013 18:56 ]

[Thuurke]

Eerste 4 regels is geen probleem dat werkt.
"Jij zet hem via buttons.js op true". Hier zit hem denk ik het eigenlijke probleem, want ik heb geen idee hoe ik dit voor elkaar moet krijgen.

[C0rnelis]

Er veranderen twee verschillende waardes bij het aan- of uitschakelen van een van je buttons: de visuele weergave en de echte waarde van de checkbox/radio.

Met het standaardvoorbeeld van getbootstrap.com krijg je dan: http://jsfiddle.net/Ly7Qt/

1. Je kijkt met je PHP-variabele of je wel of niet checked="checked" moet invoegen
2. Je kijkt óók met je PHP-variabele of je wel of niet de CSS-class active moet invoegen voor de label-elementen.

Of je kunt alle buttons 'aanzetten' door ze handmatig via javascript te togglen door te controleren of hun checkbox/radio actief is met:

JavaScript:

$(function($) {
    $('.btn-group .btn').each(function() { 
        if($(this).find('input:checked').length) { 
            $(this).button('toggle'); 
        } 
    });
});

DJMaze schreef op zaterdag 30 november 2013 @ 18:09:
Niet om te zeuren hoor, maar bootstrap.css + jqeuery2 + buttons.js ?!?
Je bent gedoemd met dit project.

Heb je wel eens wel bootstrap gewerkt? jquery is een dependency and button.js is maar een onderdeel van het gehele bootstrap framework.

[ Voor 17% gewijzigd door C0rnelis op 30-11-2013 19:19 ]

[DJMaze]

Werkt dat?
Dan moet dat specifiek via jQuery worden aangeroepen.
De 'class="active"' heeft namelijk via JavaScript problemen.
Dat komt omdat de status wijziging van een checkbox/radio via JavaScript niet word getriggered.
Voorbeeld:

HTML:

<html>
<head>
    <title>Inputs test</title>
</head>
<body>

<form id="form">
    <input type="checkbox" id="test-checkbox"/>
    <button type="button" id="btn-check">check</button>
    <button type="button" id="btn-uncheck">uncheck</button>
    <button type="reset">reset</button>
    <button type="button" id="btn-reset">reset js</button>
</form>
<script>
var cb = document.getElementById('test-checkbox');
if (window.MutationObserver) {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            console.log(mutation.type);
        });
    });
    observer.observe(cb, { attributes: true, attributeFilter: ['checked'] });
} else {
    cb.addEventListener('DOMAttrModified',function(event){
        alert('DOMAttrModified: ' + event.attrName + ' = ' + event.newValue);
    }, false);
}

cb.addEventListener('change',function(event){alert(event.type);}, false);

document.getElementById('btn-check').addEventListener('click',function(){cb.checked = true;}, false);
document.getElementById('btn-uncheck').addEventListener('click',function(){cb.checked = false;}, false);
document.getElementById('btn-reset').addEventListener('click',function(){document.getElementById('form').reset();}, false);
</script>

</body>
</html>

Zoals je ziet kan je niet via JavaScript de class="active" aanpassen als de status wijzigd.
Visueel ziet het er dus anders uit dan de echte waarde.

Zolang je dus geen reset knop hebt, noch via JS de checked status wijzigd is er niks aan de hand.
Ik loop persoonlijk wel tegen dit probleem aan omdat er op 1 pagina een "check all" knop is, de checkboxes op die pagina zijn dus niet in bootstrap style omdat dat niet werkt.
Leg dat maar eens aan de klant uit.

[ Voor 13% gewijzigd door DJMaze op 30-11-2013 19:30 ]

[DJMaze]

C0rnelis schreef op zaterdag 30 november 2013 @ 19:13:
Heb je wel eens wel bootstrap gewerkt? jquery is een dependency and button.js is maar een onderdeel van het gehele bootstrap framework.

Ik heb er mee gewerkt en 3 websites afgeleverd.
Heb er geen hekel aan, maar Bootstrap word voor 90% op de verkeerde manier gebruikt.

[ Voor 12% gewijzigd door DJMaze op 30-11-2013 19:24 ]

[C0rnelis]

DJMaze schreef op zaterdag 30 november 2013 @ 19:21:
Werkt dat?
Dan moet dat specifiek via jQuery worden aangeroepen.
De 'class="active"' heeft namelijk via JavaScript problemen.
Dat komt omdat de status wijziging van een checkbox/radio via JavaScript niet word getriggered.

Wat werkt precies ? En wat zou niet werken ? Ik snap niet welk probleem je hier probeert aan te kaarten. Als je kijkt naar de gelinkte jsfiddle van mij dan zie je dat het label-element met de CSS-class active ook daadwerkelijk als actief wordt getoond en het is de taak aan jou als developer om ervoor te zorgen dat ook de input het attribuut checked="checked" - het is immers niet meer dan een CSS-class en die kijkt niet naar de waarde van het onderliggende input-element.

DJMaze schreef op zaterdag 30 november 2013 @ 19:23:
[...]

Ik heb er mee gewerkt en 3 websites afgeleverd.
Heb er geen hekel aan, maar Bootstrap word voor 90% op de verkeerde manier gebruikt.

Hoe wordt bootstrap hier dan misbruikt en wat is er precies gedoemd te mislukken/waar baseer je dat op ?

DJMaze schreef op zaterdag 30 november 2013 @ 18:09:
Je bent gedoemd met dit project.

[Thuurke]

Hm ik geloof dat ik er uit ben.........

code:

<label class="radio-inline btn btn-success <?php if ($value == 1) { echo 'active'; } ?>">
<input type="radio" id="<?php echo $elementname; ?>" name="<?php echo $elementname ?>" value="1" <?php if ($value == 1)         { echo 'checked="checked"'; } ?> />Ja
</label>
<label class="radio-inline btn btn-danger <?php if ($value == 0) { echo 'active'; } ?>">
<input type="radio" id="<?php echo $elementname; ?>" name="<?php echo $elementname ?>" value="0" <?php if ($value == 0)         { echo 'checked="checked"'; } ?> />Nee
</label>

[C0rnelis]

Let wel dat htmlelement-ids uniek moeten zijn; door (alleen) het gebruik van $elementname zijn die voor al je radiobuttons hetzelfde!

[ Voor 3% gewijzigd door C0rnelis op 30-11-2013 19:34 ]

[Thuurke]

Ja klopt ik was aan het denken om de value er achter te plakken dan zijn ze toch uniek.

[DJMaze]

C0rnelis schreef op zaterdag 30 november 2013 @ 19:31:
Wat werkt precies ? En wat zou niet werken ? Ik snap niet welk probleem je hier probeert aan te kaarten. Als je kijkt naar de gelinkte jsfiddle van mij dan zie je dat het label-element met de CSS-class active ook daadwerkelijk als actief wordt getoond en het is de taak aan jou als developer om ervoor te zorgen dat ook de input het attribuut checked="checked" - het is immers niet meer dan een CSS-class en die kijkt niet naar de waarde van het onderliggende input-element.

http://jsfiddle.net/Ly7Qt/2/
Klik op de "reset" button NADAT je option 2 of 3 hebt gekozen.
Wijzigd de status weer in option 1?
Is de <label> van option 1 weer active?
Wat is werkelijke status van option 1 checked of niet?

[ Voor 31% gewijzigd door DJMaze op 30-11-2013 19:53 . Reden: jsfiddle gelukt via Chromium ]

[Thuurke]

Sorry, ik was het even helemaal in de fouten hoek aan het zoeken. Toen ik het woordje active voorbij zag komen begon er zachtjes een belletje te rinkelen. Bedankt voor het meedenken dus!

[C0rnelis]

DJMaze schreef op zaterdag 30 november 2013 @ 19:37:
[...]

jsfiddle crasht maar, verander de html in jouw voorbeeld eens in het volgende en click op de "reset" button NADAT je option 2 of 3 hebt gekozen.
Wijzigd de status weer in option 1?
Is de <label> van option 1 weer active

Nee die is niet weer active en dat is bijna hetzelfde probleem als de juiste button te highlighten bij een page load. Je gebruikt javascript voor het togglen van de onderliggende input-elementen, als je dan ook een paar regels JavaScript gebruikt die het vervolgens netjes resetten bij het drukken op die resetknop is er geen probleem.. Jsfiddle crasht hier trouwens niet (Chrome 31) http://jsfiddle.net/Ly7Qt/3/

[DJMaze]

C0rnelis schreef op zaterdag 30 november 2013 @ 19:57:
Nee die is niet weer active en dat is bijna hetzelfde probleem als de juiste button te highlighten bij een page load. Je gebruikt javascript voor het togglen van de onderliggende input-elementen, als je dan ook een paar regels JavaScript gebruikt die het vervolgens netjes resetten bij het drukken op die resetknop is er geen probleem.. Jsfiddle crasht hier trouwens niet (Chrome 31) http://jsfiddle.net/Ly7Qt/3/

Het was mij al gelukt via Chrome: http://jsfiddle.net/Ly7Qt/2/

En ja, je kan het dus oplossen met extra JavaScript, maar hoeveel mensen die werken met Bootstrap/JQuery weten/doen dat ook?

Om even mijn vorige mening aan te halen: "Bootstrap word voor 90% op de verkeerde manier gebruikt."

Want, met alleen het gebruik ervan ben je nog lang niet klaar......

[C0rnelis]

DJMaze schreef op zaterdag 30 november 2013 @ 20:07:
[...]

Het was mij al gelukt via Chrome: http://jsfiddle.net/Ly7Qt/2/

En ja, je kan het dus oplossen met extra JavaScript, maar hoeveel mensen die werken met Bootstrap/JQuery weten/doen dat ook?

Om even mijn vorige mening aan te halen: "Bootstrap word voor 90% op de verkeerde manier gebruikt."

Want, met alleen het gebruik ervan ben je nog lang niet klaar......

Ik zie geen geslaagde oplossing in jouw fiddle - die versie illustreert juist het probleem dat jij noemt..

Bootstrap is ook geen kant-en-klare oplossing, het helpt je en vergemakkelijkt een hoop dingen die je/veel mensen vaak gebruiken. Als je iets gaat gebruiken met een verkeerde insteek kan het net zo vaak goed komen als niet. Ligt niet aan Bootstrap en geldt dus voor alles wat geen kant-en-klare oplossing is. En fijn dat jij er ook zo over denkt. In dit topic zie ik echter niemand die anders beweerd dus ik vind je opmerking nog steeds misplaatst.

Daar bovenop komt dat het aantal formulieren dat ik de afgelopen jaren heb gezien met een dergelijk resetknop op een hand zijn te tellen

[DJMaze]

C0rnelis schreef op zaterdag 30 november 2013 @ 20:20:
Ik zie geen geslaagde oplossing in jouw fiddle - die versie illustreert juist het probleem dat jij noemt..

Correct, ik ben meer de persoon om de problemen aan te tonen i.p.v. direct voor iedereen op te oplossen.
Als je namelijk alleen een oplossing geeft, verdwijnt de kennis van het probleem.
Men weet dan namelijk niet meer waarom iets is zoals het is.
GOT is in mijn opinie een platform om te leren, niet om steeds de oplossing voor te schotelen.

C0rnelis schreef op zaterdag 30 november 2013 @ 20:20:
Bootstrap is ook geen kant-en-klare oplossing, het helpt je en vergemakkelijkt een hoop dingen die je/veel mensen vaak gebruiken. Als je iets gaat gebruiken met een verkeerde insteek kan het net zo vaak goed komen als niet. Ligt niet aan Bootstrap en geldt dus voor alles wat geen kant-en-klare oplossing is. En fijn dat jij er ook zo over denkt. In dit topic zie ik echter niemand die anders beweerd dus ik vind je opmerking nog steeds misplaatst.

Ik begrijp je punt heel goed.
Ik had het netter moeten verwoorden i.p.v. geagiteerd te werk te gaan.
Ik was vaak achteraf de sjaak om de veroorzaakte problemen te repareren (waaronder dus het aangekaarte probleem) + mijn eigen bugs.
Gelukkig ben ik met dat werk gestopt omdat het mij erg frustreerde.

Excuses daarvoor.

[ Voor 3% gewijzigd door DJMaze op 01-12-2013 17:14 ]