Refreshing jstree without tree 'flashing' in chrome - javascript

I have a page with jstree in it. It's loading the tree content from the server in JSON format.
$("#" + this.treeComponentID).jstree({
plugins: ["themes", "json_data", "ui", "types"],
themes: {
theme: "classic"
},
json_data: {
"ajax": {
"url": this.dataLoadURL
}
},
ui: {
select_limit: 1
}
});
Every 20s I call
$('#tree').jstree("refresh", -1);
to refresh the tree since the content might change on backend. This all works fine except I got a ~200ms flash of the component in Chrome. This is very annoying if you look on the page and it flashes every 20s.
So I was wondering whether there is some way to avoid this flash. What is even more strange is that IE8 doesn't flash. It just repaint the tree silently and smoothly.
I'm using the jsTree 1.0-rc3 which is presented on the jstree webpages in demos.
Any help will be much appreciated.

Instead of doing a refresh, would it help to do a redraw?
$('#tree').jstree("redraw");

Related

Destroying InfiniteScroll on AJAX page change

We have a website that is running jQuery Infinite Scroll Plugin. The plugin is no longer maintained but it is the only one that really serves our purpose properly. However, the problem I have is that our site is ajax based. On page change the pg-changed trigger is fired against the window, which allows us to check if the Infinite Scroll container is there and enable Infinite Scroll. If the Infinite Scroll container isn't there but $.infscr exists, we will attempt to destroy the previous instance.
The problem I am having is that when changing to another page, it doesn't seem to be getting destroyed properly and sometimes AJAX calls will be made, along with the infscr loading bar displaying. Here is the code I am using to instantiate and destroy the plugin:
$(window).on('pg-changed', function () {
// delete our infinite scroll
if(typeof $.infscr !== 'undefined') {
$('.snap-inner, .infscr').data('infinitescroll', null);
$('.snap-inner, .infscr').infinitescroll('unbind');
$('.snap-inner, .infscr').infinitescroll('destroy');
$('#infscr-loading').remove();
$.infscr.data('infinitescroll', null);
$.infscr.infinitescroll('unbind');
$.infscr.infinitescroll('destroy');
delete $.infscr;
}
// setup our infinite scroll
if($('.infscr').length) {
$.infscr = $('.infscr').infinitescroll({
// define our navigation selectors
navSelector : 'div.infscr-navigation',
nextSelector : 'div.infscr-navigation A:first',
itemSelector : '.infscr-item',
// allow scrolling an overflowed element
behavior : 'local',
bufferPx : 120,
binder : $('.snap-inner'),
dataType : 'html',
loading : {
msg : null,
selector : '.snap-content',
img : 'data:image/gif;base64,TRIMMED',
msgText : '<span class="infscr-loading">Loading...</span>',
}
}, function (arrayOfNewElems) {
// render background images on our new elements
$(this).renderBgImages();
});
}
});
I really hope you can help with this as it has become quite a problem now, firing on scroll, making AJAX calls and displaying the loading bar.
I guess the problem might be that the plugin binds events on elements external to itself. It's hard to say without further debugging (is the plugin deleted or does it fail to do so?). If it does, why would it fail to unbind the events? etc.
When you say, 'on another page', I suppose you are not loading a whole new page (which would 'reset' the javascript.
Though, depending on wether this could work for you, you might want to try unbinding ALL events on the document, and starting fresh.
$(document).add('*').off();
should do so. If it does, you could try to pinpoint what elements/events you need to unbind manually. Let me know if this works or not.

Kendo UI Javascript redraw of TreeView not rendering

After creating and rendering a Kendo UI TreeView to fill a DIV, repeat invocation alternately renders only "loading..." or works properly. Since I am having possibly similar problems with Kendo UI ContextMenu, I speculate there may be some required cleanup in between, which is passively done by even invocations such that odd invocations work, but I can't figure it out (a link to Kendo UI docs I might be missing so I can understand why I've missed this would be appreciated to help with other issues).
In my JSFiddle example, click "draw" over and over and you'll see the alternate behavior. Speculatively clicking "draw, destroy, draw, destroy..." does not seem to help.
https://jsfiddle.net/rk3nfnnu/
<script>
function TreeDestroy() { // http://stackoverflow.com/questions/5431351
$('#Tree_Space').data('kendoTreeView').destroy();
alert('destroyed');
}
function TreeShow() {
$('#Tree_Space').kendoTreeView({
dataSource: [ { Name: 'Top', items: [ { Name:'Item' } ] } ],
template: kendo.template($('#Tree_template').html())
});
alert('shown');
}
</script>
draw |
destroy
<div id='Tree_Space'>
</div>
<script type='text/x-kendo-template' id='Tree_template'>
#= item.Name#
</script>
I have updated that fiddle. The destroy(); method probably only destroys allocated dom elements after the widget was rendered (the nodes). I doubt it cleans up the wrappers and whatnot. In your TreeDestroy(), issue a clear on that element div. Of course, you should call TreeDestroy prior to TreeCreate just in case.
function TreeDestroy() { // http://stackoverflow.com/questions/5431351
$('#Tree_Space').data('kendoTreeView').destroy();
$('#Tree_Space').html('');
alert('destroyed');
}
Here is some kendoui documentation that refers to how to handle manual deletion of widgets.

