I have a form with two selects, but the second select is optional depending on the value selected from the first. For instance:
<select name="country" from="['US', 'CA']">
<select name="language" from="['FR', 'EN']" disabled=true>
Only if CA was selected from country do I want language combobox active.
Grails doesn't provide a way to do this by default. Since GSP tags allow you to use normal HTML events you would need to write JavaScript to enable and disable the second select based on the value of the first. You will want to look at the onchange event to do this. If you need to do a lot of custom UI type stuff you may want to look at using a JavaScript plugin for Grails. Prototype is included with Grails by default. Several other java script libraries are available as Grails plugins including jQuery and YUI
I agree, javascript is what you want. I'd recommend writing this in JQuery, since Grails is going to making that the default (over Prototype) in, I believe, v1.4. To do this in JQuery it would be something like this:
$("[name=country").change(function() {
$("[name=language]").attr("disabled", ($(this).val() == "CA"));
});
Related
Is it possible to extend rich:select or h:selectOneMenu to enable multiple selection? I am looking for a jsf component which looks like the jQuery Chosen plugin.
The component should let me select multiple options from the drop down.
Please note that I can not use h:selectManyMenu or list box because of the specific requirement.
Note: just saw the tags field below the description box while posting a question. I am looking exactly for the same functionality, except that I want a JSF component, not a js plugin.
Any suggestion is highly appreciated. Thanks in advance.
I would use that jQuery Chosen plugin and do something like this:
use jQuery to apply it to your select
use jQuery to get the selected data
pass the data to the backing bean via a hidden input field
There may be 'pure JSF' ways but it looks like more work. If you find something interesting let me know.
I would like a for loop in jquery using .html()
like this:
.html('<select property="doctype" name="doctype"><%for (String number : list)
{%>'<option value="'<%=number%>'>'<%out.println(number); %>'</option>'<% } %>'</select>');
In Java's for each loop list it uses an object of java.util.ArrayList<String>.
Here the .html(); function will call when we click on add button.
Here my question is it possible to write jsp scriplet code in .html() of jquery.
function will call when we click on add button.
No you can't.
Jsp is compile time.
More over java script plays on client side and jsp playes on server side.
jsp ,jsf and other kinds of java web technologies are rendered on the server side. Since jquery is a client side technology, it's not possible.
Instead, you can make ajax calls via jquery and update the html.
You cannot have the client execute Java in your scriptlet. Fortunately, what you want to do is very common.
Don't try to dynamically generate JavaScript in a scriptlet or jsp. It's very easy to make a mistake and end up with malformed JavaScript.
Instead, use a .jsp to spit out HTML. Then use static JavaScript to grab that HTML and put it where you want in the DOM.
For example, your jsp file could look something like this:
<div id="destination">The select element will be added to this div.</div>
<select id="my-select" property="doctype" name="doctype">
<c:forEach items="${list}" var="number">
<option value="${number}">${number}</option>
</c:forEach>
</select>
<script>
$('#destination').append($('#my-select'));
</script>
Select boxes converted to Select2, do not automatically integrate with unobtrusive validation mechanism in ASP.NET MVC framework.
For example, on a form which contains a regular select box (marked as required in model definition), submitting the form while no options have been selected in the select box, will cause the border and background of the select box to take a reddish color, and by using #Html.ValidationMessageFor, error messages, if any, can be displayed beside the box. However if the select box is converted to a Select2 component, then none of the mentioned features work any more. Even the validation error message will not show up.
It seems that the reason for even the validation error message not showing, is because Select2 changes the display CSS property of the original select box to none (display:none), and I guess the unobtrusive validation script does not bother generating error messages for invisible fields.
Any ideas / solutions?
This issue isn't really specific to Select2, but rather to the jQuery unobtrusive validator.
You can turn on validation for hidden fields as highlighted in this answer.
$.validator.setDefaults({
ignore: ''
});
As the comments noted, it didn't work inside an anonymous callback function within $(document).ready(). I had to put it at the top level.
I've run into similar issues with the select2 plugin. I don't know exactly which features you're using specifically, but in my experience, when you set an element as a select2 in the document.ready event, the plugin will change some of the element's attributes on the fly (inspect one of the elements after your page has finished loading - oftentimes you'll see the id and class properties are different than what you're seeing when you view source).
It's difficult to offer more without actually seeing the code, but here's a few ideas to get you started:
First off, obviously make sure you have the a link to your select2.css stylesheet in the header.
Then, since you're talking about form submissions, I'd recommend you examine whether or not you're getting a full postback or submitting via AJAX (if you're using jQueryMobile, you're using AJAX unless you override it in the jquerymobile.js file or set a data-ajax="false" in your form attributes). You can just look at the value returned by Request.IsAjaxRequest() for this. Obviously if you're submitting via ajax, you won't hit the document.ready event and the select2 won't initialize properly and you'd need to figure out a way around that. Try refreshing the page after the submit and see if it renders the select2 component.
Then I'd suggest examining the elements and see if they're not behaving like you'd expect because you're actually trying to work with classes that the plugin has reassigned at runtime. You can either just adjust your logic, or you can dig into the select2 code itself and change the behavior - it's actually fairly well-documented what the code is doing, and if you hop on the Google group for select2, Igor is usually pretty quick to follow up with questions.
like this
$('select').on('select2:select', function (evt){
$(this).blur();
});
$('body').on('change', 'select.m-select2', function () {
$(this).blur();
})
Is there any way of using jQuery Mobile for only certain features such as toggle on/off switches but not have it take over the entire CSS?
You can use native form elements:
http://jquerymobile.com/demos/1.0rc2/docs/forms/forms-all-native.html
Related:
Tell JQuery Mobile not to add classes?
You can set this per element with a data-role="none" attribute on the element or bind to the mobileinit event like so:
$(document).bind('mobileinit',function(){
$.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar";
});
Notice how you can add classes to the selectors.
From the docs:
Or, if you'd like to prevent auto-initialization without adding
attributes to your markup, you can customize the selector that is used
for preventing auto-initialization by setting the page plugin's
keepNative option (which defaults to [data-role="none"]. Be sure to
configure this option inside an event handler bound to the mobileinit
event, so that it applies to the first page as well as subsequent
pages that are loaded.
Docs on this can be found here: http://jquerymobile.com/demos/1.0rc2/docs/forms/docs-forms.html
This question comes out making use of the HTML helpers in ASP.NET MVC and jQuery. For example, if I define an extension method like the following:
<:% Html.DatePickerFor(x => x.StartDate) %>
I would want it to make use of the jQuery DatePicker. However, this either means I need to manually add to the header the invocation of the DatePicker method (in which case there is no point to the DatePickerFor method), or clutter up the HTML with a whole bunch of script tags that are invoked upon document.ready.
One thought I had was the idea that instead of add the appropriate jQuery UI behavior to a HTML element via Javascript, you could do it via additional attributes, such as the following:
<input id="foo" css="widget-ui-datepicker" widget-alt-field="#fooalt" />
jQuery could then just looks for all elements with the right css class and collect together all the widget-* values and use them to build the "options" that is used to invoke the datepicker method in the first place.
This is the type of idea that could go directly into the widget factory. What are people's thoughts on this?
I typically have this line in my master page:
$(".datepicker").datepicker();
and then just stick the datepicker class on any textbox that I want to use it on.
but it would be a timesaver to have an extension method instead of always writing new { #class: "datepicker" }
I like it.