Develop Reference

Load data on Bower plugin for a progress bar

I recently came across bower a web-tool to develop a progress bar. I have implemented a progress bar as series of radio buttons aligned next to each other. The concept is to load data from a .edf file to the browser upon clicking the radio buttons. All these work fine before I apply the Bower scripts. When I make a transition from one radio button to another I would like to have an effect which shows a transition while clicking on each button. Can I get some advice here if I can achieve this by applying any of the bootstrap classes or to modify the code existing? The snippet I have added is not loading the Bower libraries, otherwise it would look similar to this.
$('.radios').radiosToSlider({ animation: true, });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"/>=
<script type="text/javascript" src="bower_components/radios-to-slider/dist/jquery.radios-to-slider.js"/>
<link rel="stylesheet" type="text/css" href="bower_components/radios-to-slider/dist/radios-to-slider.css"/>
<div class="radios">
<label for="option1" class="btn">
<input id="option1" name="options" type="radio" autocomplete="off" onchange="dataSegment(0)" checked>
</label>
<label for="option2" class="btn">
<input id="option2" name="options" type="radio" autocomplete="off" onchange="dataSegment(1)">
</label>
<label for="option3" class="btn">
<input id="option3" name="options" type="radio" autocomplete="off" onchange="dataSegment(2)">
</label>
<label for="option4" class="btn">
<input id="option4" name="options" type="radio" autocomplete="off" onchange="dataSegment(3)">
</label>
<label for="option5" class="btn">
<input id="option5" name="options" type="radio" autocomplete="off" onchange="dataSegment(4)">
</label>
</div>

Your problem is that you are using a URL that is local to a website. Notice that you have no protocol in the URL (https://, http://, etc). I did a little digging, and the URL you should be using is http://rubentd.com/bower_components/radios-to-slider/dist/jquery.radios-to-slider.js

Javascript alert not working inside data toggle buttons

<div class="xyz" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" onclick='alert("Hellooo");' name="test" value="Radio1" > Radio
</label>
</div>
Javascript alert box is not working with data toggles(Bootstrap is loaded).
Can someone help?
The code snippet is pasted above.
Thanks in advance.

How does the toggle button work with checkboxes?

I'm referring to the Toggle buttons with checkboxes which I don't understand. There we have the example (I have added some ids):
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input id="c1" type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
</label>
<label class="btn btn-primary">
<input id="c2" type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-primary">
<input id="c3" type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
I can click on the third button or use $('#c3').closest('.btn').button('toggle') to set the third button as pressed. That is visually okay. However, the checkbox input does not get the checked attribute, and that is what I'm missing. Why doesn't this happen automatically? Am I required to do this manually?
Update and solution:
As Marcos Pérez Gude revealed: The inspector of Firefox (or Elements in Chrome) doesn't show changes regarding the checked state of a checkbox. There you can modify or see other things but currently (Firefox 40) the checked state cannot be trusted. That was my fault.

Setting a radio button to checked in jquery not showing it as checked in view

On document ready I'm setting a radio button to checked, I want the user to see the button as highlighted/discolored. But nothing is showing in the view.
Here is my html. Nothing shows it as being checked in the view or HTML. It's the same color as all the other radio buttons.
<div class="btn-group" data-toggle="buttons" id="SpaceType">
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="0" autocomplete="off"> House
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="1" autocomplete="off"> Apartment
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="2" autocomplete="off"> Studio
</label>
<label class="btn btn-primary">
<input type="radio" name="typeoptions" id="3" autocomplete="off"> Other
</label>
</div>
Here is my jquery.
if ($("#YogaSpaceType").val() != "") {
var t = $("#YogaSpaceType").val();
var element = '#SpaceType.' + t;
//$(element).prop('checked', true);
$('input:radio[id=SpaceType][id=0]').prop('checked', true);
}
I tried both lines including the one that is commented out.
If I add 'checked' to the element like below the HTML shows it as checked but I see nothing in the view as checked, it still looks unchecked.
<input type="radio" name="typeoptions" id="0" autocomplete="off" checked> House

It looks like you want to change this a bit to be more like http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/. The problem here is you are trying to use the input keyword in jquery, but your html is button groups.
From that page, the HTML is:
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
and then the JS is $('input:radio[name=sex]')[2].checked = true;
If it's necessary to leave them as button groups, you'll need to change your JS line to be more like $("#0").prop('checked', true). You could also chain the div ids together like this: $("#SpaceType #0").prop('checked', true);

It was a little confusing, but the class attribute 'active' needs to be added to the label. Not the checked attribute. This is a little confusing but understood now.

$('input[type="radio"][id="0"]').prop('checked', true)
Multiple value check for id, will end up in 0 elements.

Bootstrap 3 radio button correct syntax

So I have been in the process of migrating my current project from Bootstrap 2.3 to Bootstrap 3 which has had some major structural changes particularly to due with radio buttons. Currently I have
HTML:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input id="emViewMacsButton" name="options" type="radio">MAC
</label>
<label class="btn btn-primary">
<input id="emViewTagsButton" name="options" type="radio">Tags
</label>
<label class="btn btn-primary">
<input id="emViewSettingsButton" name="options" type="radio">Settings
</label>
</div>
Script Code:
$('#emViewMacsButton').on('click',emViewMacs());
$('#emViewTagsButton').on('click',emViewTags());
$('#emViewSettingsButton').on('click',emViewSettings());
My problem lies in that I have setup my program that each of the different radio buttons must access a different function to display table data. The .on('click') function returns nothing. I've also tried $('input[name=options]') but the active attribute isn't set for any of the radio buttons on the returned piece of HTML .
What would be the correct structure for this ?

http://jsbin.com/uwezip/1/edit
when passing a function ( myFunction() ) into another function callback, just remove the ()
$(function(){ // DOM is now ready to be manipulated
$('#emViewMacsButton').on('change',emViewMacs);
$('#emViewTagsButton').on('change',emViewTags);
$('#emViewSettingsButton').on('change',emViewSettings);
});