I'm new to all this so please bear with me.
I've been using some jQuery UI widgets and I'm wanting to create category (adults) radio buttons with their own set of subcategories (children) that only appear when the appropriate adult is selected.
Here's the code I have so far: http://jsfiddle.net/99azd/
The problem is only the formatting of the initial set of children work, the others show up as plain checkboxes. I think it has something to do with the div id="format" but I'm not sure.
<div style="display: none;" id="Adult1Children">
<div id="format">
<input type="checkbox" id="child1" value="child1"/><label for="child1">child1</label>
<input type="checkbox" id="child2" value="child2"/><label for="child2">child2</label>
</div>
</div>
Got some help from the IRC channel - here's the fixed code:
http://jsfiddle.net/w6qFC/
I had a duplicated id "format" so it only ran the first one. All I had to do was change the id to a class instead and then in the js change from #format to .format. Simple.
$( ".format" ).buttonset();
and
<div class="format">
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
I'm using jQuery mobile and Knockout JS (latest versions of both).
I cannot seem to style a horizontal list after knockout updates the dom.
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
3G
SD
HD
HD+
/div>
The "Static" looks good, but the "dynamic" is not styled by jQuery mobile. I've tried several methods of trying to make this work, and I am missing something... after knockout runs, I do:
$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});
But here is what it looks like:
Thoughts?
After appending new items, use the below code.
$('[data-role="controlgroup"]').controlgroup().trigger('create');
Note: Creating completely new controlgroup doesn't get enhanced corners dynamically. However, appending new items into existing controlgroup corners get enhanced. This problem can be solved by adding ui-first-child and ui-last-child classes.
$('[data-role="controlgroup"] a').first().addClass('ui-first-child');
$('[data-role="controlgroup"] a').last().addClass('ui-last-child');
Demo
Turns out with Knockout you need to remove the controlgroup from the div so you dont get the "empty wrapper". So the dynamic code looks like:
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
and then on page load, you can call
$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');
and this works. Thanks to Omar for the help on the first/last rounded classes tip!
In my application i use twitter bootstrap to add nice icons to buttons etc. With normal buttons and links i can achieve this by doing..
<g:remoteLink .. code omitted .. class="btn">
<i class="icon icon-warning-sign"></i> <g:message code="default.button.add.label"/>
</g:remoteLink>
This results in a nice button with a icon in front of the text..
Now i want to use a submitToRemote:
<g:submitToRemote .. code omitted .. value="${message(code: 'default.button.add.label')}" class="btn"/>
But i seem to fail in adding the
<i class="icon icon-warning-sign"></i>
to the value.. any hints or tips on how to achieve this?
I tried several things like putting this style in the class attribute but this also fails.
Any hints?
submitToRemote generates an <input type="sbumit" ... /> tag (source code), which does not easily lend itself to what you're hoping to do (value is expected to be a plain string, not markup).
One alternative might be to use formRemote instead of submitToRemote, along with a <button> that includes your icon markup:
<g:formRemote action="..." update="...">
...
<button type="submit" ...><i class="icon icon-warning-sign"></i> Text...</button>
</g:formRemote>
I have learned how one can open jQuery UI dialogs via KnockoutJS custom bindigns as answered in this question: integrating jquery ui dialog with knockoutjs
If my dialog has an input text field, how can I access data from it upon dialog close to alter the main view model based on the text filed contents? What is the general idea and even handler code place?
This is pretty straightforward. Just put an input in your dialog div with a value binding. Same as you would capture input from any binding. Here is the fiddle from that answer with an input binding.
<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog
<input data-bind="value: dialogEntry" />
</div>
Just make both fields bind to the same knockout js observable. Then they will always be the same values.
<a href="#popupLogin" class="site_title" data-position-to="window" data-rel="popup" data-bind="text:Title">
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<input type="text" data-bind="value:Title" />
</div>
When you change the text in the modal and click away or close it in some fashion you will see that the value in the other input will have changed as well.
I would like to put a nice little data-icon="star" on some chekbox labels of a group of checkboxes. Is there a way to do so using jQuery data-icon or should I just do it directly in the CSS (in which case how do I get the same rendering as the one of data-icon?).
In a dream world, here is what would work:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' data-icon='star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>
Thanks a lot for your help
You would have to use your own custom CSS or JS to do this, data-icon only works with a tags per the documentation: http://jquerymobile.com/test/docs/buttons/buttons-icons.html
This is even more tricky because the icon's are entered as styled spans which is exactly how the jqm checkbox is rendered - they both use the ui-icon for some base styling and positioning.
If you tried to use a jquery function to append it after the jqm styling has worked its magic like so: http://jsfiddle.net/shanabus/zt7cP/1/ - but again, the styling conflicts with the actual checkbox, but the functionality of the checkbox is still there.
Hope this gets you going in the right direction.
I am not sure if this is only available in the latest jQuery mobile (1.4.5) but you can just add ui-icon via the "class" attribute. So for this example it would look like this:
<div data-role='fieldcontain' data-mini='true'>
<fieldset data-role='controlgroup'>
<input type='checkbox' name='cb1' id='cb1' />
<label for='cb1' class='ui-icon-star'>special</label>
<input type='checkbox' name='cb2' id='cb2' />
<label for='cb2'>normal</label>
</fieldset></div>