JsTree with custom json data - javascript

I have this structure in json I can not be modified by request.
{
"Object": [
{
"url": "http://www.google.com"
}
],
"id": 1,
"name": "Redirection Rule",
"Object": {
"frequency": 1,
"trigger": 1
},
"Object": {
"http": "Redirect Url",
"response": 301
}
}
I need to use this structure to populate a jstree . I just need to use the "id" fields and "name", how do I set jstree to use "name" instead of "text" as a node name ?

Either:
1) use the jQuery dataFilter option (this means defining a function for dataFilter in your core.data jsTree config),
or
2) set core.data itself to a function, manually make the request and transform it like so:
$('#your-tree').jstree({
core : {
data : function (node, cb) {
$.ajax({ url : ... }).done(function (data) {
cb([{ "id" : data.id, "text" : data.name }])
});
}, ...
You can find more info on setting core.data to a function here:
https://github.com/vakata/jstree#populating-the-tree-using-a-callback-function

Related

Datatable send current page number

I've been try to send current page number to server by overwrite a variable called pgno
here is my code :
function fill_datatable(status='',pgno='')
{
var pgno = 0;
table = $('.tb_scoin_available').DataTable({
"processing": true,
"serverSide": true,
"ordering" : false,
"infoCallback": function( settings, start, end, max, total, pre ) {
var api = this.api();
var pageInfo = api.page.info();
pgno = pageInfo.page+1;
return pgno;
},
"ajax":{
"url": base_url+'/adminPath/management_scoin/ajaxGetScoinAvailable',
"type": "POST",
"data":{ _token: csrf_token, status : status,pgno : pgno}
},
"columnDefs": [ { orderable: false} ],
"columns": [
{ "data": "no" },
{ "data": "created_at" },
{ "data": "serial_scoin" },
{ "data": "unit_scoin" },
{ "data": "unit_scoin_desc" },
{ "data": "unit_scoin_sc" },
{ "data": "unit_scoin_idr" },
],
});
}
when I try to alert on infoCallback :
alert(pgno) the variable already overwrited, but when I try to dump the request on backend the pgno POST give me null result like this :
Anyone can help me out ?
You can get the table page with the page() function, no need for the whole "page.info". It's better explained in Datatable's API: https://datatables.net/reference/api/page()
The method you're trying to access is only to get the information, not to set it. That is probably why it isn't working. Check their docs for better understanding of their API: https://datatables.net/reference/api/page.info()
EDIT:
You can get the current page through a simple calculation. Since you're using serverSide processing, you already have start and length. You just need to do start/length + 1 and you will get the current page number.

JsTree-grid doesn't display the data

I'm working with the JsTree Ajax lazy load feature and to display the data I am using JsTree-grid. However, I am having the issue with display the data using the JsTree-grid on the second column. I've the following JSON data that I'm passing through the PHP using the JsTree ajax lazy load feature:
[
{
"id": ​157749,
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo",
"text": "Script 1: Login",
"data": {
"status": "Fail"
}
},
{
"id": ​104511,
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo",
"text": "skip",
"data": {
"status": "Pass"
}
}
]
In the Javascript I've the following code:
$('#jstree').jstree({
plugins: ['grid'],
'grid': {
'columns': [
{
'width': 50,
'header': 'Nodes'
},
{
'width': 30,
'header': 'Status',
'value': function (node) {
return (node.status);
}
}
]
},
'core' : {
'data' : {
"url" : function (node) {
return node.id === '#' ? 'node' : 'tree/' + node.id;
},
'data' : function (node) {
return { 'id' : file.id, 'title' : file.title };
},
"dataType" : "json"
}
}
});
Note: When I console log the node on here: 'value': function (node) { console.log(node); } I got the following result on the console:
Object { status: "Fail" }
Object { status: "Pass" }
I would like to display the status Pass or Fail on the second JsTree-grid column. However, the JsTree-grid isn't displaying the data and I'm even not getting any error on the console. Please, can someone help me regarding what I want to achieve.
I see two issues here:
"parent": "Sheet1.worksheet1webs44lx8GbsHu9igMc2vM_qWJqhePuo257PKZm_6Uo"; your json doesn't have any parents for these nodes
you don't need function here - 'value': function (node) { return (node.status); }, simply use 'value': 'status'.
After fixing these two issues it works, check demo - Fiddle.

How to get jstree to work properly with ajax loaded content

For a project I am trying to create an ajax-powered treeview control. My ajax scripts are working fine on the back end, but the tree is not being displayed properly. When I hard code the ajax response into my tree container, it is displayed properly:
However, when I try to load the tree via ajax I get this:
Here is my JS code:
$(document).ready(function() {
function customMenu(node) {
var items = {
createItem : {
label : "Generate random number(s)",
action: function() {
console.log("Creating children...");
var selectedId = $("#treeview").jstree("get_selected").attr("id");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "libs/add.php",
data: "fact_id=" + selectedId,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
}
}
return items;
}
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"], contextmenu: {items: customMenu, select_node: true}
});
$.ajax({
url: "libs/display.php",
dataType: "json"
}).success(function(data) {
$("#treeview ul").append(data);
});
});
Does anyone have any idea what my problem is? Any help would be appreciated.
EDIT
After looking closer, I realize that the exact problem is that the necessary classes are not being added to the child nodes when calling via ajax. Still, I'm not sure why.
ANOTHER EDIT
display.php now contains this response text:
[
{
"attr": {
"id": 1
},
"data": 649,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 108,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 86,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 46,
"state": "closed"
}
]
Am I headed in the right direction?
Is your stylesheet being included, and have you set up correct URLs to the icons? It looks to me like that's why your data isn't being styled. However, looking at your code, a more likely reason that you aren't getting your styling is because you are just calling an arbitrary AJAX call outside the jsTree scope.
Take a look at the docs for the json_data plugin for jsTree. It's easy to use, provided you set up display.php correctly to only fetch the node that jsTree is requesting. It will make concurrent calls and get the nodes it needs, your script simply needs to serve them to it:
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"],
"contextmenu": {
items: customMenu,
select_node: true
},
"json_data": {
"ajax": {
"url": "libs/display.php",
"data": function(n) {
return { id : n.attr ? n.attr("id") : 0
}
}
}
});
The json_data plugin basically acts as a wrapper for a jQuery AJAX call, but the events are bound directly the jsTree core and the returned results are handled by jsTree. You'll probably need to tweak your return values a bit depending on what display.php is responding with, and what you have set your tree up to look like structurally.
Edit
This is a similar post that might help you:
jsTree and AJAX > Load all data via ajax

Parse JSON YQL Output with jQuery append to IDs

I have a YQL output JSON string at this URL: YQL JSON
I found some other
I am trying to understand why I cannot get certain items out of the JSON return. For example, using jQuery, if I want the first DIVs H1 I use:
$.ajax({
url:"http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.missoulaavalanche.org%2Fcurrent-advisory%2F%22%20and%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22content%22%5D%2Fdiv%5B1%5D'&format=json",
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'cbfunc'
});
function cbfunc(data){
var id = data.query.results.div;
$('#table').append('<li>'+id.h1+'</li>');
$('#table').listview('refresh');
}
I have tried to get some info, say the img alt or img src, from the second div... div1 like so:
function cbfunc(data){
var id = data.query.results.div[1];
$('#table').append('<li>'+id.img.alt+'</li>');
$('#table').listview('refresh');
}
I keep getting Undefined or no results... What I am missing or not understanding about getting results from the yql JSON list?
EDIT: I read a post on the YQL Blog about Cache busting... So I am using their suggestion there.
EDIT 2: here is the JSON from the yql. I would like to get div img src for example, but am not getting a return or I get an object. I think it would be data.query.results.div1.img.src
I get data.query.results.div.h1 no problem:
cbfunc({
"query": {
"count": 1,
"created": "2012-03-28T15:36:28Z",
"lang": "en-US",
"results": {
"div": {
"id": "content",
"div": [
{
"class": "post-2491 post type-post status-publish format-standard hentry category-advisories",
"id": "post-2491",
"h1": "March 26, 2012 Avalanche Advisory",
"p": {
"class": "postmetadata alt",
"small": {
"br": [
null,
null
],
"a": {
"href": "http://www.missoulaavalanche.org/category/advisories/",
"rel": "category tag",
"title": "View all posts in Advisories",
"content": "Advisories"
},
"content": "This entry was posted on Monday, March 26th, 2012 at 6:55 am\n Categories: \n"
}
},
"div": [
{
"id": "danger_rating",
"a": {
"href": "http://www.missoulaavalanche.org/wp-content/themes/missoula-avalanche/images/ratings/avalanche_danger_scale.jpg",
"img": {
"alt": "Current Danger Rating is MODERATE",
"src": "http://www.missoulaavalanche.org/wp-content/themes/missoula-avalanche/images/ratings/moderate.gif"
}
}
},
{
The jsonp function option is just define the function name server uses for the wrapper for jsonp.
To access your data you need to do it in success callback of $.ajax. Your code above is missing the $ before .ajax
$.ajax({
url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.missoulaavalanche.org%2Fcurrent-advisory%2F%22%20and%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22content%22%5D%2Fdiv%5B1%5D'&format=json",
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'cbfunc',
success: function(data) {
var results=data.query.results;
/* work with results object here*/
}
});
It's easier than you think if you use jQuery.getJSON.
Try this:
$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fwww.missoulaavalanche.org%2Fcurrent-advisory%2F%22%20and%20xpath%3D'%2F%2Fdiv%5B%40id%3D%22content%22%5D%2Fdiv%5B1%5D'&format=json",
function(data) {
var id = data.query.results.div;
$('#table').append('<li>'+id.h1+'</li>');
$('#table').listview('refresh');
}
);

display json data using xhrget (DOJO)

I am unable to figure out what is the problem with displaying json data..below is the code
var xhrGet1 = dojo.xhrGet({
url: "Page/",
handleAs: "json",
handle: function(response)
{
dojo.byId('json-data').innerHTML = response.questions[0];
}
});
Html
<div id='json-data'></div>
And my json file looks like this
{
"Info": {
"PURPOSE": ".... ",
},
"questions": [
{
"ID": 1,
"Question": "User ID",
"Information": "",
}, {
"ID": 2,
"Question": "Name",
"Information": "",
}
],
so on...any ideas??
The property handleAs : "json" in your xhr call makes the incoming json automatically eval'ed to javascript objects. So, you have to convert your javascript object back to string using JSON.stringify.
e.g. :
dojo.byId('json-data').innerHTML = JSON.stringify(response.questions[0]);
You can also use dojo.toJson for the same purpose. It uses json.stringify but has the benefit of having a second argument ("prettyprint"), allowing you to pretty-print out of the box, like this :
dojo.byId('json-data').innerHTML = dojo.toJson(response.questions[0], true);
wrap your JSON with PRE and CODE tags.
So:
dojo.byId('json-data').innerHTML = "<pre>code>" + response.questions[0] + "</code></pre>";
Also see: Display JSON as HTML for some libraries that can help you pretty-format your JSON when rendering in the browser

Categories