Hi! I've another question.. How can I pass data from javascript to perl? I need to do stuff if the user clicks on one node of jstree. I've looked in google but I can't find anything, so I assume I'm not looking for it properly. Will appreciate any help :)
On Wednesday, September 13, 2017 at 5:31:05 PM UTC+2, Dan Book wrote: > > 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] > <javascript:>> 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/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] <javascript:>. >> To post to this group, send email to [email protected] >> <javascript:>. >> 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.
