Beefy Boxes and Bandwidth Generously Provided by pair Networks
Perl: the Markov chain saw
 
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
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            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 drinking their drinks and smoking their pipes about the Monastery: (10)
    As of 2015-07-07 20:52 GMT
    Sections?
    Information?
    Find Nodes?
    Leftovers?
      Voting Booth?

      The top three priorities of my open tasks are (in descending order of likelihood to be worked on) ...









      Results (93 votes), past polls