OSnippets / Simulate a "disabled" field

All blog posts, code samples and downloads licensed under Apache License 2.0.

Simulate a "disabled" field

Oliver Busse on 02/24/2014 20:09:59 GMT, filed under XSP

Today I got a discussion response to my OpenNTF projekt "FileSilo" regarding the readers and authors fields in a file collection (http://www.openntf.org/main.nsf/project.xsp?r=project/FileSilo/discussions/BDE4046AFC35F4B486257C890055DB97).

In the collection form I defined two fields as "disabled" using custom attributes. I chose the "disabled" to get a non -editable field in edit mode as those fields must not be filled by the user directly but only with the namepicker.

Ingo Weidinger discovered a problem (thank you!): the disabled items are not stored in the document (for sure). I admit that I never tested that after that change (shame upon me) but: hail to the users of OpenNTF this problem was found! And now I show you a solution to somewhat "simulate" the "disabled" experience to a field in your form without getting into trouble.

The "ingredients" are:

jQuery
CSS
some knowledge of using CSS classes

If you are using Bootstrap (in this case I do for this application) you are already using jQuery for sure. So you can achieve the disired behavior of a disabled field not to be focused by adding this to your Javascript (e.g. in the document.ready function):

// Javascript
$(document).ready(function(){
		$(".disabled").focus(function(){
		$(this).blur();
	})
})

/* CSS */
.disabled {
	background-color: #eee;
	cursor: not-allowed;
}

<!-- XSP markup -->
<xp:inputText value="#{document1.fileReaders}" id="fileReaders1"
multipleSeparator="," multipleTrim="true" styleClass="form-control disabled">
</xp:inputText>

I assume the "disabled" field to have the CSS class "disabled" applied.

This prevents the cursor to be set into the field (even with TAB).

Now to the styling: add this to your CSS to get the native styling from Bootstrap for disabled fields.

As these tweaks are only CSS/JS-based the field will be stored in the document as it does not have the "real" disabled attribute.

Tagged with xpages css javascript jquery bootstrap