Hi I am new to grails and GSP
I have a code like
<g:each var="i" in="${typeList}">
<g:if test="${i != null}">
<tr>
<td><input type="checkbox" name="categoryType" id="categoryTypeCB" class="categoryTypeCB" value="${i}"> ${i}</td>
</tr>
</g:if>
</g:each>
How to get the values of checked check boxes in java script
Try to use jQuery. Since Grails 2.0 it's provided by default, you just have to add in your gsp template at the end of head tag with following line:
<r:require module="jquery" />
Or if you do not use resources plugin, include jQuery with following line:
<g:javascript library='jquery' />
And then in a javascript block go with:
<g:javascript>
var checkedCheckboxes = $('.categoryTypeCB:checked');
$.each(checkedCheckboxes, function(index, checkbox) {
var theValue = checkbox.value;
});
</g:javascript>
The each funciton is a loop so you need to handle somehow 'theValue' each iteration. The checkbox argument contains the input element itself if you need it.
BTW. You shouldn't assign the same id for many inputs. It's incorrect. Id has to be unique for each HTML element among document tree.
Related
How can i separate an iterated struts radio button item?
I also tried using some of these
,but probably in the wrong way.
What i wish to do is separate each item from the first iterator (the paths), with a <br> or any separator.
I guess this is happening because the html tags are interpreted first, before the struts tags?
<s:form action="actionConfirmBooking">
<s:iterator var = "pathList" value="results">
<s:iterator var = "flightList" value="pathList">
<s:radio name="flightSelected" list="flightList" listKey = "flightid" id = "flightid" value = "flightid"/>
$$$$$$$$$$$
</s:iterator>*************
</s:iterator>&&&&&&&&
<s:submit label="Submit" />#############
</s:form>
Use theme="simple" to prevent Struts generating additional XHTML code by using the default theme (XHTML):
<s:form action="actionConfirmBooking" theme="simple">
...
</s:form>
Is there a way to do a loop in Thymeleaf without a list?
I'd like to essentially convert this snippet to Thymeleaf:
<jsp:useBean id="now" class="java.util.Date" />
<fmt:formatDate var="year" value="${now}" pattern="yyyy" />
<c:forEach var="i" begin="0" end="99">
<form:option value="${year-i}" />
</c:forEach>
</form:select>
-- Update --
I've decided this is along the lines of how I want to do it, but I'm not sure about the springEL syntax:
<option th:each="i : ${#numbers.sequence( 1, 100)}" th:value="#{ T(java.util.Date).getYear() - $i }">1</option>
In case you are still looking for the correct SpEL syntax,
here's what worked for me:
<option th:each="i : ${#numbers.sequence( 1, 100)}"
th:value="${ (new org.joda.time.DateTime()).getYear() - i }"
th:text="${ (new org.joda.time.DateTime()).getYear() - i }">1</option>
Notice:
added th:text to set the option text.
used Joda-Time instead as java.util.Date wouldn't give me the desired outcome
Read this discussion on java.util.Date and getYear()
You can use the special thymleaf iteration variable inside the each block.
This special variable name is the name of your element variable concatenate with the keyword 'Stat' (ex: elt -> eltStat)
This variable gives you many information related to the iteration.
You can also specify this variable name after your element variable. For example:
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
More information in the official documentation below:
http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#keeping-iteration-status
With knockoutjs and jquery mobile, I need to create a list of checkboxes from an array. It seems the checkbox list is rendered, but it did not respond to click. http://jsfiddle.net/9zx7F/
I used a fieldset tag with data-role of controlgroup to build the list. I tried ul with listview as well, same issue.
Edit: further details - I found it seems related to timing of ko.applyBindings happens. I created a page with same code running on my localhost, it was okay. Then added a timer around ko.applyBindings, the issue happened again. http://jsfiddle.net/gonglei/9zx7F/12/
I solved this with two steps;
1) unwrapping the label from the input and hooking them together with 'for' attribute
<input type="checkbox" data-role="checkbox" data-bind="uniqueName: true, uniqueID: true, value: ID />
<label data-bind="uniqueIDFor: true" >Click me</label>
ko.bindingHandlers.uniqueIDFor = {
init: function (element) {
element.setAttribute("for", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
ko.bindingHandlers.uniqueID = {
init: function (element) {
element.setAttribute("id", "ko_unique_" + ko.bindingHandlers.uniqueName.currentIndex);
}
};
2) telling jqm to update the new content
$('input:checkbox').trigger('create');
I would change the model for this:
<!-- ko foreach: listItems-->
<input type="checkbox" name="itemsList" value="name" />
<span data-bind="text: name"></span>
<!-- /ko -->
the main thing to consider is the "value" property in the input control to render in the proper way.
Regards.
#tredder's solution works! Here's a fork of your fiddle using the attr data-bind attribute to bind the label, which to me looks cleaner: http://jsfiddle.net/aib42/AnKR6/
<s:iterator value="podTemplate.subTypeTemplates" status="subTemplate">
<s:textfield id='subType_type_#subTemplate.index' key="subType" label="Name"/>
</s:iterator>
#subTemplate.index is not getting replaced by index. However if I am doing
<s:property value="#subTemplate.index"> is working
That's because id attribute of textfield is of string type and string-type attributes are not interpreted as OGNL by default. As Steven said you have to force the interpretation by using %{} in your case subType_type_%{#subTemplate.index}.
My iterator looks like this:
<s:iterator id="list" value="optionList" status="rowStatus" >
I tried:
<td>
<input class="textInput required"type="text" name="optionList[${rowStatus.index}].option_id"/>
</td>
and it's the only one that worked.
All the following ones failed:
name="optionList[%{#rowStatus.index}].option_id"
name="%{optionList[#rowStatus.index].option_id}"
even
name="%{#rowStatus.index}"
I know this may have something to do with the phase each one comes in at.
If I do this.
<ui:repeat id="repeatChart" varStatus="loop" value="#{viewLines.jflotChartList}" var="jflotChart">
<p:panel>
<jflot:chart height="300" width="925" dataModel="#{jflotChart.dataSet}" dataModel2="#{jflotChart.dataSet2}"
xmin="#{jflotChart.startDateString}"
xmax="#{jflotChart.endDateString}"
shadeAreaStart ="#{jflotChart.shadeAreaStart}"
shadeAreaEnd ="#{jflotChart.shadeAreaEnd}"
lineMark="#{jflotChart.wrapSpec.benchmark}" yMin="#{jflotChart.yMin}" yMax="#{jflotChart.yMax}" />
</p:panel>
<br />
</ui:repeat>
My code will not work. Debugging the javascript shows that the same id is generated for every iteration. I've tried putting loop.index to create an id and that gives me an error saying that id can't be blank.
If I exchange the ui:repeat for a c:forEach it works fine. Debugging the javascript shows that a new id is created for each iteration.
Here is my backing code(some of it).
<div id="#{cc.id}_flot_placeholder" style="width:#{cc.attrs.width}px;height:#{cc.attrs.height}px;">
<script type="text/javascript">
//<![CDATA[
$(function () {
var placeholder = $("##{cc.id}_flot_placeholder");
var overviewPlaceholder = $("##{cc.id}_flot_overview");
The id needs to be different so the javascript can render to the correct div. I've tried explicitly defining an id attribute and then passing that as the id in the client code. Like I said before that doesn't work. Thanks for any help.
**EDIT**
Here is my problem. I can't use the clientId in the div tag because of the colon character obviously. I have modified it in javascript but how would I get that value to the div. I can't get the div tag by id because I need to generate the id. I can't seem to do a document.write() either. I'm stuck at this point.
<composite:implementation>
<div id="#{cc.clientId}_flot_placeholder" style="width:400px;height:400px;">
<script type="text/javascript">
//<![CDATA[
$(function () {
var clientIdOld = '#{cc.clientId}';
var clientId = clientIdOld.replace(':', '_');
var placeholder = $('#'+clientId+'_flot_placeholder');
var overviewPlaceholder = $('#'+clientId+'_flot_overview');
I did a quick test on local environment (Mojarra 2.0.4 on Tomcat 7.0.11). Using #{cc.clientId} gives you an unique ID back everytime.
<ui:repeat value="#{bean.items}" var="item">
<cc:test />
</ui:repeat>
with
<cc:implementation>
<div id="#{cc.clientId}_foo">foo</div>
</cc:implementation>
Here's the generated HTML source:
<div id="j_idt6:0:j_idt7_foo">foo</div>
<div id="j_idt6:1:j_idt7_foo">foo</div>
<div id="j_idt6:2:j_idt7_foo">foo</div>
This should be sufficient for your functional requirement. You might only want to escape the default separator : or to replace it by a custom separator since it's a reserved character in CSS selectors.
Update: so you want to escape it, you should then replace : by \: and not by _.
var clientId = clientIdOld.replace(/:/g, '\\:');
(the /:/g is a regex which ensures that all occurrences will be replaced and the double slash is just to escape the slash itself in JS strings, like as you normally do in Java strings)