I'm using jstree_pre1.0_fix_1. And I want to have the preselected menu.
javascript is following,
$("#Menu").jstree({
"plugins" : [ "themes", "html_data", "ui"],
"ui" :{ "initially_select" : ["#MENUITEM_012"] },
"themes" : {
"theme" : "custom",
"dots" : false,
"icons" : false,
},
}).
bind("select_node.jstree", function(e,data) {
window.location.href = data.rslt.obj.children("a").attr("href");
});
When jstree is loaded, it selects a node(#MENUITEM_012), then window.location.href is changed, then jstree loaded and selects a node again.
How can I escape this situation.
Just found the solution. The problem is caused by the library trying to select the node( i.e. to make it appear selected after the navigated page is loaded). And handler had been set when a node is visited to navigate the page to another page.
The solution is to make sure that the node is selected with a mouse click.
.bind("select_node.jstree", function(e,data) {
var evt = window.event || event;
var button = evt.which || evt.button;
if( button != 1 || ( typeof button == "undefined")) return true;
window.location.href = data.rslt.obj.children("a").attr("href");
})
Answer myself;
remove
.bind("select_node.jstree", function(e,data) {
window.location.href = data.rslt.obj.children("a").attr("href");
})
add
$(".jstree li a").live("click", function(e) {
window.location.href = $(this).attr("href");
});
Related
In jsTree component available a ContextMenu plugin.
But it's available only when user clicked on specific node.
I need to add context menu by clicking on component's background (to add root nodes, for example).
Is it possible to attach a context menu plugin for background ?
Yes you can, but you need to define all actions you need to be available, as the defaults are related to a node, so they won't work (rename, delete, etc).
This will show a menu when the tree container is clicked and will show an option to create a root node:
$('#tree').on('contextmenu.jstree', function (e) {
e.preventDefault();
if($(e.target).is('#tree')) {
$(document).one("context_show.vakata.jstree", $.proxy(function (e, data) {
var cls = 'jstree-contextmenu jstree-default-contextmenu';
$(data.element).addClass(cls);
}, this));
$.vakata.context.show($(this), { 'x' : e.pageX, 'y' : e.pageY }, {
"create" : {
"separator_before" : false,
"separator_after" : false,
"_disabled" : false,
"label" : "Create",
"action" : function (data) {
var inst = $.jstree.reference(e.target);
inst.create_node(null, {}, "last", function (new_node) {
setTimeout(function () { inst.edit(new_node); },0);
});
}
}
});
}
});
Here is the JavaScript code to prevent the double click event
$("#jstree_view").on("dblclick", 'li a', function (e) {
e.preventDefault();
});
but it is not working.
set the $.jstree.defaults.core.dblclick_toggle = false
example:
$('#jstree').jstree({
"core" : {
"dblclick_toggle" : false
}
});
jstree API
In a given page, I have multiple instances of Fancybox items that will show up an video when clicked on a link.
Apart from those, I have a function running every 5 seconds to get data from a URL and display another fancybox based on the return value.
The problem is that, as the setInterval function runs always, even if the actual video is played, it closes that video as I use $.fancybox.close().
All I wanted is to close only the fanybox identified by myModal.
This is the jQuery that I use.
$(document).ready(function() {
function myplugin() {
$.getJSON("get-status.php", function (data) {
$.each(data, function (key, status) {
if(status > 0) {
$("#myModal").fancybox().click();
}else{
$.fancybox.close(); // Works. But closes other open Fancybox if any
//$("#myModal").fancybox().close(); // Does not work
}
});
});
};
$(function() {
setInterval(function() { myplugin() }, 5000);
});
});
Well, I am not completely sure I understood your question, however since it's not very easy to know if #myModal is currently opened in fancybox (outside of the fancybox function itself), I would create a flag or switch that would be enabled from within a fancybox callback IF #myModal is the current element opened.
Then, from myplugin() I would validate if the switch is true (#myModal is the current element) and if so, close fancybox.
The script would look something like this (not tested because I don't really know what myplugin() does) :
// declare a switch to set if #myModal is open in fancybox
var myModal = false;
$(document).ready(function () {
function myplugin() {
$.getJSON("get-status.php", function (data) {
$.each(data, function (key, status) {
if (status > 0) {
$("#myModal").fancybox({
// use a callback to set the switch = true
afterShow: function () {
$(this.element).attr("id") == "myModal" ? myModal = true : myModal = false;
}
}).click();
} else {
// close fancybox if myModal == true
if (myModal) {
$.fancybox().close();
myModal = false; // reset switch ?
}
}
});
});
};
// you don't need $(function(){ }); since you have declaread .ready() above
setInterval(function () {
myplugin()
}, 5000);
});
I tried this below one and it worked.
$("#myModal").parents("div .fancybox-skin").hide();
Please advice if there any other better way to do this.
The window contain a form which including NumberField(allowBlank: false), as soon as you open the window the NumberField is outlined in red. saying the field is required. but we hope the NumberField should not be outlined in red unless the user clicks the filed and clicks away without entering anything. how to config this NumberField.
extjs library: 3.3.0
Here is what I do.
Basically I listen to 'focus'/'blur' event and if value is blank, call markInvalid, otherwise clearInvalid.
xtype : 'numberfield',
fieldLabel :'number',
markNumberInvalid : function(){
if(this.getValue() == ""){
this.markInvalid();
}else{
this.clearInvalid();
}
},
listeners : {
'focus' : function(){
this.markNumberInvalid();
},
'blur' : function(){
this.markNumberInvalid();
}
}
I am creating an Application that consist of a Panel,
This panel contains a Tab-Panel and a Form-Panel. (Initially, Form-Panel is Hidden)
The Tab-Panel has a Tab, which contains a List.
When Tapped on a List-Item it dose the following
Shows the Form-Panel
Hides the Tab-Panel
My Problem is When it does so , The form do not show any scroll bars, How ever when i change the orientation of the device(iPhone) and then it allows me to scroll.
Can anyone explain me if i am doing it correctly, or is there any better way to achieve this functionality, or can the Main Panle be changed with a view Port ?
A small example will be really great.
Below is my Code (i will try to keep it simple)
Decleration of List and Event Listener
var lstRequestTracker = new Ext.List({
itemTpl : '{emplFirstName} {emplLastName}'
,store : storeRequestTracker
,fullscreen: true
});
lstRequestTracker.on('itemtap', function( oThis, index, item, event) {
var rec = oThis.getStore().getAt(index);
tpnlMyForms.hide();
fpnlOnBoard.show();
//pnlMain.doComponentLayout();
fpnlOnBoard.doComponentLayout();
});
Code for declaring the Main-Panel, Tab-Panel and The Form-Panel
var tpnlMyForms = new Ext.TabPanel({
tabBar : {dock : 'bottom', layout:'hbox'}
,fullscreen : true
,defaults : {scroll: 'vertical', layout:'fit'}
,items : [ {
title : 'Request Tracker'
,items : [lstRequestTracker]
,iconCls: 'time'
}
]
});
var fpnlOnBoard = new Ext.form.FormPanel({Contains form Fields});
Ext.setup({
onReady: function() {
var pnlMain = new Ext.Panel({
fullscreen : true
,dockedItems: [{dock:'top', xtype:'toolbar',title:'STARS'}]
,layout: 'fit'
,items : [tpnlMyForms,fpnlOnBoard]
});
fpnlOnBoard.hide();
}// eo onReady Function
});
Have you tried giving your formPanel a scroll option (scoll: 'horizontal') ? I really don't know wether this will help, but I remember I also had a form a few days ago and this was the solution. That had nothing to do with the device orientation by the way, but who knows..