2017-09-13 17:31 GMT+02:00 Dan Book <[email protected]>:
> Static files are by default served from the "public" directory, make sure
> that is where you put your file. https://metacpan.org/
> pod/Mojolicious::Guides::Tutorial#Static-files
>
> On Wed, Sep 13, 2017 at 11:16 AM, Luis Diaz <[email protected]>
> wrote:
>
>> 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/jq
>> uery.min.js"></script>
>> <!-- 5 include the minified jstree source -->
>> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jst
>> ree.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.se
>> lected[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.
>>
>
> --
> 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.
>
You need to create a route for the ajax call, i added "root_json", then you
probably shuld adjust something in the tree rendering.
Paolo
use strict;
use warnings;
use Mojolicious::Lite;
use Mojo::JSON qw(decode_json encode_json);
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' );
};
get '/root_json' => sub {
my ( $self ) = @_;
# render json with message
$self->render(json => decode_json($jsonlist) );
};
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>
--
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.