JQuery JSTree loads as open and THEN minimizes

Fist off, been lurking for years, hopefully this post will be helpful to more than just me.
So I have a jstree that is generated for my site using very a small amount of JavaScript. Ideally, I would like for the page to load and show the 2 top folders only.
However, currently the page displays all of the names of the folders, subfolders, files, etc. for about 0.5 seconds before switching to the proper view. There are probably about 200 items in the tree structure
I added a manual tree.bind which does a "close_all", and I also tried hiding the DIV that it eventually appears in. Even though I put the code to show the DIV after I create the tree, it still shows everything before hiding itself.
I am using jsTree 1.0-rc3
Anyone have any thoughts?
<script type="text/javascript">
(document).ready(function () {
var tree = $("#sharepointHierarchy");
tree.bind("loaded.jstree", function (event, data) {
tree.jstree("close_all");
});
$("#sharepointHierarchy").jstree({
'plugins' : [ "themes", "html_data", "types", "ui" ],
'core' : {/* core options go here */},
});
document.getElementById("sharepointHierarchy").style.display="block";
});
</script>
I was able to mask this issue by adding the following code to the end of the function(). It is fairly straight-forward and simply gives the table time to load before showing it.
setTimeout(function() {
$("#sharepointDiv").show();
},1200);
I hope this helps someone else also.

jstree support for Right to left languages not working

I'm developing an web app in Arabic and i need to use a tree view to reprent my data. I looked around and found that jstree is the best in this area.
The tree works fine when using the default theme (which is LTR), but when i switched to a built-in theme called default-rtl, i didnt see any changes. I looked around in firebug and the script is indeed loading the appropriate css file. Here is my code:
$("#tree").bind("select_node.jstree", function(event, data) {
// My handler function here
}).bind("open_node.jstree", function (event, data) {
// another function here
}).jstree({
core: {
"animation": 0
},
"themes" : {
"rtl": true,
"theme" : "default-rtl",
"url": "js/libs/jstree/themes/default-rtl/style.css",
"dots" : false,
"icons" : true
},
"plugins" : [ "themes", "html_data", "ui"]
});
is there something I am doing wrong?
I managed to solve this issue.
I modifed this CSS file (attached) a little bit and included it in the
CSS folder that comes with JSTREE (usually it's called default.css or
default-rtl). You can download it from here: http://www.mediafire.com/download.php?ah26sq0b0isbboa
Make sure you don't have any
ul {
overflow: hidden
}
related to
your ul root element of ur tree
Hope that was clear,
Enjoy,
Please Set Core RTL Option To True

ExtJS: starting HtmlEditor defaulting to source

I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.

Categories

Resources