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>
Related
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>
How Do I align the Jquery input fields in single horizontal line ?
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Term:</legend>
<label for="txtSDate">
</label>
<input id="txtSDate" name="txtSDate" value="<%=sdate%>" placeholder="Enter start date" type="date" data-inline="true"
maxlength="12" />
<label for="txtEDate">
</label>
<input id="txtEDate" name="txtEDate" value="<%=edate%>" type="date" maxlength="12" placeholder="Enter end date" />
</fieldset>
</div>
maybe you missed the fieldcontian?
please try below:
<div data-role="fieldcontain">
<label for="txtSDate"></label>
<input id="txtSDate" name="txtSDate" value="<%=sdate%>" placeholder="Enter start date" type="date" data-inline="true" maxlength="12" />
</div>
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/
With succes I've created a page that uses the set of radio buttons that are formatted jquery. But as soon as I add the div's need to position the content on the page, the radio buttons are still formatted, but do not act as radio buttons anymore (they act like checkboxes). This is my code, what's wrong with it?
<script>
$(document).ready(function() {
$("#dt_hel").buttonset();
});
</script>
<!-- end script radiobuttons -->
<div class="demo">
<div id="ContentContainerLeft" >
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
If you follow the rule of closing the most recent tag before closing older tag (ie set the form opening tag above the tag) then it should work e.g.
<form id="dt_this_form" name="dt_this_form" action="this.php" method="post">
<div class="demo">
<div id="ContentContainerLeft" >
<p>
</div>
<div id="ContentContainerMiddle" >
<P>
<div id="dt_hel" style="font-size:80%;">
<input type="radio" id="radio1" name="dt_hel" value="0" /><label for="radio1">Lower</label>
<input type="radio" id="radio2" name="dt_hel" value="1" /><label for="radio2">Equal</label>
<input type="radio" id="radio3" name="dt_hel" value="2" checked/><label for="radio3">Higher</label>
</div>
<P></P>
</div>
<div id="TweetContainer" >
<P>
</div> <!-- end tweetcontainer -->
</div><!-- End demo -->
</form>
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.