I have the following simple_form builder invocation:
f.association(:facility, { as: :radio_buttons, label: false })
Which generates:
<div class="attribute radio_buttons required swipe_facility">
<ul>
<input type="hidden" name="swipe[facility_id]" value="">
<li class="radio">
<input class="radio_buttons required" type="radio" value="10000" name="swipe[facility_id]" id="swipe_facility_id_10000">
<label class="collection_radio_buttons" for="swipe_facility_id_10000">Facility 1</label>
</li>
<li class="radio">
<input class="radio_buttons required" type="radio" value="10001" name="swipe[facility_id]" id="swipe_facility_id_10001">
<label class="collection_radio_buttons" for="swipe_facility_id_10001">Facility 2</label>
</li>
<li class="radio">
<input class="radio_buttons required" type="radio" value="10002" name="swipe[facility_id]" id="swipe_facility_id_10002">
<label class="collection_radio_buttons" for="swipe_facility_id_10002">Facility 3</label>
</li>
</ul>
</div>
How do I add a class to these guys:
<label class="collection_radio_buttons" for="swipe_facility_id_10000">Facility 1</label>
The closest I've been able to get is adding a class to the LI tags with item_wrapper_class.
Related
#model IEnumerable<WIMMPortalServer.BAL.DTO.GlobalCodeDTO>
#foreach (var item in Model)
{
if (#item.GlobalCodeCategoryValue == "115")
{
<div class="form-group">
#*<h6 >PICTURE FORMAT:</h6>*#
<h6>#item.GlobalCodeCategoryName</h6>
<div class="checkboxs round">
<div class="element">
<label id="lblcolor">
#*COLOR*#
#item.GlobalCodeName
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>
#*<div class="element dark">
<label id="lblbw">
COLOR + B/W
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
#*<div class="element">
<label id="lblwhite">
BLACK & WHITE
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
</div>
</div>
}
}
I want to use where condition with foreach loop instead of if condition but unable to do that. Kindly help me with the solution as I am stuck at this point.
You can use where in Model as
#foreach (var item in Model.Where(c=>c.GlobalCodeCategoryValue == "115"))
{
<div class="form-group">
#*<h6 >PICTURE FORMAT:</h6>*#
<h6>#item.GlobalCodeCategoryName</h6>
<div class="checkboxs round">
<div class="element">
<label id="lblcolor">
#*COLOR*#
#item.GlobalCodeName
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>
#*<div class="element dark">
<label id="lblbw">
COLOR + B/W
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
#*<div class="element">
<label id="lblwhite">
BLACK & WHITE
<input type="checkbox" name="closed" value="closed">
<span class="checkmark"></span>
</label>
</div>*#
</div>
</div>
}
I would like to align 2 control group with jQuery Mobile. I use the the version 1.4.2.
This is what I have : http://i.stack.imgur.com/qEAav.png
And this is what I would like to do : http://i.stack.imgur.com/NA9YR.png
My currently code is :
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie" align="center">
Fermer la liste
</br>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');">
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');">
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');">
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');">
<label for="loadEPT">ETP</label>
</fieldset>
</form>
</div>
</h3>
If there are pro jQuery Mobile I'll glad to solve my problem.
Thanks in advance.
See if this works for you:
<h3 class="ui-bar ui-bar-a ui-corner-all">
<div id="btnPaie">
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid2">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif2" value="" checked="checked" onclick="selectorFunctionPaie('effectif');" />
<label for="loadEffectif2">Effectif</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEPT" value="" onclick="selectorFunctionPaie('etp');" />
<label for="loadEPT">ETP</label>
</fieldset>
</form>
<form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid1">
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadEffectif" value="" checked="checked" onclick="selectorFunctionPaie('age');" />
<label for="loadEffectif">Age</label>
<input type="radio" class="input-small" name="radio-choice-h-2" id="loadAnciennete" value="" onclick="selectorFunctionPaie('anciennete');" />
<label for="loadAnciennete">Ancienneté</label>
</fieldset>
</form>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="controlgroupPyramid3">
Fermer la liste
</fieldset>
</div>
</h3>
CSS to line things up and add spacing:
#btnPaie {
text-align: center;
}
#btnPaie form, #btnPaie fieldset {
display: inline;
}
#btnPaie fieldset {
margin: 1em;
}
DEMO
I want to group certain checkboxes and make them collapsible as well as select/unselect all.
HTML
<div style="padding-left: 5px; padding-right: 5px">
<fieldset data-role="controlgroup">
<input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
<label for="land">Land Parcels</label>
<input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
<label for="road">Roads</label>
<input autocomplete="off" type="checkbox" name="layers" id="rail" class="layers" checked="checked"/>
<label for="rail">Railroads</label>
input autocomplete="off" type="checkbox" name="layers" id="lake" class="layers" checked="checked"/>
<label for="lake">Lakes</label>
<input autocomplete="off" type="checkbox" name="layers" id="points" class="layers"/>
<label for="points">AMIS Points</label>
<input autocomplete="off" type="checkbox" name="education" id="education" class="layers"/>
<label for="education">Education</label>
<input autocomplete="off" type="checkbox" data-mini="true" name="education" id="childcare" class="layers"/>
<label for="childcare">Child Care</label>
<input autocomplete="off" type="checkbox" data-mini="true" name="education" id="highschool" class="layers"/>
<label for="highschool">High School</label>
<input autocomplete="off" type="checkbox" name="layers" id="stormpipes" class="layers"/>
<label for="stormpipes">Storm Pipes</label>
</fieldset>
</div>
JQuery
$(document).ready(function () {
fixContentHeight();
$('.layers').click(changeLayers);
});
function changeLayers () {
var checked = [];
$('.layers').each(function () {
if ($(this).attr('checked')) {
checked.push($(this).attr('value'));
}
});
mainLayer.params.LAYERS = checked.join(",");
mainLayer.redraw();
}
$('#education').click(function() {
$("INPUT[type='checkbox']").attr('checked', $('#education').is(':checked'));
});
Trying to make child care and high school collapisble within the education checkbox.
You could use an unordered list with data-role="listview", add data-role="collapsible" to the li elements, and nest another unordered list with each checkbox inside the inner list's li
<ul data-role="listview">
<li data-role="collapsible">
<h3>Title of collapsible row</h3>
<ul data-role="listview">
<li>
<input autocomplete="off" type="checkbox" name="layers" id="land" class="layers" checked="checked"/>
<label for="land">Land Parcels</label>
</li>
<li>
<input autocomplete="off" type="checkbox" name="layers" id="road" class="layers" checked="checked"/>
<label for="road">Roads</label>
</li>
</ul>
</li>
</ul>
The margins and paddings will look a bit weird, but you can just tweak the css to fix that
I have a problem with jQuery Mobile 1.1.0 accordion ( http://jquerymobile.com/test/docs/content/content-collapsible.html )
I have a page with more accordion, and when I press to open / close the section brings me back to the top of the page.
I have already set:
ajaxEnabled: false;
hashListeningEnabled: false;
linkBindingEnabled: false;
this is my code:
<!-- anagrafica -->
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="c">
<h3>Scheda cliente</h3>
<!-- Dati azienda -->
<div data-role="collapsible" data-collapsed="true" data-content-theme="c" class="grid-scheda">
<h3>Anagrafica</h3>
<form id="dati-azienda">
<div data-role="fieldcontain">
<label for="ragionesociale">Ragione Sociale:</label>
<input type="text" name="ragionesociale" id="ragionesociale" class="required fullsize" />
</div>
<div data-role="fieldcontain">
<label for="indirizzo">Indirizzo:</label>
<input type="text" name="indirizzo" id="indirizzo" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="localita">Località:</label>
<input type="text" name="localita" id="localita" class="large" />
<input type="text" name="cap" id="cap" class="small" placeholder="CAP" />
</div>
<div data-role="fieldcontain">
<label for="pi">Partita IVA:</label>
<input type="number" name="pi" id="pi" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="fisso">Fisso:</label>
<input type="number" name="fisso" id="fisso" class="medium" />
<input type="number" name="fax" id="fax" class="medium" placeholder="Fax" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<!--
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Altre sedi:</legend>
<input type="checkbox" name="checkbox-0" style="margin-top:0px;" id="checkbox-mini-0" data-mini="true" />
<label for="checkbox-mini-0">Si</label>
</fieldset>
</div>
-->
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-azienda" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati Azienda -->
<!-- Dati Referente -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Dati Referente</h3>
<form id="dati-referente">
<div data-role="fieldcontain">
<label for="cognome">Referente:</label>
<input type="text" name="cognome" id="cognome" class="small2" placeholder="Cognome" />
<input type="text" name="nome" id="nome" class="small2" placeholder="Nome"/>
<input type="text" name="dt_nascita" id="dt_nascita" class="small2" placeholder="Data nascita"/>
</div>
<div data-role="fieldcontain">
<label for="posizione">Posizione:</label>
<input type="text" name="posizione" id="posizione" class="medium" />
<input type="text" name="reperibilita" id="reperibilita" class="medium" placeholder="Reperibilità" />
</div>
<div data-role="fieldcontain">
<label for="mobile">Mobile:</label>
<input type="number" name="mobile" id="mobile" class="medium" />
<input type="number" name="fisso" id="fisso" class="medium" placeholder="Fisso" />
</div>
<div data-role="fieldcontain">
<label for="mail">Mail:</label>
<input type="text" name="mail" id="mail" class="fullsize" />
</div>
<div data-role="fieldcontain">
<label for="referente2">Referente alternativo:</label>
<input type="text" name="referente2" id="referente2" class="fullsize" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="dati-referente" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /Dati referente -->
<!-- caratteristiche -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Caratteristiche</h3>
<div data-role="fieldcontain">
<label for="x">Consistenza attiva:</label>
<input type="text" name="x" id="x" class="small" />
</div>
</div><!-- /caratteristiche -->
<!-- registrazione -->
<div data-role="collapsible" data-content-theme="c" class="grid-scheda">
<h3>Registrazione 190</h3>
<form id="registrazione">
<div data-role="fieldcontain">
<label for="userid">User ID:</label>
<input type="text" name="userid" id="userid" class="small2" />
<input type="text" name="passw" id="passw" class="small2" placeholder="Password" />
<input type="date" name="dt_registrazione" id="dt_registrazione" class="small2" />
</div>
<?php for($i=1;$i<=2;$i++) { ?>
<div data-role="fieldcontain">
<label for="analisi_ft_num">Analisi Fattura:</label>
<input type="text" name="analisi_ft_num[]" id="analisi_ft_num" class="medium" placeholder="Nr. Fattura" />
<input type="date" name="dt_doc[]" class="medium" />
</div>
<?php } ?>
<div data-role="fieldcontain">
<label for="codice_cliente">Codice Cliente:</label>
<input type="text" name="codice_cliente" id="codice_cliente" class="medium" />
<input type="text" name="ciclo_fatturazione" id="ciclo_fatturazione" class="medium" placeholder="Ciclo Fatturazione" />
</div>
<fieldset class="ui-grid-a">
<label> </label>
<div class="ui-block-b"><button rel="registrazione" type="submit" class="submit submitBTN" data-theme="b">Salva</button></div>
</fieldset>
</form>
</div><!-- /registrazione -->
</div>
<!-- /anagrafica -->
Thanks in advice
It is not very clear as to what exactly the interface is supposed to look like. However, please look at the documentation: http://jquerymobile.com/demos/1.1.0/docs/content/content-collapsible-set.html
The link you pasted is for a test demo, but the syntax seem to have changed since then.
I am working in .NET, VB Razor MVC4 with JQueryMobile.
My issue is in trying to get the #Html.RadioButtonFor to generate properly formatted HTML to get picked up by the JQuery Mobile.
This code:
#For Each fqi In Model.Options
#<label for="#fqi.Id">#fqi.Text</label>
#<input type="radio" name="#fqi.Name" id="#fqi.Id" value="#fqi.Value" checked="#fqi.Checked"/>
Next
Generates:
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-left ui-btn-up-d" for="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Yes</span>
</span>
</label>
<input id="rb-yes_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="Yes" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-corner-right ui-controlgroup-last ui-btn-up-d" for="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" data-theme="d">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
<span class="ui-btn-text">No</span>
</span>
</label>
<input id="rb-no_8e3b50fa-5d47-4d42-8c0c-dba8f840fedb" type="radio" checked="False" value="No" name="8e3b50fa-5d47-4d42-8c0c-dba8f840fedb">
</div>
But I cant get this code right:
#For Each fqi In Model.Options
#Html.LabelFor(Function(m) m.CurrentValue, fqi.Text)
#Html.RadioButtonFor(Function(m) m.CurrentValue, New with {.value = fqi.Value, .name=fqi.Name, .checked=fqi.Checked})
Next
It is rendering as:
<div class="ui-radio">
<div class="ui-radio">
<label class="ui-btn ui-radio-off ui-input-text ui-corner-left ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">
<span class="ui-btn-inner">
</span>
</span>
</label>
<label class="ui-btn ui-radio-off ui-input-text ui-corner-right ui-controlgroup-last ui-btn-up-d" for="Questions_1__CurrentValue" data-theme="d">
<span class="ui-btn-inner">
<span class="ui-btn-text">
<span class="ui-btn-inner ui-corner-right ui-controlgroup-last">
</span>
</span>
</label>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = No, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>
<input id="Questions_1__CurrentValue" type="radio" value="{ value = Yes, name = 8e3b50fa-5d47-4d42-8c0c-dba8f840fedb, checked = False }" name="Questions[1].CurrentValue">
</div>