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.
Related
I'm wondering how to disable ctrl-clicking links when in design mode. I believe it must be possible because when the link plugin is disabled, links cannot be ctrl-clicked while in 'design' mode. I would like to enable the link plugin but have the links remain un-clickable while in 'design' mode. They can still be clicked when in 'readonly' mode.
This fiddle shows the functionality when the link plug in is not enabled. Just use the Add Link button to add a link to the editor and notice when you're in design mode how it cannot be ctrl-clicked to navigate.
https://fiddle.tiny.cloud/Q6haab/3
This fiddle has the link plugin enabled to show the difference of ctrl-clicking while in edit mode.
https://fiddle.tiny.cloud/Q6haab/4
Thanks in advance
If you import the link plugin there is currently no way to disable the link opening behavior with configuration.
TinyMCE registers event handlers for click and keydown which check for the click on the link.
Additionally the link plugin registers menu items that are displayed on right click for opening the link.
Ultimately these all call the same method which creates an anchor tag on the body and fires a mouse click event on it.
If you wish to stop clicking from doing anything then you can add an event listener to the body tag for click events and then filter on the event target to look for anchor tags that are directly on the body and have 3 attributes (href, rel and target). Once you find a likely candidate you call preventDefault on the event.
body.addEventListener('click', (evt) => {
const t = evt.target;
if (
t.parentNode === body &&
t.attributes.length === 3 &&
t.hasAttribute('href') &&
target.getAttribute('rel') === 'noreferrer noopener' &&
t.getAttribute('target') === '_blank') {
evt.preventDefault()
}
});
In my app I using tinymce plugin for adding some files from local machine - link plugin. And it works great, but, there is one section - target, that I want to hide from users.
Because I'm just using '_blank' as default and type 'none' make some troubles.
In documentation I can't find option for hide this section. So I try to hide this by css. Unfortunately id and classes are dynamic, so it was bad idea with css 'display:none'.
It's possible to hide this section somehow?
You can remove the target list altogether by placing this in your TinyMCE configuration:
target_list: false
That is documented here: https://www.tinymce.com/docs/plugins/link/#target_list
To disable the option dialog set target_list to false
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.
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 dont want to see the advanced tab on the tables dialog, and I dont want to remove it from the source in case its overwritten with updates.
Note: not Wordpress.
Any suggestions?
In TinyMCE v4, there are three plugin options: table_advtab, table_row_advtab and table_cell_advtab, that specify whether the Advanced Tab is enabled on the Table Properties, Row Properties and Cell Properties dialogs respectively.
So, if you want to hide the Advanced Tab for all table properties, you would set all of these options to false like this:
tinymce.init({
table_advtab: false,
table_row_advtab: false,
table_cell_advtab: false
});
Reference for these options can be found here:
https://www.tinymce.com/docs/plugins/table/#table_advtab
I have to tell you, that this is not possible. There are several settings concerning the table plugin, but not the one you are looking for.