My form has a select element and a group of radio-buttons. The values (and labels) of the radio buttons depend on which option was selected in the select-element. My plan is to house the radio buttons in a partial, and when the selected option changes, make an AJAX call to retrieve an updated version of it, then reinsert it into the form.
Is that a sensible solution? I know this could be handled better by Angular, but converting this page to an Angular app is probably beyond the scope of this small project.
Edit: I guess what I'm really asking is whether making an AJAX call for the radio buttons is a better solution than having all the radio buttons already on the page and using js/jquery to manipulate them (show/hide, check/uncheck).
As requested, here a generic approach, using native/vanilla Javascript. This is the code for a page in which the radio buttons must be loaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo radio loading w/ Ajax</title>
<style>
#radioContainer {
width: 275px;
height: 125px;
border: 1px solid black;
padding: 10px;
}
h3 {
margin-top: 0;
}
label {
display: inline-block;
width: 150px;
}
</style>
</head>
<body>
<form name="theForm">
<select name="preSelector" onchange="loadRadios()">
<option value=""> Select the car brand </option>
<option value="audi.html"> Audi </option>
<option value=""> BMW </option>
<option value=""> Mercedes </option>
</select>
<div id="radioContainer">
</div>
</form>
<script>
function loadRadios() {
var selectValue = filePath = theForm.elements['preSelector'].value;
var radioContainer = document.getElementById('radioContainer');
var ajaxRequest = new XMLHttpRequest();
if (selectValue != '') {
ajaxRequest.onreadystatechange = function() {
if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
radioContainer.innerHTML = ajaxRequest.responseText;
}
}
ajaxRequest.open('GET',filePath,true);
ajaxRequest.send();
}
}
</script>
</body>
</html>
And this is the -- whole -- code of the file with the Audi radio buttons, audi.html:
<h3>Audi</h3>
<label>4-wheel drive: </label> yes <input type="radio" name="audi_4wheel" value="yes"> no <input type="radio" name="audi_4wheel" value="no">
<br>
<label>Airconditioning: </label> yes <input type="radio" name="audi_airco" value="yes"> no <input type="radio" name="audi_airco" value="no">
<br>
<label>Metallic paint: </label> yes <input type="radio" name="audi_metallic" value="yes"> no <input type="radio" name="audi_metallic" value="no">
.
That file should be put in the same directory as the 'mother page', or the path must be adapted.
I am assuming that you don't need to code for IE6; the code works in IE7+ and all other browsers. I should think that for you, the code is pretty much self-explanatory, for the rest. If not, just post a comment question, and I'll be happy to answer it.
Related
i have a very simple HTML extension :
public static MvcHtmlString test(this HtmlHelper helper, IHtmlString item)
{
var inputTag = new TagBuilder("div");
inputTag.MergeAttribute("class", "dropdown-with-tab-content white-background secondary-tab-tab-content white-background active");
inputTag.MergeAttribute("id", "aga");
inputTag.InnerHtml = MvcHtmlString.Create(item.ToString()).ToString();
return MvcHtmlString.Create(inputTag.ToString());
}
my call from view :
#Html.test(Html.Partial("Partials/_State", Model))
partial view :
<div class="col-md-12 IssuanceDate RedeemedDate">
<div class="form-group" style="margin-left: 20px; ">
<label>test</label>
<br />
<input type="radio" name="radAnswer" /> Female
<input type="radio" name="radAnswer" /> Female
<input type="radio" name="radAnswer" /> Female
<input type="radio" name="radAnswer"/> Female
</div>
</div>
if i use html extension like this, all radio button will not be able to be checked.
however if in my HTML extension i return MvcHtmlString.Create(item.ToString()) directly, everything is fine. Does anyone have a solution for this?
PS. No classes on the div does anything to make buttons unclickable, or anything else, i can see that radio button is clicked, but it never gets checked.
I have a form that I have 2 different sets of formfields that are utilized depending on a select box value. The problem I am having is when I try to disable the irrelevant input fields, I the disabled attribute comes up as: disabled="" instead of disabled="disabled" here is the code I am using. It is a fairly complicated form so I will use the relevant fields so I can try to keep it as simple as possible for you all. If you think something is missing... please let me know if you need to see more.
<cfform id="entry-form" ACTION="index-10.cfm?Company" name="send" class="uniForm">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder or Individual</label>
<cfselect name="select1" id="select1">
<option value="" <cfif Individual is "">selected="selected"</cfif>>Who is this Case for? (choose one)</option>
<option value="0"<cfif Individual is 1>selected="selected"</cfif>>An Individual Home Owner</option>
<option value="1"<cfif Individual is not 1 and Individual is not "">selected="selected"</cfif>>A Builder</option>
</cfselect>
<p class="formHint">A selection is required</p>
</div>
<!--- this is for individual home owner. --->
<div class="hide" id="hide1">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>First name</label>
<cfinput type="text"
name="FirstName"
id="FirstName"
data-default-value="Enter your first name"
size="35"
class="textInput required validateAlpha"
maxlength="50"
value="#FirstName#">
<p class="formHint">First Name is required</p>
</div>
</div>
<div class="hide" id="hide2">
<div class="ctrlHolder"><label for="" style="display:none"><em>*</em>Builder Name</label>
<cfinput type="text" id="builder"
name="BuilderName"
data-default-value="Type a builder's name"
size="35"
class="textInput required"
value="" />
<p class="formHint">Builder's name is required</p>
<cfinput id="builder_hidden" name="BuilderID" type="hidden" value="" />
<cfinput id="builder_hidden_plan" name="PlanID" type="hidden" value="" />
</div>
</div>
</cfform>
<script>
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ) {
$("#hide2").slideDown("fast"); //Slide Down Effect
$("#hide1").slideUp("fast");
$("#FirstName").prop("disabled", true);
$("#builder").prop("disabled", false);
} else if ($(this).val() == "0" ){
$("#hide1").slideDown("fast"); //Slide Down Effect
$("#hide2").slideUp("fast");
$("#FirstName").prop("disabled", false);
$("#builder").prop("disabled", true);
}
});
</script>
I am using:
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
uni-form-validation.jquery.js
I found the issue. The disabled property was being added. It was the required class that was keeping this from working. I added removeClass and addClass methods in order to correct this.
Please change the jQuery 'prop' to 'attr' & check the below script once it works fine.....
<script type="text/javascript">
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "1" ){
$("#hide2").slideDown("fast"); //Slide Down Effect
$("#hide1").slideUp("fast");
$("#firstname").attr("disabled", "disabled");
$("#builder").attr("disabled", false);
}
else if ($(this).val() == "0" ){
$("#hide1").slideDown("fast"); //Slide Down Effect
$("#hide2").slideUp("fast");
$("#firstname").attr("disabled", false);
$("#builder").attr("disabled", "disabled");
}
});
});
I tried this code to achieve what I want to do. It worked when I tried it in my ordinary HTML file, but when I tried it in my JQuery Mobile page, the code did not work well for me. Are there different ways or code to select JQuery Mobile checkboxes?
Here's the code that I tried:
JAVASCRIPT:
<script>
function SetAllCheckBoxes(FormName, FieldName, CheckValue)
{
if(!document.forms[FormName])
return;
var objCheckBoxes = document.forms[FormName].elements[FieldName];
if(!objCheckBoxes)
return;
var countCheckBoxes = objCheckBoxes.length;
if(!countCheckBoxes)
objCheckBoxes.checked = CheckValue;
else
// set the check value for all check boxes
for(var i = 0; i < countCheckBoxes; i++)
objCheckBoxes[i].checked = CheckValue;
}
HTML
<form method="GET" name="myForm" onsubmit="return false;">
<label for="myCheckbox1">
<input type="checkbox" name="myCheckbox" value="1" id="myCheckbox1">
I like Britney Spears
</label>
<br>
<label for="myCheckbox2"><input type="checkbox" name="myCheckbox" value="2" id="myCheckbox2">
I like Hillary Duff
</label>
<br>
<label for="myCheckbox3"><input type="checkbox" name="myCheckbox" value="3" id="myCheckbox3">
I like Mandy Moore
</label>
<br>
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', true);" value="I like them all!">
<input type="button" onclick="SetAllCheckBoxes('myForm', 'myCheckbox', false);" value="I don't like any of them!">
I was not aware that JQuery Mobile's checkboxes need to be refreshed after unchecking/checking them via JQuery or Javascript. Here's the code:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
http://api.jquerymobile.com/checkboxradio/#method-refresh
Try this:
function SetAllCheckBoxes(FormName, CheckValue){
$.each($("#"+FormName+" input[type=checkbox]"), function(){
$(this).attr("checked",CheckValue).checkboxradio("refresh");
});
}
I removed the FieldName because your function was named SetAllCheckBoxes, just your input fields are the same. You just need tell what's your form and the state of your checkboxes.
To toggle / refresh checkboxes in jquery mobile you need to use .prop, rather than .attr.
$("input[type='checkbox']").prop("checked",true).checkboxradio("refresh");
I want to make the horizontal radio button to full width of the screen and I am referring http://jquerymobile.com/demos/1.2.0/docs/forms/radiobuttons/ and my code is below:
<div>
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="radio-choice-1" id="spent_money_1" value="choice-1" checked="checked" /> <label for="spent_money_1">Spent Some $</label>
<input type="radio" name="radio-choice-1" id="made_money_1" value="choice-2"/>
<label for="made_money_1">Made Some $</label>
</fieldset>
</div>
and i tried to put style="width:100%" in both div, fieldset and input but doesn't help either. Appreciate any advice please. thanks !
Cheers,
Mark
I have been having the same problem. Adding the following CSS works for me.
This case is for 4 radio buttons, so I use 25% width for ui-radio.
.ui-controlgroup-controls
{
width:100%;
}
.ui-radio {
width:25%;
}
In the general case where you don't want to specify the widths (works in 1.3.0)
.ui-controlgroup-controls
{
display: table;
width: 100%;
}
.ui-controlgroup-controls .ui-radio
{
display: table-cell;
float: none;
}
In my header, I have a custom icon to open a select menu.
The button is displayed without text, but it has the default appearance of Jquery mobile buttons like below :
<form name="actions" action="" method="post">
<div class="ui-select ui-btn-right" data-inline="true">
<select name="select-action" id="select-action" data-native-menu="true" data-icon="myapp-actions" data-iconpos="notext" data-inline="true" tabindex="-1">
<option value="save">Save</option>
<option value="print">Print</option>
<option value="share">Share</option>
</select>
</div>
</form>
My aim is to get rid of the default background with the circle to have the icon bigger.
Is it possible to do that with jQuery mobile ?
I think I could add a normal link with my icon set as a background image in css, but I don't know how to make it show the select open.
You might need to tweak it here and there but you're going to have to override the CSS that jQM applies
http://jsfiddle.net/phillpafford/vsw3r/1/
CSS
.ui-icon-myapp-actions {
background-image: url("http://i.stack.imgur.com/YP6jU.png");
width:40px;
height:36px;
}
.ui-btn-icon-notext {
width:40px;
height:36px;
}
.ui-btn-up-c {
border: 0px;
}
.ui-btn-icon-notext .ui-btn-inner {
padding: 0px;
}
.ui-btn-inner {
border-top: 0px;
}
HTML
<form name="actions" action="" method="post">
<div class="ui-select ui-btn-right" data-inline="true">
<select name="select-action" id="select-action" data-icon="myapp-actions" tabindex="-1" data-inline="true" data-corners="false" data-iconshadow="false" data-shadow="false" data-iconpos="notext">
<option value="save">Save</option>
<option value="print">Print</option>
<option value="share">Share</option>
</select>
</div>
</form>