You need an ajax call, with the URL set to a valid route in the mojolicious application. Search for "mojolicious ajax" and you will find some examples. Paolo
2017-09-14 14:58 GMT+02:00 Luis Diaz <[email protected]>: > 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]> 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 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.
