I have a fancy tree solution on my website and i would like to have a button that will trigger a specific node.
Can i activate a specific node from a button click or trigger it after the fancy tree has loaded?
My fancytree code:
$("#tree").fancytree({ //Fancy Tree
checkbox: false,
selectMode: 3,
extensions: ["dnd"],
source: {
url: "#(Url.Action("GetCategoryForFancyTree", "LinksDocuments"))" + '?time=' + timestamp,
success: function(data){
console.log(data);
},
cache: true
}
});
I saw that this code maybe i could use but i dont dont know the node key for the node, how could i retrieve the key?
$("#tree").fancytree("getTree").getNodeByKey("id4.3.2").setActive();
The .getNodeByKey is just expecting the "id" of the node element. For example to get the "Sample Node" from the following example just set the id for each element:
<div id="tree">
<ul>
<li id="123">Sample Node</li>
</ul>
</div>
And use something like this to activate it:
$("#tree").fancytree("getTree").getNodeByKey("123").setActive();
I recommend adding this to the "init: function() {}" otherwise it may not activate if the tree is still loading/building.
Can also use the following from within the "init:", should do the same.
data.tree.activateKey("123")
Finally, to get the key if you don't already know it:
click: function (event, data) {
var node = data.node;
alert("ID: " + node.key);
}
Related
When I'm trying to paste into the empty area within the webix datatable, nothing happens and onPaste event doesn't occur.
Basically, I want to add a new item through onPaste even when existing data items aren't selected. But whether it's possible?
Something like the 'insert' operation in a list, but in my use-case the datatable can be empty after init (in the following sample I've added an item to make clipboard work). Here it is:
http://webix.com/snippet/9ae6635b
webix.ui({
id:'grid',
view:'datatable',
select:true,
clipboard:'custom',
editable:true,
columns:[
{ id:'id' },
{ id:'name', fillspace:true, editor:"text" },
{ id:'details' }
],
data: [
{ }
],
on:{
onPaste: function(text){
this.add({ id:webix.uid(), name:text })
}
}
});
Any suggestions are appreciated.
I found that 'clipbuffer' has focus only when datatable has the selection. Most probably it is required for data editing, detecting position or whatever. Anyway, the 'clipbuffer' can be focused manually:
var clipEvent = webix.event($$("grid").getNode(), "click", function(){
webix.clipbuffer.focus();
});
Sample: http://webix.com/snippet/aa441e70
Just adding the bootstrap-confirmation extension for Bootstrap popover to some buttons on a project. I'm having issues with the options not being respected. I'm trying to get the popups to work as singletons and dismiss when the user clicks outside of them singleton and data-popout options, respectively - both set to true. I'm also not seeing any of my defined callback behavior happening.
I defined the options both in the HTML tags and in a function and neither works. Still getting multiple boxes and they don't dismiss as expected.
My JS is loaded after all other libraries and is in my custom.js file in my footer.
JS is as follows:
$(function() {
$('body').confirmation({
selector: '[data-toggle="confirmation"]',
singleton: true,
popout: true
});
$('.confirmation-callback').confirmation({
onConfirm: function() { alert('confirm') },
onCancel: function() { alert('cancel') }
});
});
An example of the box implemented on a button in my HTML is the following:
<a class="btn btn-danger" data-toggle="confirmation" data-singleton="true" data-popout="true"><em class="fa fa-trash"></em></a>
Any pointers would be appreciated. I even changed the default options in the bootstrap-confirmation.js file itself to what I want and still no luck.
Turns out I needed to rearrange a couple things to get this to work. I've left in the last_clicked_id etc stuff as I needed to add that to get the id value of what I'd just clicked.
// Product removal popup logic
var last_clicked_id = null;
var last_clicked_product = null;
$('.btn.btn-danger.btn-confirm').click(function () {
last_clicked_id = $(this).data("id");
last_clicked_product = $(this).data("product");
});
$('.btn.btn-danger.btn-confirm').confirmation({
singleton: true,
popout: true,
onConfirm: function () {
alert("DEBUG: Delete confirmed for id : " + last_clicked_product);
// TODO: Add AJAX to wipe entry and refresh page
},
onCancel: function () {
alert("DEBUG: Delete canceled for id : " + last_clicked_product);
}
});
I was a step ahead of myself with the callback logic which was not getting executed. Fixed by simply adding it to onConfirm: and onCancel: key values in the .confirmation() function. A bit of a RTFM moment there but this was unfortunately not very clear in the documentation.
I'm rendering jstree with following config
$('#deliverables').jstree({
'core': {
'data': data
},
'search': {
'case_insensitive': true,
'show_only_matches' : true
},
'plugins': ['search']
});
$('#deliverable_search').keyup(function(){
$('#deliverables').jstree('search', $(this).val());
});
With this config, jstree showing only matched nodes if the search text has found atleast one node. But jstree showing all the nodes if the search text not matching with any node. I found this a bit strange. Am i missing something here?
https://jsfiddle.net/t9fe58rt/1/ link for your reference.
It's an intended bahavior, see: https://github.com/vakata/jstree/issues/1192#issuecomment-128042329
But you can attach an handler to the search event and if the result is empty act accordingly, eg. you can hide the all the tree nodes using hide_all method.
Code:
.on('search.jstree', function (nodes, str, res) {
if (str.nodes.length===0) {
$('#deliverables').jstree(true).hide_all();
}
})
But don't forget to show them all before trigger a new search:
$('#deliverable_search').keyup(function(){
$('#deliverables').jstree(true).show_all();
$('#deliverables').jstree('search', $(this).val());
});
Demo: https://jsfiddle.net/xfn8aa19/
For me, the answer of Irvin Dominin was not enough
$('#deliverable_search').keyup(function () {
$('#deliverables').jstree(true).show_all();
$('.jstree-node').show();
$('#deliverables').jstree('search', $(this).val());
$('.jstree-hidden').hide();
$('a.jstree-search').parent('li').find('.jstree-hidden').show();
});
I'm sure this is going to be simple well i hope it is. After racking my brain for days I have finally sorted my last problem thanks you someone on here, But now I have a new problem. I am dynamically creating blogs hundreds of them. I'm using JQuery to load a editor into a simple modal window like so
<a class="blog_btns" id="edit" data-id="$b_blog_id" href="">Edit</a>
then the JQuery
jQuery(function($) {
var contact = {
message: null,
init: function() {
$('#edit').each(function() {
$(this).click(function(e) {
e.preventDefault();
// load the contact form using ajax
var blogid = $(this).data('id');
$.get("../_Includes/edit.php?blogid=" + blogid, function(data) {
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%", ],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
});
});
},
open: function(dialog) {
dialog.overlay.fadeIn(200, function() {
dialog.container.fadeIn(200, function() {
dialog.data.fadeIn(200, function() {
$('#contact-container').animate({
height: h
}, function() {
$('#contact-container form').fadeIn(200, function() {
});
});
});
});
});
},
show: function(dialog) {
//to be filled in later
},
close: function(dialog) {
dialog.overlay.fadeOut(200, function() {
$.modal.close();
});
},
};
contact.init();
});
the problem I have is i have hundreds of
<a class="blog_btns" id="edit" data-id="$b_blog_id" href="">Edit</a>
but I want the all to run the same jQuery function above.
Can anyone help? Is there a simple way of doing this?
...many elements with same id...
That's the problem, you can't have multiple elements with the same id.
You probably want to use a class:
<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>
<!-- Added ---------^ -->
Then:
$('.edit').each(...);
// ^---- ., not #, for class
But you probably don't want to use each, just do:
$('.edit').click(function(e) {
// ...
});
There's no need to loop through them individually.
Another approach you might consider is rather than hooking click on each individual "edit" link, you might want to use event delegation. With that, you hook the event on an element that contains all of these "edit" links (there's bound to be a reasonable one, body is always possible as a last resort), but tell jQuery not to notify you of the event unless it passed through one of these on its way to that element in the bubbling. That looks like this:
$("selector for the container").on("click", ".edit", function(e) {
// ...
});
Within the handler, this will still be the "edit" link.
Use class instead of id as according to HTML standards each element should have a unique id.
id: This attribute assigns a name to an element. This name must be unique in a document.
class: This attribute assigns a class name or set of class names to an
element. Any number of elements may be assigned the same class name or
names. Multiple class names must be separated by white space
characters.
http://www.w3.org/TR/html401/struct/global.html
so use class instead of id
<a class="blog_btns edit" data-id="$b_blog_id" href="">Edit</a>
and refer to it with $('.edit')
When you open nodes, it's fine. The "select_node.jstree" is not called. However, when you select a node and then close its' parent, jstree fires "select_node.jstree" for that parent node for some strange reason. Is there any way around this or is that just a flaw with jstree? I'd appreciate the help! Here's my code:
$("#RequirementsTree")
.bind("select_node.jstree", function(event, data) {
ReqNode = data.rslt.obj;
$("#req_tree_modal").dialog({ height: 400, width: 600, modal: true, closeOnEscape: true, resizable: false, show: "blind" });
$("#RMSDoc_ParentNodeID").val(data.rslt.obj.attr("id").substring(4));
if(is_requirement_node(data))
{
dispEditRequirementView();
var ReqCheck = data.rslt.obj.attr("name");
#* This is a REQUIREMENT *#
if(ReqCheck == "requirement")
{
// Ajax call to Server with requirement id passed in
$.ajax({
type: "POST",
url: '#Url.Content("~/RMS/getRequirementStateByID")',
data: {
ReqID : data.rslt.obj.attr("id").substring(4)
},
success: function(new_data) {
if(new_data == 1){
$("#RMSDoc_ReqEnabled").attr("checked", "checked");
$("#RMSDoc_ReqEnabled").val("true");
}
else if(new_data == 0) {
$("#RMSDoc_ReqEnabled").removeAttr("checked");
$("#RMSDoc_ReqEnabled").val("false");
}
}
});
$("#RMSDoc_RBSRequirement_RequirementsId").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_RBSRequirement_RequirementsText").val($.trim(data.rslt.obj.text()));
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSEditReqButton.ConfigurableLabelDesc");
}
else {
alert("Requirement node select error");
}
}
#* This is a TREE BRANCH *#
else
{
dispAddRequirementView();
$("#RMSDoc_TreeBranch_Text").val($.trim($('.jstree-clicked').text()));
$("#RMSDoc_TreeBranch_id").val(data.rslt.obj.attr("id").substring(4));
$("#RMSDoc_TreeBranch_Level").val(data.rslt.obj.attr("name").substring(7));
$("#RMSDoc_RBSRequirement_RequirementsText").val("");
$("#ExistingTreeSubmit").val("#Model.RMSDoc.RMSCreateReqButton.ConfigurableLabelDesc");
}
})
Update:
I found a way to get it to work within the plugin, add the following to the "ui" config section:
"ui": {
"select_limit": 1,
"selected_parent_close":false
},
I believe what was happening is that when a sub-node was selected, collapsing the parent node would cause the parent node to be selected, triggering the event.
---------- Original Answer ---------------------
I'm not sure on the answer working within the bounds of the plugin. But I did find a work-around.
I added a class to each of the anchor () tags inside the tree "an".
<li class='jstree-closed' id="phtml_3" rel="folder">
test node 2
</li>
Then I wired JQuery to look for anchors with this class, and handled my click that way.
instance.on("click", "a.an", function (e) {
alert("click");
});
I still need to add code to find the ID from the parent-container, not optimal... but I don't have to compete with the collapse anymore for my click.