[dancer-users] Problem using jquery UI in Dancer

Wed Jun 11 15:44:02 BST 2014

Looks like the JavaScript isn't actually being loaded. You can confirm this
with Firefox developer tools or equivalent for your browser of choice. Most
likely this is a path issue; what directory did you put the jQuery UI
source in?

I use jQuery UI in a Dancer2 app. I used the dancer2 command line utility
to set up the directory structure, so I have:

myapp/
    lib/
        myapp.pm
    public/
        javascripts/
            jquery.js
            jquery-ui.js
            myapp.js
    views/
        index.tt
        layouts/
            main.tt
    ...

I load all my JavaScript in the main layout (views/layouts/main.tt),
something like this:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//
ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"
/>
    <link rel="stylesheet" href="[% request.uri_base %]/css/style.css" />

    <!-- Get jQuery and jQuery UI from Google's CDN if available, with
local copy as a fallback -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
type="text/javascript"></script>
    <script src="//
ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type =
"text/javascript"></script>
    <script type="text/javascript">/* <![CDATA[ */
        !window.jQuery && document.write('<script type="text/javascript"
src="[% request.uri_base %]/javascripts/jquery.js"><\/script>')
    /* ]]> */</script>
    <script type="text/javascript">/* <![CDATA[ */
        !window.jQuery.ui && document.write('<script type="text/javascript"
src="[% request.uri_base %]/javascripts/jquery-ui.js"><\/script>')
    /* ]]> */</script>

    <script src="[% request.uri_base %]/javascripts/myapp.js"
type="text/javascript"></script>
  </head>
  <body>
      [% content %]
  </body>
</html>

Two things to note: first, I use the template parameter 'request.uri_base'
to get an absolute URL to the base of the application (which points to the
public/ directory); second, I only use my local copy of jQuery if I fail to
get it from Google's CDN.

I create an HTML <input> element for my datepicker in views/index.tt:

<input type="text" id="datepicker">

And the JavaScript to create the datepicker is in
public/javascripts/myapp.js, something like:

$(function() {
    $('#datepicker').datepicker({
        dateFormat: $.datepicker.ISO_8601,
        maxDate: 0,
        changeMonth: true,
        changeYear: true
    });
});

(I haven't tested the above but it's essentially what my app does)

On Wed, Jun 11, 2014 at 7:59 AM, Sullivan Beck <sbeck at cpan.org> wrote:

> I've using Dancer 1.3115 on OpenSuSE 13.1.  I've downloaded jquery 1.11.1
> and the datepick plugin from http://keith-wood.name/datepick.html.
>
> I took the simplest test script from the datepick home page (and stripped
> it down to a single popup calendar -- that's the functionality I want) and
> put it in a very simple Dancer script. Unfortunately, although the HTML
> produced is correct, the Dancer script isn't working.
>
> When I run the dancer script and point my browser at it, I see a text box
> asking for a date.  If I click in the box, no calendar pops up to select
> the date.
>
> If I view the page source and copy the html into a dancer2.html file and
> open that file up in my browser and it works great.  I see the same page,
> and clicking in the box pops up the calendar.
>
> I'm a fairly recent user of Dancer, but I'm really liking it and want to
> use it for a project but I really need the datepicker to work.
>
> Any suggestions?
>
> I'm attaching the dancer2.pl script and the HTML it generates. My setup
> is that I have dancer2.pl and dancer2.html in a directory and a
> subdirectory jquery containing both jquery and the datepicker plugin (both
> completely unmodified).
>
>
> _______________________________________________
> dancer-users mailing list
> dancer-users at dancer.pm
> http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.preshweb.co.uk/pipermail/dancer-users/attachments/20140611/66a28790/attachment.html>