I am using the JS tree sample link to display a hierarchy using JSTree.
I am able to display the tree as in the below screenshot
So far so good. To this am adding checkboxes instead of bullets and used the below plugins object provided by official jstree site .
$('#jsTreeContainer').jstree({
plugins: ["checkbox"],
core: {
'data': arrayCollection,
"themes": {
"icons": false
}
},
"checkbox": {
"three_state": false,
"whole_node": true,
"keep_selected_style": false,
"tie_selection": true
},
});
But still I am seeing the same output( am not getting checkboxes) and also the tree is expanding only when double clicked on node.
Can someone give me ideas on how to display checkboxes and also how to expand a node by just clicking it once?
Wrongly pointed required js/css files which caused this issue.
I am now seeing checkboxes properly and also nodes are getting expanded when clicked once.
Hi I reviewed my js and css files paths. Following are the files which should be referred:
<script src="~/Scripts/jstree.min.js"></script>
<script src="~/Scripts/jquery.scrollbar.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<link href="~/Contents/themes/default/style.min.css" rel="stylesheet"/>
Related
I am unable to get the TinyMCE file_browser_callback property to work, so that the Image dialog shows a browse button.
I downloaded TinyMCE 5.08 from tiny.cloud (prod version). I insert the library, then call init() below. I added a file_browser_callback property with a callback function, which is supposed to open a modal window, from where I pick up a file from a media library and insert it back.
For reasons I cannot understand I cannot make the browse button, in the image dialog, visible.
<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script>
$(function() {
tinymce.init({
height: 500,
selector: 'textarea.wysiwyg',
plugins: ['image'],
branding: false,
convert_urls: false,
file_browser_callback: function(field_name, url, type, win) {
$('#file-modal').modal({
duration: 200,
onApprove: function () {
if ($('#file-modal .file.selected').length) {
let $file = $('#file-modal .file.selected');
win.document.getElementById(field_name).value = $file.data('path');
}
}
}).modal('show');
}
});
});
</script>
The browse button should appear when the callback exists. I've tried implementing the callback as a separate function and passingit as a string with no luck. There are no error messages visible in the console.
I also tried 5.07 with no luck. I have this working on a separate application
The API you are using is a TinyMCE 4 API. Per the migration documentation, in TinyMCE 5 you need to use file_picker_callback instead:
https://www.tiny.cloud/docs/migration-from-4x/#file_browser_callbackfile_picker_callback
https://www.tiny.cloud/docs/configure/file-image-upload/#file_picker_callback
Well, it appears TinyMCE dropped the support for file_browser_callback from their 5.x versions. Propably because they offer file hosting cloud services themselves now and it might be a premium plugin. What a fantastic solution. I'll fall back to using 4.9.4 prod version.
I tried to override sass variable in variables.css like this
but it's not what I want.
It seems to change the styles of all tabs.
You just need to do as shown below on the page component which you need to apply.
my.scss
.ios,
.md,
.wp {
page-my {
.margin-top-15 {
margin-top: 15px;//this is just an example
}
}
}
Currently, it is not possible to override a sass variable in one single page, it simply does not work.
This is the response to a similar issue reported in ionic forums:
https://github.com/ionic-team/ionic/issues/7469
One useful solution is to ionic serve your project, open the inspector on your browser, inspect the desired element and see its ionic generated classes to overwrite them manually in the .scss file.
Currently you cannot change sass variables in one page. That's just not how sass works. Sass is meant to be used as a global setting.
There is a work around to change let's say for example the background of a loading container.
You can do this for most.
If you open developer tools and select inspect element on the loading wrapper it gives the class .loading-wrapper as shown in image link below.
css class for loading shown in inspect element
In your app.css
.loadingCss {
.loading-wrapper {
color: #f4f4f4;
background: #2979ff;
}
}
in your component ts add the class to your loading create instance
//initialize a loading overlay
let working = this.loadingCtrl.create({
content: 'Working...',
spinner: 'dots',
cssClass: 'loadingCss'
});
Now you can create multiple instances of loading and have separate classes for loading and add them to your instance and the css will take effect.
Final result is shown in the below image link.
Loading overlays with custom css on two pages
I hope this helps
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'm working on a plugin(application specific), that would allow to select an image from select box(size=5) and during the onChange event would show preview aside.
I have a set of urls, that lead to different images with small size. Issue here is, that plugin is an enclosed part of the code, where list of images is outside of it and is created by current action(not static).
Any way to pass it into plugin?
Took some time, but plugin was created.
Due to some fresh issues in Chrome it was not possible to say, wether the plugin and CKEditor add some strange behaviour or is it Chrome, but with testing in FF it was confirmed to be issue of Chrome(talking about selects size attribute).
Nevertheless, the issue with passing images for select was quite simple. I'm not sure whether it is the best way or not, but I was able to do it through CKEDITOR.config.*. More specifically
<script type="text/javascript">
$(function()
{
CKEDITOR.config.pddimages_set = {{ images }};
var editor = CKEDITOR.replace( 'editor' );
});
</script>
Even more specifically {{ images }} is a json_encoded array. And that data was available to me in my plugin.
Hope that will help others who may come in contact with same question.
How would I change the html of a tag like so:
$('#someId').html('<p>foo bar</p>');
while using the live() or delegate() function? Just for clarification I don't want this to happen on hover or focus or click... I just want jquery to immediately change the html inside of a certain tag.
Basically, I'm trying to change the logo in the Mojomotor's little dropdown panel and I don't want to change the logo every time I upgrade to a new version.
Any suggestions?
.live() and .delegate() don't work like this, what you're after is still done through the .livequery() plugin or simply in the document.ready if it's present on page load, like this:
$(function() {
$('#someId').html('<p>foo bar</p>');
});
Or with .livequery() if it's replaced dynamically in the page:
$('#someId').livequery(function() {
$(this).html('<p>foo bar</p>');
});
.live() and .delegate() work off of event bubbling...an element just appearing doesn't do this whereas a click or change, etc would.
Just do it when the DOM loads.
<script type="text/javascript">
$(document).ready(function() {
$('#someId').html('<p>foo bar</p>');
});
</script>