Using jsTree (3.1.0+) with checkbox plugin is it possible to allow not all checkboxes to check - disable some of them?
I found solution for old versions of jsTree here jstree disable checkbox but it didn't work on jsTree 3.1.0+ versions.
Solution of hiding checkbox jsTree Hide Checkbox is working, but if I click on the folder, hidden checkbox will be checked anyway.
Thanks.
Keep in mind unless you are using checkbox.tie_selection as false, selecting and checking are the same thing.
So you can simply call .disable_node() on the nodes you want disabled.
EDIT: Use the latest code from the repo (note - not 3.1.1, but the latest code):
https://github.com/vakata/jstree/archive/master.zip
You can now specify the checkbox_disabled state:
<div id="jstree">
<ul>
<li data-jstree='{"checked":true}'>checked</li>
<li data-jstree='{"checkbox_disabled":true}'>checked</li>
</ul>
</div>
In JSON too of course:
{ "id" : "Test node", "state" : { "checkbox_disabled" : true } }
You can also change the disabled state of a checkbox at runtime using enable_checkbox(node) and disable_checkbox(node).
To completely hide checkbox from the specific node, add following JS code
$('#tree_2').on('ready.jstree', function () {
$("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
$("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";
....
});
and in CSS, add the following style
.no_checkbox > i.jstree-checkbox {
display: none;
}
It will completely hide checkbox from provided node id, this worked like a charm for me. Thanks to this link.
Related
I am implementing jsTree with grid and checkbox plugin. All is working fine, but if I set jsTree a_attr.href, then it is conflicting with checkbox events.
So when I click on node - it should follow the link, if I click on checkbox - it should be marked. What I am doing wrong?
I created jsFiddle. But in this fiddle href attribute of link doesn't work.
Thanks!
jsTree will never follow the links, you have to redirect the user manually. To achieve that you need to decouple selection and checkboxes, so that checking a node does not select the node. Here is a demo: http://jsfiddle.net/dhskgky0/3/
The key is the checkbox config:
checkbox: {
//keep_selected_style:false,
tie_selection : false,
whole_node : false
},
Keep in mind you have to use a newer version (this demo uses 3.1.0) as the tie_selection option was not available in v.3.0.2 that you were using.
I have multiple fields including text,checkbok box, drop-down etc in jsf form, which is showing values from DB.I would like the submit button to be disabled by default and to only be clickable if the user made changes to any of the fields in the form. Please help !!
For a simple form you can use this jQuery plugin that a user mentioned here.
Edit:
The plugin is quite simple to use, and powerful, because for example you will have your buttons disabled again if you revert changes inside an input field.
Just make sure that you include the js file:
<h:outputScript name="path/jquery.are-you-sure.js"/>
And for using it, you have to add the line:
$('#idofyourform').areYouSure();
After that, for enabling and disabling submit buttons you have to add:
//All disabled by default
$('#idofyourform').find('button[type="submit"]').attr('disabled', 'disabled');
//Enabled all when there are changes
$('#idofyourform').bind('dirty.areYouSure', function () {
$(this).find('button[type="submit"]').removeAttr('disabled');
});
//Disable all when there aren't changes
$('#idofyourform').bind('clean.areYouSure', function () {
$(this).find('button[type="submit"]').attr('disabled', 'disabled');
});
Both codes inside your document ready function.
Note that I used button[type="submit"], which is what p:commandButton renders by default. You can use input if it's your case.
NOTE: This plugin also adds an extra functionality the OP didn't ask for (the dialog check when you navigate without saving changes). You can disable this if you want by doing:
$('#idofyourform').areYouSure( {'silent':true} );
Not tested, but I would simply use something like this :
$(document).ready(function() {
$('#formId input[type="submit"]').attr('disabled','disabled');
$('#formId').change(function(){ $('#formId input[type="submit"]').removeAttr('disabled'); });
});
If you don't use any jQuery functions already in the view (any PrimeFaces ajax buttons for example), you might need to add :
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I have a page with several TinyMCE (v4) editors, which all work great ... until I try and add:
inline: true
to their configuration. When I do that the inline-ing part works great (the toolbar is gone, then appears when I focus the editor), but for some strange reason the editor stops working at that point. Inside the editor I see:
<br data-mce-bogus="1">
but I can't edit that text, or add new text, or do anything at all really with the editor.
I can make the editor work again if I remove inline: true, but I really want the inline effect. Does anyone have any idea how I can get inline without breaking my editors?
Actually, the "bogus" br tags appear for inline divs, too. They are added whenever the input field is empty. There appears to be no easy way to get rid of them. I use a CSS rule during the preview phase:
br[data-mce-bogus="1"] {
display:none;
}
And then strip them out if they make it to the server when the user tries to save.
I recently had this problem, inline: true would not work with a textarea. I change mine to a div and it now works as expected.
Are you using the tinymce jQuery package? The same thing was happening to me until I tried using the normal tinymce package instead.
<script>
$(document).ready(function () {
$("#comment").ready(function () {
$("#comment").val("")
})
})
</script>
I add this jquery script in html to solve this bug.
Add this snippet to your CSS file. That would prevent video bogus.
[data-mce-bogus="all"] {
display:none;
}
I've just upgraded my TinyMCE to version 4, which seems to have a tooltip by default.
How can I disable/hide the tooltip that appears on mouse-over on any tool-bar item?
I've been searching for any possible solution, but so far, I have found nothing in the official documentation. What I found in the development tinymce.js file (uncompressed version) is that tooltip is hardcoded and set to be included every time.
I tried different things to disable the tooltip, by so far, the easiest and safest way I came up with is by using CSS, include this bit of code in the main css file to hide the tooltip forever:
.mce-widget.mce-tooltip {
display: none !important;
}
This solution avoids using Javascript/jQuery, and also avoids modifying the source file tinymce.js.
I fiddled around and found a dynamic solution using JQuery and tinyMCE 4.x. This solution allows you to enable/disable tooltips inside tinyMCE:
tinymce.init({
...
init_instance_callback : function() {
$("head").append("<style> .mce-tooltip{ display: none; } </style>");
},
...
It does change the class mce-tooltip after tinyMCE is initialised (init_instance_callback). Set 'display: block;' if you want to display the tooltips again. Its not the nicest solution, I know, but it works.
You can access the button instance and set its rendered state to false:
var controlIds = editor.theme.panel.rootControl.controlIdLookup;
for (let i in controlIds) {
if (controlIds[i].tooltip) {
controlIds[i].tooltip().state.set('rendered', false);
}
}
how can I init tinyMCE before the element it is to apply to is not yet visible?
So yeah, this doesn't work in my case.
tinyMCE.init({
Assuming you are dynamically adding the textarea triggered from some action, then you can use the TinyMCE command "mceAddControl" to add TinyMCE to the page.
For example, if the textarea ID is "myText" then you add the editor control with
tinyMCE.execCommand('mceAddControl', true,"myText");
Of course, you need to setup the editor settings prior to adding the control. This is done by setting the setting attribute of the control. For example
tinyMCE.settings = {
theme: 'advanced',
....
};