Anyone using jQuery (javascript) to program some client side elements in a web page? For example, I'm looking to have a drop down with a vary number of records to display on a page, and I want to update the display without reloading the page. So I'm playing with using 'Mojolicious::Lite' and some jQuery, but I'm hitting some brick walls. Anyone care to look at this code below and tell me why I don't see my selected values from the two different <select> pairs showing up in the named <div> pairs? #!/usr/bin/perl # Based on: http://api.jquery.com/change/ use Mojolicious::Lite; get '/top' => sub { my $self = shift; $self->stash(x => 10); $self->render('top'); }; app->secret('sweets'); app->start; __DATA__ @@ top.html.ep % title "jQuery dropdown select tests"; % layout "head"; <select name="sweets" multiple="multiple"> <option>Chocolate</option> <option selected="selected">Candy</option> <option>Taffy</option> <option selected="selected">Caramel</option> <option>Fudge</option> <option>Cookie</option> </select> <div id="sweets"></div> <script type="text/javascript"> $("select").change(function () { var strstr = ""; $("select option:selected").each(function () { strstr += $(this).text() + " "; }); $("div#sweets").text(strstr); }) .change(); </script> <hr> <select name="trees"> <option>Oak</option> <option selected="selected">Beech</option> <option>Pine</option> <option>Ash</option> <option>Willow</option> <option>Elm</option> </select> <script type="text/javascript"> $("select").change(function () { var str = ""; $("select option:selected").each(function () { str += $(this).text() + " "; }); $("div#trees").value(str); }) .change(); </script> <div id="trees"></div> @@ head.html.ep <!DOCTYPE html> <html> <head> <title> <%= $title %> </title> <style> div { color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <%= content %? </body> </html> --