Beefy Boxes and Bandwidth Generously Provided by pair Networks
Don't ask to ask, just ask
 
PerlMonks  

Comment on

( #3333=superdoc: print w/ replies, xml ) Need Help??

Mojolicious comes with jquery2.x, here is how you can use it

docs

code is single file( moquery.pl ), subroutines above , static files and templates in __DATA__; The template language is simple, its regular perl %= time() or  <%= rand(time) %>

#!/usr/bin/perl -- # Automatically use-s strict/warnings/utf8 and feature :5.10 use Mojolicious::Lite; sub mojo_index { my( $self ) = @_; my $time = time; return $self->render( title => "Mojo $time"); } ## delay ajax requests (localhost too fast for disable visualfx) sub sleeper { my( $self ) = @_; if( $self->req->headers->header('x-requested-with') ) { ## "XMLHttpRequest" sleep 1.3; } return; } ## map paths to subroutines ### #~ route named 'index', render's template index.html.ep if html is acc +epted get '/' => \&mojo_index => 'index';;; #~ https://localhost:3000/index #~ https://localhost:3000/index.html #~ https://localhost:3000/index.txt get '/index' => sub { shift->render( title => "Mojo \$time") }; #~ https://localhost:3000/error post '/error' => sub { sleeper(@_); shift->render( data => '<b>this is not json (duh)</b>' ); }; #~ https://localhost:3000/simple any [qw[ GET POST ]] => '/simple' => sub { sleeper(@_); my( $self ) = @_; my $number = $self->param('toy_number') ; my $not_a = scalar( Scalar::Util::looks_like_number( $number ) ) ? 'looks_like_number' : 'DOES NOT looks_like_number' ;;;;;; my $message = $self->render( partial => 1, ## no http number => $number, not_a => $not_a, inline => q{You chose the <b>(<%= $number =%>)</b> and it is <b> <%= $not_a =%> </b>}, ); return $self->render( json => { result => $message } ); }; # Start the Mojolicious command system _aka_ shagadelic('daemon'); app->start; __DATA__ @@ index.txt.ep If you ask for text you will get text its <%= title %> @@ index.html.ep <html> <head> <title><%= title =%></title> <meta charset="utf-8" /></meta> </head> <body> <h1><%= title =%></h1> <div id="toy_toy_toy"> Yecho <input id="toy_number" type="text" value="42" /> <button onclick="test_yecho('<%= url_for 'simple' =%> ');" +> /simple </button> <button onclick="test_yecho('<%= url_for 'error' =%> ');"> + /error </button> <button onclick="test_yecho('/nowhere/nohow/notfound');"> +4our-0h-4our </button> <button onclick="test_yecho('http://example.com/fantasy'); +"> ex </button> <hr /></hr> <div id="toy_status"></div> <div id="toy_result"></div> </div> <hr /></hr> <table> <tr> <% for my $method ( qw[ get post ] ){ =%> <% for my $action ( qw[ simple error ] ){ =%> <td> %= form_for $action => (method => $method) => begin %= hidden_field toy_number => 42 %= submit_button "$method /$action" %= end </td> <% } ## end $action =%> <% } ## end $method =%> </tr> </table> <% for my $page ( qw{ index index.html index.txt /myecho.js } ){ =% +> | <%= link_to( $page => $page ); %> <% } ## end $page =%> %= javascript '/mojo/jquery/jquery.js' %= javascript '/myecho.js' </body> </html> @@ myecho.js var test_yecho = function ( route ) { "use strict"; /*** declare callbacks ***/ var toy_fail = function( data, textStatus, jqXHR ) { $('#toy_result').html( $("<div/>").text( String.concat( "\n", '.fail ' , route, "\n", textStatus, "\n", JSON.stringify(jqXHR, null, 2), "\n", JSON.stringify(data, null, 2), '' ) ).html() ); }; var toy_always = function(){ /*** clear the obsoleted, re-enable disabled ***/ $('#toy_result').html(''); $('#toy_toy_toy *').attr('disabled', null ); }; var toy_done = function( msg ) { try { $('#toy_result').html( '<b>hey toy</b><br>'+ msg.result ); } catch(e){ $('#toy_result').html( "hey exception<br> <pre>" + JSON.stringify( {uhoh:1, message: msg,exception:e}, null,2 ) ); } }; var toy_ajax = { type: 'POST', url: route, data: { 'toy_number': $('#toy_number').val() }, dataType: 'json', /* i want this */ accepts: { 'json': 'application/json' }, /* send Accept: this +*/ }; /*** do that thing, remoting ***/ $('#toy_toy_toy *').attr('disabled', 'disabled' ); $('#toy_result').html('.ajax-ing the ' + route ); $.ajax( toy_ajax ).always( toy_always ).done( toy_done ).fail( toy +_fail ); };

to run this

perl moquery.pl daemon perl moquery.pl daemon --mode=production -l http://localhost:80
and fireup your browser to http://localhost:3000 or http://localhost:80, click the buttons/links and watch the visual changes. Note how get/ing /error is a 404

All praise be to all the innovators and to everybody :) thanks all


In reply to Mojolicious::Lite +and jQuery +AJAX + Mojo::Template by Anonymous Monk

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post; it's "PerlMonks-approved HTML":



  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • Outside of code tags, you may need to use entities for some characters:
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.
  • Log In?
    Username:
    Password:

    What's my password?
    Create A New User
    Chatterbox?
    and the web crawler heard nothing...

    How do I use this? | Other CB clients
    Other Users?
    Others meditating upon the Monastery: (8)
    As of 2014-09-01 08:19 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      The best computer themed movie is:











      Results (299 votes), past polls