When box is checked make a drop down readonly or uneditable in Rails - ruby-on-rails

I have a drop down box in ruby on rails that allows a date to be entered. And there is a box beside it to indicate that no date will be entered.
When this box is ticked it changes the default value of the date to nil. However the user can still enter a date on the drop down boxes.
When the box is ticked I want the drop down to be readonly or uneditable how can I do this?
EDIT
function BlankOutStartDates() {
if (document.getElementById("service_unknown_start_date").checked == true)
{
document.getElementById("service_start_date_1i").selectedIndex = 0;
document.getElementById("service_start_date_2i").selectedIndex = 0;
document.getElementById("service_start_date_3i").selectedIndex = 0;
}
}
I want to add the addition javascript to make the drop down box read only if the box is ticket

I would actually do this in jQuery. Suppose your checkbox has class "no-date", and your select boxes all of the class "date-select". Then you could do this:
jQuery(".no-date").change(function(){
//Check if the box is checked
if(this.is(':checked')){
jQuery(".date-select").attr("disabled", "true");
} else {
jQuery(".date-select").removeAttr("disabled");
}
});
You'll want to double check "this.is(':checked')" is correct, but I think that will work.
This uses the "disabled" parameter of select tags: http://www.w3schools.com/tags/tag_select.asp

Related

How to set different select items in Vaadin Grid Pro's editComponent based on row item

I have Grid Pro displaying Products. A single column is configured as an EditColumn of type 'select' (dropdown/combobox). I'm trying to set the items for this component based on the Product of that row. Is this possible using the 'select' editColumn?
I tried to achieve what I want using the grid's 'addCellEditStartedListener' event, but I can't seems to access the editComponent from CellEditStartedEvent..
thx!
Yes, the this is missing feature in CellEditStartedEvent. As an alternative you can use custom editor in your edit column, as then you have reference to the field you are using, see example
// Use custom editor
EmailField emailField = new EmailField();
emailField.setWidth("100%");
emailField.addThemeName("grid-pro-editor");
grid.addEditColumn(Person::getEmail)
.custom(emailField, (item, newValue) -> {
item.setEmail(newValue);
}).setHeader("E-mail ");
// Use edit started listener to set the field conditionally enabled
grid.addCellEditStartedListener(event -> {
if (!event.getItem().isSubscriber()) {
emailField.setReadOnly(true);
} else {
emailField.setReadOnly(false);
}
});
Full code here: https://cookbook.vaadin.com/grid-pro-conditional-edit

Can Rails Simple Form checkbox label change depending on the checkbox?

I'm new to Rails and not sure if I could have 2 values for the Simple Form checkbox label and change it depending whether the checkbox gets checked. Any help with be greatly appreciated.
You will need to use javascript to dynamically change the form.
//with jQuery
var checkbox = $("#theCheckboxId");
checkbox.change(function(event) {
var checkbox = event.target;
if (checkbox.checked) {
//Checkbox has been checked
} else {
//Checkbox has been unchecked
}
});

Is it possible to disable chosen.js for a specific select box?

Given a certain event (say, a button click), I'd like to disable Chosen.js for a specific select box.
Is this possible?
I had a similar requirement although it didn't require a button click, I just wanted to enable / disable Chosen for specific select boxes.
My solution is for each select element that you don't want to use Chosen with, add the CSS class 'no-chzn'. Then in chosen.jquery.js, add the following lines to the constructor (this is near line 533 in version 1.1.0):
$.fn.extend({
chosen: function(options) {
if (!AbstractChosen.browser_is_supported()) {
return this;
}
return this.each(function(input_field) {
var $this, chosen;
$this = $(this);
if ($this.parent().hasClass("chosen-disable")) { return; } // Just add this line!
chosen = $this.data('chosen');
if (options === 'destroy' && chosen) {
chosen.destroy();
} else if (!chosen) {
$this.data('chosen', new Chosen(this, options));
}
});
}
});
For example you have a select with class no-chosen and you do this:
$("select:not('.no-chosen')").chosen();
It means it takes all selects except the one with no-chosen class.

how to add standard textbox command to jqgrid context menu

If context menu is added to jqGrid using Custom values to Context Menu Items in JQgrid and text filed inline editing is used, textbox standard context menu is not available, it is replace with jqGrid context menu.
How to add standard textbox context menu commands ( Undo, Cut, Copy, Paste, Delete, Select all ) to jqGrid conext menu or how to show standard context menu for textbox inline editing?
Update
On inline edit, if standard menu is opened by right clicking on yellow background or in autocomplete box and after that standard browser context menu is opened, custom menu is not closed, two menus appear.
How to fix this ?
It's not easy to implement in context menu commands like "Copy", "Paste", ... so I decide to modify my demo from the answer on your previous question. In the new demo the context menu appears only if the page contains no selected text.
The first problem is that the original code of the jquery.contextmenu.js contains the following code fragment:
$(this).bind('contextmenu', function(e) {
// Check if onContextMenu() defined
var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
if (bShowContext) display(index, this, e, options);
return false;
});
So the contextmenu handler return always false and prevent creating of the standard context menu. I fix the code to the following (you can download full modified code here):
$(this).bind('contextmenu', function(e) {
// Check if onContextMenu() defined
var bShowContext = (!!hash[index].onContextMenu) ? hash[index].onContextMenu(e) : true;
currentTarget = e.target;
if (bShowContext) {
display(index, this, e, options);
return false;
}
});
The code of createContexMenuFromNavigatorButtons functions described here I modified
onContextMenu: function (e) {
var rowId = $(e.target).closest("tr.jqgrow").attr("id"), p = grid[0].p, i,
lastSelId;
if (rowId && getSelectedText() === '') {
...
return true;
} else {
return false; // no contex menu
}
}
to use getSelectedText() and to create the context menu only if no text is selected. As the result you will be see your custom context menu only if no text is selected and see the standard context menu (which depend on web browser) if the text selection exist:
UPDATED: I modified my bug report about jquery.contextmenu.js with additional information based on the answer. I hope that the changes will be soon in the main code of jquery.contextmenu.js included in the plugins subdirectory.
UPDATED 2: How you can see here all the fixes are already in the main code of jqGrid on the github and in included in the jqGrid 4.3.
UPDATED 3: If you want to have the standard context menu for all enabled <input type="text" ...>, <input type="textarea" ...> and <textarea ...> elements you should just modify a little the code inside of onContextMenu callback. For example
onContextMenu: function (e) {
var p = grid[0].p, i, lastSelId,
$target = $(e.target),
rowId = $target.closest("tr.jqgrow").attr("id"),
isInput = $target.is(':text:enabled') ||
$target.is('input[type=textarea]:enabled') ||
$target.is('textarea:enabled');
if (rowId && !isInput && getSelectedText() === '') {
...
see one more demo where inline editing will be activate by double-click.

text field in a dialog box on a BlackBerry

I want to create an empty dialog box with a text field inside. When the user enters data inside the box he must be redirected to another screen. I want the Dialog box to come up without any statements but must include a textfield
That should be doable with a PopupScreen, EditField and maybe a ButtonField so the user can let you know he/she is done entering data.
Just create standard OK dialog and then add an EditField to it.
BasicEditField inputField = new BasicEditField();
Dialog d = new Dialog(Dialog.D_OK_CANCEL, "Enter your Username:", Dialog.OK, null, Dialog.DEFAULT_CLOSE);
d.add(inputField);
int i = d.doModal();
if (i == Dialog.OK) {
Dialog.inform("Your Username is : " + inputField.getText());
}
Here's a complete tutorial

Resources