Im using a jstree custom context menu and Im trying to define the create option. I already have a button that performs the intended logic, however it is on a different page. How would I go about using javascript/jQuery to call a button that is on a different page?
Here is my context menu in the javascript file in my page called middlenav.aspx. The button I wish to reference is on a page called navbar.aspx
UPDATE: I was able to get it partially working. I can call the button but it causes my current page to refresh. How can I avoid refreshing the current page middlenav.aspx?
"contextmenu": {
"items": function ($node) {
return {
"Create": {
"label": "Create",
"action": function (obj) {
createItem(obj);
}
},
"Rename": {
"label": "Edit",
"action": function (obj) {
this.rename(obj);
}
},
"Delete": {
"label": "Delete",
"action": function (obj) {
this.remove(obj);
}
}
};
}
},
// Updated
function createItem(obj) {
$.ajax({
url: "navbar.aspx",
success: function (data) {
$('body').append(data);
$("#btnNewItem").click();
}
});
I'm not sure if this is the most effective way, but I was able to accomplish it with the following function:
function createItem(obj) {
$.get("navbar.aspx", function (data) {
$('myHiddenDiv').append(data);
$("#btnNewItem").click();
window.stop();
});
}
Related
I have been stumped on this for about 2 hours now.
My problem is that I need to load an array from a MySQL database using PHP and Ajax, and use the array in JavaScript.
I got that part working fine however the part where it references "onClick" and contains a function to run does not work. It provides numerous errors which say the exact same thing.
Uncaught RangeError: Maximum call stack size exceeded
at buttons.<computed>.onClick (app.js:1281)
The example of the array is the following:
[
{
"text": "Lost to Competitor",
"onClick": "closeOpportunity(\"Lost to Competitor\", el, stages)"
},
{
"text": "No Budget \/ Lost Funding",
"onClick": "closeOpportunity(\"No Budget \/ Lost Funding\", el, stages)"
},
{
"text": "No Decision \/ Non-responsive",
"onClick": "closeOpportunity(\"No Decision \/ Non-responsive\", el, stages)"
},
{
"text": "Price",
"onClick": "closeOpportunity(\"Price\", el, stages)"
},
{
"text": "Other",
"onClick": "closeOpportunity(\"Other\", el, stages)"
},
{
"text": "Won via Another Opportunity",
"onClick": "closeOpportunity(\"Won via Another Opportunity\", el, stages)"
}
]
My code for loading the array is the following:
function closeOpportunity(name, el, stages) {
$$("#opportunity_loss_reason2").text(name);
$$("#closedType").text("Closed Lost");
$$("#convertToProject").hide();
$$("#lostReasonLI").show();
upStepper(el, stages);
}
var stages = [
"enquiry",
"qualification",
"proposal",
"negotiation",
"closed"
];
var buttons = [];
app.request.json('scripts/lostButtonsArray.php', function (data) {
buttons = data;
console.log(buttons);
});
buttons.forEach((v, i) => {
console.log(v['onClick']);
buttons[i]['onClick'] = function() { window.eval.call(window, v['onClick'])(el, stages); };
});
app.dialog.create({
title: 'ECOM',
text: 'Why was the opportunity lost?',
cssClass: 'custom-dialog',
closeByBackdropClick: 'true',
buttons: buttons,
verticalButtons: true,
}).open();
I have already tried using regular eval() and loading the code directly without any sort of helper (eval, window.eval).
I will be happy to provide more information to help solve this problem if I haven't provided enough information.
Found the solution.
I was trying to load "name" instead of "text"
Working function
app.request.json('scripts/lostButtonsArray.php', function (data) {
buttons = data;
buttons.forEach((v, i) => {
buttons[i]['onClick'] = function() { eval('closeOpportunity')(v['text'], el, stages); };
});
});
I'm having trouble getting checkbox events to fire, specifically enable_checkbox and disable_checkbox
My code to init jsTree is:
$('#contenteditor-hierarchy').jstree({
"plugins": [
"checkbox"
],
"checkbox": {
"visible": true,
"tie_selection": false,
"whole_node": false
},
"core": {
"check_callback": true,
"data": {
"url": function (node) {
//...
},
"type": "get",
"data": function (node) {},
"dataType": 'json'
}
}
});
and I have tried:
$tree.bind('enable_checkbox.jstree', function() {
alert('test');
});
// and...
$('#contenteditor-hierarchy').on('enable_checkbox.jstree', function() {
alert('test');
});
// as well as..
$(document).on('enable_checkbox.jstree', function() {
alert('test');
});
for the interim, a not so classy hack; the below works for me:
$('body').on('click', '.jstree-checkbox', function(e) {
// at the time of this event firing, jstree hadn't finished handling the click event
// so I had to timeout....
setTimeout(function() {
console.log($tree.jstree(true).get_checked());
}, 200);
});
However in neither attempt was an alert actually fired.
The API docs is quite vague so wondering if anyone is aware of where I am going wrong.
Based on the code with the click event and the setTimeout, I would say that what you are trying to achieve is to set an event to detect when the checkbox is checked or unchecked.
If that is the case, you should use the events check_node.jstree and uncheck_node.jstree respectively.
Im trying to find a way I can suppress the changedevent in jstree when loading a dynamic context menu (right click). I'm aware that you can suppress the select_node event in the context menu but I need to get the node id of the node that I am right clicking on. (and therefore need to use the select_node). I know that you can suppress that changed event when calling select_node regularly, but I'm not sure how to do it when right clicking. I tried the following with the context menu select_node, but it did not work:
$(function () {
$('#myTree').jstree({
"core": {
"themes": {
"variant": "small",
"icons": false
}
},
"contextmenu": {
"items": reportMenu(node), //builds context menu based on selected node
},
"plugins": ["contextmenu", "changed"]
});
});
$("#myTree").bind('select_node.jstree', function (event, data) {
// Does not work, changed event still fires.
$("#myTree").jstree().select_node(data.node.id, true);
});
I'm looking for one of the possible alternatives:
How can I suppress the changedevent when the context menu calls select_node?
How can I get the id of the node I am right clicking on without calling the select_node event (i.e. If I set my contextmenu to 'select_node': false, how can I capture the select node)?
Finally, I think you can get what you want changing your code a little.
Check demo - codepen.
$('#myTree')
.jstree({
'core': {
'data': ...
},
'plugins': ["contextmenu"],
'contextmenu': {
'select_node': false,
'items': reportMenu
}
});
function reportMenu(node) {
// access node as: node.id);
// build your menu depending on node id
return {
createItem: {
"label": "Create New Branch",
"action": function(obj) {
this.create(obj);
alert(obj.text())
},
"_class": "class"
},
renameItem: {
"label": "Rename Branch",
"action": function(obj) { this.rename(obj); }
},
deleteItem: {
"label": "Remove Branch",
"action": function(obj) { this.remove(obj); }
}
};
}
using jstree plugin I input the tree data from an xml file. I need to save the xml data after drag and drop operation on a button click.
The data.inst.get_xml("nest", -1, li_attr, a_attr) event gives the current xml. How do I save this to an xml file in MVC 3 view
This is the javascript used to render the tree-
$(document).ready(function () {
li_attr = ["id", "class"];
a_attr = ["href"];
$("#Sampletree").jstree({
"xml_data": {
"ajax": {
"url": "../../Content/Files/Sample.xml"
},
"xsl": "nest"
},
"plugins": ["themes", "xml_data", "dnd", "ui"
},
{
"dnd": {
"drop_finish": function () {
alert("DROP");
},
"drag_check": function (data) {
if (data.r.attr("id") == "phtml_1") {
return false;
}
return {
after: false,
before: false,
inside: true
};
},
"drag_finish": function (data) {
alert("DRAG OK");
}
}
})
.bind("select_node.jstree", function (e, data) {
alert(data.inst.get_xml("nest", -1, li_attr, a_attr)
});
});
The data.inst.get_xml("nest", -1, li_attr, a_attr) event gives the current xml as a string. Set this as a hidden input field. This hidden field value can be received while submitting the form. The rest can take care by the controller.
Cheers,
Princi
I'm trying to capture the name of the newly created node with jstree's contextmenu. I can capture the name of the parent node that I'm adding the new node under (with obj.text()), however, what I really need is the name of the newly created node.
So, somehow, there needs to be an "onChange" event that can be called within jstree contextmenu that fires once the user hits enter on that newly created node?
Any ideas? I've enclosed the contextmenu code:
}).jstree({
json_data: {
data: RBSTreeModel,
ajax: {
type: "POST",
data: function (n) {
return {
NodeID: n.attr("id").substring(4),
Level: n.attr("name").substring(7)
};
},
url: function (node) {
return "/Audit/GetRequirementsTreeStructure";
},
success: function (new_data) {
return new_data;
}
}
},
contextmenu: {
items: function($node) {
return {
createItem : {
"label" : "Create New Branch",
"action" : function(obj) { this.create(obj); alert(obj.text())},
"_class" : "class"
},
renameItem : {
"label" : "Rename Branch",
"action" : function(obj) { this.rename(obj);}
},
deleteItem : {
"label" : "Remove Branch",
"action" : function(obj) { this.remove(obj); }
}
};
}
},
plugins: ["themes", "json_data", "ui", "crrm", "contextmenu"]
});
You can bind to the "create.jstree" event, which will fire after a node is created. In the callback of that event, you will have access to the newly created node and can rollback/revert the create node action if you choose. The documentation for it is lacking, but there is an example on the demo page. Here is another example that came from my code:
}).jstree({... You jstree setup code...})
.bind("create.jstree", function(e, data) {
// use your dev tools to examine the data object
// It is packed with lots of useful info
// data.rslt is your new node
if (data.rslt.parent == -1) {
alert("Can not create new root directory");
// Rollback/delete the newly created node
$.jstree.rollback(data.rlbk);
return;
}
if (!FileNameIsValid(data.rslt.name)) {
alert("Invalid file name");
// Rollback/delete the newly created node
$.jstree.rollback(data.rlbk);
return;
}
.. Your code etc...
})
Based on Bojin Li's answer, it seems that the latest version of jsTree uses the event "create_node" instead of "create":
}).jstree({... You jstree setup code...})
.bind("create_node.jstree", function(e, data) {
...
});