My Div
<div id="container">
The Jstree Configuration
$('#container').jstree({
'core' : {
'plugins': ["wholerow", "checkbox"],
'data' : {
"url" :apex.server.url ({p_request: "APPLICATION_PROCESS=GET_NODE_DATAA",x01: 0 || 0,x02: "LOADA" }),
"dataType" : "json", // needed only if you do not supply JSON headers
"dataFilter" : function (new_data) {
return new_data ;
}
}
}
});
Data Comming for the Server after run the jstree configuration and the new_data output
[{"data":{"title":"Form Modules(15)","attr":{"href":"#"},"icon":"form"},"attr":{"id":"1149043"},"state":"closed"},{"data":{"title":"PL/SQL Libraries(16)","attr":{"href":"#"},"icon":"pll"},"attr":{"id":"1149044"},"state":"closed"},{"data":{"title":"Menu Modules(2)","attr":{"href":"#"},"icon":"menu"},"attr":{"id":"1149045"},"state":"closed"},{"data":{"title":"Object Libraries(5)","attr":{"href":"#"},"icon":"olb"},"attr":{"id":"1149046"},"state":"closed"},{"data":{"title":"Report Modules(12)","attr":{"href":"#"},"icon":"onrptprop"},"attr":{"id":"1149047"},"state":"closed"},{"data":{"title":"APEX Applications(5)","attr":{"href":"#"},"icon":"apex"},"attr":{"id":"1149048"},"state":"closed"},{"data":{"title":"Database Objects(1701)","attr":{"href":"#"},"icon":"database"},"attr":{"id":"1149049"},"state":"closed"},{"data":{"title":"ASCII FILES(11)","attr":{"href":"#"},"icon":"ascii"},"attr":{"id":"1149061"},"state":"closed"}]
But the jstree show like in the screeshot
screeshot. But it dont display Data
I know that my answer isn't a conventionnal way to use Json, but if you can return an html string server-side, you can use jsTree with HTML feed methode : it works with <ul> and <li> where <ul> il a node. I'm sure that you need your IDs to do something afterward, but then try to use data arttributein your HTML string to get it
Related
I am trying to use mustache and jQuery to import a JSON and create a html template.
I have followed tutorials to get to this point, but nothing shows in the browser and there are no error messages.
HTML
div id="repeatcontent"/div
Script: I import mustache, greate the template script and then use javascript to import the JSON.
<script src=mustache.min.js></script>
<script id="tutorials" type="text/template">
{{#a_tutorials}}
<p>{{title}}<p/>
{{/a_tutorials}}
</script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('audacity_tutorials.JSON', function(data) {
var template1 = $('#tutorials').html();
var html = Mustache.to_html(template1, data);
$('#repeatcontent').html(html);
});
});
</script>
JSON
{
"A_tutorials" : [
{
"Title" : "Binary",
},
{
"Title" : "Clipping",
}
]
}
There are no error messages, and the screen is completely blank. I have also used console.log to try and figure it out but it returns all the data I ask it for.
Your mistakes are:
A_tutorials in json file while you use a_tutorials in js
Title in json file while you use title
your json file is incorrect. For instance this line
"Title" : "Binary",
must be changed with:
"Title" : "Binary"
You may test json online by yourself.
Mustache is case sensitive.
// $.getJSON('z.json', function(data) {
var data = {
"A_tutorials" : [
{
"Title" : "Binary"
},
{
"Title" : "Clipping"
}
]
};
var template1 = $('#tutorials').html();
var html = Mustache.to_html(template1, data);
$('#repeatcontent').html(html);
// });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<script id="tutorials" type="text/template">
{{#A_tutorials}}
<p>{{Title}}<p/>
{{/A_tutorials}}
</script>
<div id="repeatcontent"></div>
I have a working JS Render template that pulls in a different JSON file based on the values of a query string. I am trying to figure out how to change the value of the JS Render element (id_1) based off of the query string field "source".
So if my url ends with "?market=ab&source=index", I want
"{{:id_1}}" to display "index_id_1" from the ab.JSON file.
HTML
<script type="text/x-jsrender" id="logoTempl">
<div id="cta-div">
Button
</div>
</script>
<div class="mainContainer">
</div>
JSON
[{"assets" : {
"field1" : "value",
"field2" : "value"
},
"ids" : {
"index": {
"id_1": "index_id_1",
"id_2": "index_id_2",
"id_3": "index_id_3"
},
"email": {
"id_1": "email_id_1",
"id_2": "email_id_2",
"id_3": "email_id_3"
}
}
}
]
JS
if (market == 'ab' && source == 'index') {
$.getJSON('data/ab.json', function(data) {
var logoField = logo.render(data);
var id1 = data[0].ids.index.id_1
$(".mainContainer").html(logoField);
$("{{:id_1}}").html(id1);
})
}
If I understand correctly you want the template to show the value ids[source].id_1.
You can pass in source as a helper, e.g.
...logo.render(data, {idgroup: source});
and then in the template, write:
{{:ids[~idgroup].id_1}}
or you can create a getId helper function, e.g.:
...logo.render(data, {getId: function(index) {
return data[index].ids[source];
}});
and then in the template, write:
{{:~getId(#index).id_1}}
I struggling with datatables to fill my table.
The problem i have is that when i get my google calendars in this format
{"23gjsd91su3guu509o1bchhqms#group.calendar.google.com":{"calendar_id":"23gjsd91su3guu509o1bchhqms#group.calendar.google.com","calendar_title":"#1612 White Quartz Apartment"},"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com":{"calendar_id":"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com","calendar_title":"#994 Cisco Amber (T2)"},"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com":{"calendar_id":"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com","calendar_title":"#1443. Marley Blue"}}
Need help on put datatables to work with this.
Thanks
You must sanitize the JSON so it is ordered on the form [{item}, {item}, ..] :
function sanitizeData() {
result = [];
Object.keys(data).forEach(function(key) {
result.push(data[key]);
})
return result;
}
Then, if you have table like this
<table id="example"></table>
You can now populate a dataTable with the content of the JSON this way :
var table = $('#example').DataTable({
data : sanitizeData(),
columns : [
{ title : 'id', data : 'calendar_id' },
{ title : 'title', data : 'calendar_title' }
]
})
demo -> http://jsfiddle.net/zbuudydv/1/
Currently I have a json file that populates information to my chart. An example of this chart can be found here: http://marmelab.com/ArchitectureTree/. I also have a panel to the right which is meant to display the information of one of the charts node's when clicked. However I don't know how to do this.
Say if I had in my json array:
{
"name": "Blogs",
"url": "blogs.my-media-website.com/*",
"dependsOn": ["Wordpress MU"],
"technos": ["PHP", "Wordpress"],
"host": { "Amazon": ["?"] }
},
I would click on 'Blogs' in the chart and the 'url', 'dependsOn' etc would then be displayed in the panel. I'm sure this function uses AngularJS to do this. Can someone point me in the right direction on how to do this?
On click of Blogs call below function :
In your controller, try adding this function.
$scope.onClickOfBlogs = function(){
$http.get('Your_JSON_file_Path_here').success(function(response){
$scope.jsonObject= response;
}).error(function() {
console.log('error occured while getting JSON file');
});
};
in your Panel HTML : -
<div id ="info">
<span>URL : {{jsonObject.url}} </span>
<span>Name : {{jsonObject.name}} </span>
<ul>
Depends on :
<li ng-repeat = "depends in jsonObject.dependsOn"> <!-- to iterate on array you need ng-repeat -->
{{depends}}
</li>
</ul>
</div>
you will get the data from json file into your html panel.Hope this helps.
**
** : http://plnkr.co/edit/dbJ0bhHhvASffJU9liY6?p=preview
Hi everyone i have an issue i want to make an autocomplete in jQuery and i have an json file in the same folder here is the code
var auto = $(function() {
$("#recherche").autocomplete({
source: "code.json",
minLength: 1,
})
});
and here is a sample of the json file :
{
"__type": "Featsee",
"feat": [
{
"id": {
"ID_THING": 1111
},
"properties": {
"CODTHING": "405136",
"TIONNEMENT": "VRAC"
}
}
]
}
the html code is the following :
<label for="tags" >Recherche lot : <input id="recherche" type="text" class="searchable" placeholder="rechercher ici"/></label>
the plugin is the following :
<script src="libs/jquery/js/jquery-2.1.1.min.js"></script>
<script src="libs/jquery/js/jquery-ui.js"></script>
the json file is correct but i want the autocomplete to be jus for CODTHING do you see how can i do that ??
and CODTHING is the code a want it to be the autocomplete
The JSON you provide to jQuery UI's autocomplete needs to be an array of objects with label and value properties or an array of strings.
http://api.jqueryui.com/autocomplete/#option-source
The rest of the answer I can only guess due to the brevity of the JSON you gave us.
If lots.json is just a plain JS file you can look through the `feat" array in your JSON data and return strings based on that.
(function($){
var lots = $.get('lots.json');
lots.done(function (results) {
var data = $.map(results.feat, function (lot) {
return lot.properties.CODTHING;
});
$("#recherche").autocomplete({
source: data
});
});
}(jQuery));
If lots.json is really a server side file that you can feed some data to and filter it there you can use a function like documented on this answer:
JQuery autocomplete source from another js function