Does anybody know how to remove the tooltip in Grails 2.0.4? Currently all my mandatory fields shows a tooltip. I am trying to create a UI without the tooltip. I am using jQuery and jQueryUI.
Is there anyway that I could remove the tooltip? I think the tooltip is set by default in Grails 2.0.4.
Thanks.
you could use jQuery to remove the title attribute like so...
$(document).ready(function() {
$('[title]').removeAttr('title');
});
I think this is html 5 related. Do the fields have "required" in the tags (which I know grails puts in by default when performing scaffolding)? If so, the browser will check that those fields are filled in and prompt the user if they are not before submission. This was driving me bonkers trying to figure out what was going on.
Related
I'm encountering an issue using the YADCF date filter for DataTables with the Bootstrap-Datetimepicker styling option. The issue is that the Months/Years/ are overflowing from the dropdown container. The weird part is that the actual date selection looks fine. I've included some screenshots below.
This is what the month selection looks like, the year selection looks the same way.
However, the date selection looks normal, like this:
I have other date picker drop downs throughout my app that look normal:
Initializing the date filter field as so:
yadcf.init(tableElement.DataTable(), [
{ column_number : 11,
filter_type: "range_date",
datepicker_type: 'bootstrap-datetimepicker',
date_format: 'YYYY-MM-DD',
filter_container_id: 'yadcfDateDiv'
}]);
I just can't seem to figure out what styling property is needed to resolve this. I've tried adjusting the padding/margins (as suggested in other posts I've found) of the months and such but it just makes them closer together, not below each other like the last screenshot. If anyone has any ideas it would be greatly appreciated.
Versions
YADCF: 0.9.4
DataTables: 1.10.16
Eonasdan/bootstrap-datetimepicker 4.7.14
After digging through the Eonasdan/bootstrap-datetimepicker documentation, I discovered that the DateTimePicker plugin has a WidgetParent option that can be used to set the parent element in which the widget will reside.
Since I am initializing the DateTimePicker plugin through YADCF and passing in a custom filter_container_id, I found that if I also passed that same element to the WidgetParent property it will display as intended.
I have added the following code to my DataTable initialization function for the page which has resolved this issue:
$('input[id^="#yadcf-filter--orders-datatable"]').data("DateTimePicker").options({
"widgetParent": '#yadcfDateDiv'
});
It selects both of the input fields that are generated by the YADCF plugin which the DateTimePicker objects are bound to and sets the appropriate parent element.
Hopefully this helps some future Googler.
I came across this site:
https://tutorials.railsapps.org/rails-tutorial
And was wondering if someone could explain how the buttons would be set up to filter?
I guess I'm curious also - is an object being displayed and filtered? What is going on here?
What you're seeing is not Rails but Javascript.
When you click the 'Beginner' button, it has an attribute data-toggle="Beginner" and uses javascript to show only the elements below that have a class Beginner.
It would look something like this using jQuery in coffeescript:
$('.filters li[data-toggle]').on 'click', ->
toggle = $(this).data('toggle')
$("div.tutorial:not(.#{toggle})").hide()
$("div.tutorial.#{toggle}").show()
To serve up the html classes would be Rails' job.
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.
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();
})
I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?