Hi!
I've been asked at work to create a website that runs under mojolicious
(perl web framework) and it need to have a dynamically created tree, based
on some info retrieved from other files.
Right now, I've been able to create the file that holds the json file to
populate the tree. ie:
[
{"id": "0", "parent": "#", "text":"0","icon":"folder",
"state":{"opened":true, "selected":false}},
{"id": "1", "parent": "0", "text":"1","icon":"file file-txt",
"state":{"opened":false, "selected":false}}
]
I've used the example from jstree that uses a json file and I've created
it properly. Now, the issue comes when I use the mojolicious script to
create it.
use strict;
use warnings;
use Mojolicious::Lite;
my $jsonlist;
sub appendLevel(){
#minimal use: id and parent
my $id = shift;
my $parent = shift;
my $text = shift;
my $icon = shift;
my $opened = shift;
my $selected = shift;
#data treatment for minimal use
$text = $id if ! defined $text;
$icon = "folder" if (! defined $icon and ($parent eq "root" or $parent
eq "#"));
$icon = "file file-txt" if (! defined $icon and ($parent ne "root" or
$parent ne "#"));
$opened = "true" if (! defined $opened and ($parent eq "root" or
$parent eq "#")); # if the node is a root node, keep it opened
$opened = "false" if (! defined $opened and ($parent ne "root" or
$parent ne "#")); # if the node is not a root node, keep it closed
$selected = "false" if ! defined $selected;
#alias treatment
$parent = "#" if $parent eq "root";
$opened = "true" if $parent eq "opened";
$opened = "false" if $parent eq "closed";
$selected = "true" if $selected eq "selected";
$selected = "false" if $selected eq "unselected";
my $temp = ','."\n".'{"id": "'.$id.'", "parent": "'.$parent.'",
"text":"'.$text.'","icon":"'.$icon.'", "state":{"opened":'.$opened.',
"selected":'.$selected.'}}';
if(! defined $jsonlist){
$temp = substr $temp,1; #remove first colon
$jsonlist = "[".$temp."]";
}else{
substr $jsonlist,-1, 0, $temp;
}
}
&appendLevel(0,"root");
for my $x (1..10){
&appendLevel($x,$x-1);
}
&appendLevel("master","#");
for my $x (11..20){
&appendLevel($x,"master");
}
# &appendLevel("master","root");
# &appendLevel("child","master");
print "\n".$jsonlist."\n";
get '/index' => sub {
my ( $mojo ) = @_;
# $mojo -> stash ( 'tagitems' => \@tagitems );
# $mojo -> stash ('levelsArray' => \@levelsArray);
$mojo -> render (template => 'index' );
};
app->start('daemon', '-l', 'http://*:8080');
__DATA__
@@index.html.ep
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jstree basic demos</title>
<style>
html { margin:0; padding:0; font-size:62.5%; }
body { max-width:800px; min-width:300px; margin:0 auto; padding:20px
10px; font-size:14px; font-size:1.4em; }
h1 { font-size:1.8em; }
.demo { overflow:auto; border:1px solid silver; min-height:100px; }
</style>
<!-- <link rel="stylesheet"
href="./../../dist/themes/default/style.min.css" /> -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css";
/>
</head>
<body>
<h1>AJAX demo</h1>
<div id="ajax" class="demo"></div>
<h1>Callback function data demo</h1>
<div id="clbk" class="demo"></div>
<h1>Interaction and events demo</h1>
<button id="evts_button">select node with id 1</button> <em>either click
the button or a node in the tree</em>
<div id="evts" class="demo"></div>
<!-- <script
src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="./../../dist/jstree.min.js"></script> -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js";></script>
<!-- 5 include the minified jstree source -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js";></script>
<script>
// ajax demo
$('#ajax').jstree({
'core' : {
'data' : {
"url" : "./root.json",
"dataType" : "json" // needed only if you do not supply JSON headers
}
}
});
// data from callback
$('#clbk').jstree({
'core' : {
'data' : function (node, cb) {
if(node.id === "#") {
cb([{"text" : "Root", "id" : "1", "children" : true}]);
}
else {
cb(["Child"]);
}
}
}
});
// interaction and events
$('#evts_button').on("click", function () {
var instance = $('#evts').jstree(true);
instance.deselect_all();
instance.select_node('1');
});
$('#evts')
.on("changed.jstree", function (e, data) {
if(data.selected.length) {
alert('The selected node is: ' +
data.instance.get_node(data.selected[0]).text);
}
})
.jstree({
'core' : {
'multiple' : false,
'data' : [
{ "text" : "Root node", "children" : [
{ "text" : "Child node 1", "id" : 1 },
{ "text" : "Child node 2" }
]}
]
}
});
</script>
</body>
</html>
and the output from the terminal is:
GET "/index"
Routing to a callback
Rendering template "index.html.ep" from DATA section
200 OK (0.005898s, 169.549/s)
GET "/root.json"
Template "not_found.development.html.ep" not found
Template "not_found.html.ep" not found
Rendering cached template "mojo/debug.html.ep"
Rendering cached template "mojo/menubar.html.ep"
404 Not Found (0.011762s, 85.020/s)
So, I know the problem is that mojo is seeing root.json as a url request,
so it's trying to reach root.json but as an url, not a file. What can I do
to fix it?
--
You received this message because you are subscribed to the Google Groups
"Mojolicious" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/mojolicious.
For more options, visit https://groups.google.com/d/optout.
