jQuery help?

15 Nov 2011

      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>

--

John Stoffel

tags

participants (1)