why JQuery UI option buttons (buttonset) doesn't have any events - I want to handle select events for it, wonder what's the right way for doing that.
You should just tap into the normal change event for the radio buttons themselves. Expanding on the example on jQueryUI's website:
Html:
<div id="radio">
<input type="radio" id="radio1" name="radio" value="1" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" value="2" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" value="3" /><label for="radio3">Choice 3</label>
</div>
JavaScript:
$("#radio").buttonset();
$("input[name='radio']").on("change", function () {
alert(this.value);
});
The buttonset widget is just styling the radio buttons a certain way. All of the regular events will fire as expected.
Example: http://jsfiddle.net/andrewwhitaker/LcJGd/
Related
I have a color filter, simillar to this:
<input type="checkbox" id="orange" class="orange" value="orange"/>orange
<br/>
<input type="checkbox" id="peach" value="peach"/>peach
<br/>
<input type="checkbox" id="terracotta" value="terracotta"/>terracotta
<br/>
<input type="checkbox" id="coffee" value="coffee"/>coffee
<br/>
<input type="checkbox" id="browne" value="browne"/>browne
<br/>
<input type="checkbox" id="rose" value="rose"/>rose
<br/>
<input type="checkbox" id="red" value="red"/>red
<br/>
I recive color from DB.
<div th:each="model : ${allColor}">
<span th:text="${model.color}"/>
Can I hide color, with use Thymeleaf, which is not in DB?
For example now I haven't Rose, Coffee and Peach colors, but maybe in future I will have this color. I want to do colors verification , if color is in DB, user can see on UI checkbox, else checkbox hide. I read about th:if and th:unless. Whether it is possible to make it with use Thymeleaf?
If I try to do:
<input type="checkbox" th:if="${model.color==coffee}"id="coffee" value="coffee"/>coffee
It's not working.
Instead of hiding colors, you should create the color checkboxes with a loop as well. Like this:
<th:block th:each="model : ${allColor}" th:with="color=${model.color}">
<input type="checkbox" th:id="${color}" th:class="${color}" th:value="${color}"/> <span th:text="${color}" />
<br />
</th:block>
As for why your original attempt didn't work, it's hard to tell without seeing more of the html. I'm guessing that ${model.color} was undefined, because you weren't in a loop? Also, you were missing quotes around 'coffee'. like this: `${model.color == 'coffee'
Something like this may work as well, but I would recommend the loop.
<input th:if="${allColor.contains('orange')}" type="checkbox" id="orange" class="orange" value="orange"/>orange<br/>
<input th:if="${allColor.contains('peach')}" type="checkbox" id="peach" value="peach"/>peach<br/>
<input th:if="${allColor.contains('terracotta')}" type="checkbox" id="terracotta" value="terracotta"/>terracotta<br/>
<input th:if="${allColor.contains('coffee')}" type="checkbox" id="coffee" value="coffee"/>coffee<br/>
<input th:if="${allColor.contains('browne')}" type="checkbox" id="browne" value="browne"/>browne<br/>
<input th:if="${allColor.contains('rose')}" type="checkbox" id="rose" value="rose"/>rose<br/>
<input th:if="${allColor.contains('red')}" type="checkbox" id="red" value="red"/>red<br/>}`.
I have form and inside I have radio button option , I have the controller class and the model. I can successfully save the other data but radio buttons options reflects to database as 0 always. I believe there is something wrong with thymeleaf radio button implementation.
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1"
value="true" th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2"
value="false" th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I found it , values should be 0 or 1 instead of true and false
<form id="add" role="form" th:action="#{/add}" method="post" th:object="${radiobutton}">
<input type="hidden" th:field="*{id}"/>
<div class="form-group">
<label>is it new</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline1" value="1"
th:checked="*{isNew}"/>Yes
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadiosInline1" id="optionsRadiosInline2" value="0"
th:checked="*{isNew} == false"/>No
</label>
</div>
</form>
I have a problem with selecting radiobuttons using the arrow keys on a tablet (with keyboard dock). For normal buttons the selection works, but not for radiobuttons.
<body>
<div data-role="page" data-theme="a">
<div id="type_selection" data-role="controlgroup" data-type="horizontal">
<input type="radio" id="radio_option1" name="radio" checked="checked" /><label for="radio_option1">Option 1</label>
<input type="radio" id="radio_option2" name="radio" /><label for="radio_option2">Option 2</label>
<input type="radio" id="radio_option3" name="radio" /><label for="radio_option3">Option 3</label>
<input type="radio" id="radio_option4" name="radio" /><label for="radio_option4">Option 4</label>
</div>
</div>
</body>
Selecting a regular button with the keyboard is not a problem:
<button id="btn_dothat" data-inline="true">That</button>
Anyway to fix this or is this a limitation of jQuery Mobile?
Use checkboxradio("refresh") to update the radio buttons
UPDATE:
Rather than using div for control group, use fieldset
<fieldset id="type_selection" data-role="controlgroup" data-type="horizontal">
<input type="radio" id="radio_option1" name="radio" checked="checked" />
<label for="radio_option1">Option 1</label>
<input type="radio" id="radio_option2" name="radio" />
<label for="radio_option2">Option 2</label>
<input type="radio" id="radio_option3" name="radio" />
<label for="radio_option3">Option 3</label>
<input type="radio" id="radio_option4" name="radio" />
<label for="radio_option4">Option 4</label>
</fieldset>
I'm using cucumber with RoR (with either webrat or capybara)
How can I write a step to check a radio button? I've tried "choose" or "select" but it can't find my radio button.
I'm not sure what to do, as I have in fact 2 inputs with the same name (the 2 radio buttons belonging to the same "group")
Thanks
Example of html
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<input type="radio" name="group1" value="Milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked> Butter<br>
<input type="radio" name="group1" value="Cheese"> Cheese
</form>
The answer is to choose the id (generated by Rails) of the radio button.
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<input type="radio" name="group1" value="Milk" id="group1_milk"> Milk<br>
<input type="radio" name="group1" value="Butter" checked id="group1_butter"> Butter<br>
<input type="radio" name="group1" value="Cheese" id="group1_cheese"> Cheese
</form>
and do
choose("group1_milk").
That will work even if more radio buttons have the same options.
In your step definition add line:
choose('A Radio Button')
Cucumber uses Capybara, you can read more about it here: https://github.com/jnicklas/capybara
jQuery UI seems to be sensitive to the attributes of the elements that compose a widget. How then can I use the same widget mutiple times in a single page\form?
Example - the radio select widget, which comes in the demo index.html file that downloads with jQuery-ui:
<!DOCTYPE html>
<html>
<head>
...
$(function(){
$("#radioset").buttonset();
}
...
</head>
<body>
...
<form style="margin-top: 1em;">
<div id="radioset">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
...
</body>
</html>
What code then should I add to have a second div with a different set of radio buttons?
It doesn't actually require the form to be wrapped around. Instead, you just need to make sure your radio groups have different names. It's explained in greater detail here .
I believe this is what you want, along with an example of how to put 2 different radio sets into one form. Notice the NAME of the inputs
$(function(){
$(".radioset").buttonset();
}
<form name="form1" style="margin-top: 1em;">
<div id="radioset1" class="radioset">
<input type="radio" id="radioset1-1" name="radio1" /><label for="radioset1-1">Choice 1</label>
<input type="radio" id="radioset1-2" name="radio1" checked="checked" /><label for="radioset1-2">Choice 2</label>
<input type="radio" id="radioset1-3" name="radio1" /><label for="radioset1-3">Choice 3</label>
</div>
<div id="radioset2" class="radioset">
<input type="radio" id="radioset2-1" name="radio2" /><label for="radioset2-1">Choice 1</label>
<input type="radio" id="radioset2-2" name="radio2" checked="checked" /><label for="radioset2-2">Choice 2</label>
<input type="radio" id="radioset2-3" name="radio2" /><label for="radioset2-3">Choice 3</label>
</div>
</form>
$(function(){
$("#radioset2").buttonset();
}
<div id="radioset2">
Or you could use
$(".radioset").buttonset();
Wich would select the radioset class not the id so you could have many.
To address your comment:
$(function(){
$("#radioset1").buttonset();
$("#radioset2").buttonset();
}
<form name="form1" style="margin-top: 1em;">
<div id="radioset1">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
<form name="form2" style="margin-top: 1em;">
<div id="radioset2">
<input type="radio" id="radioAgain1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radioAgain2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radioAgain3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
I see no reason for the above not to work.