[dancer-users] Problem using jquery UI in Dancer
Maxwell Carey
mcarey at ucar.edu
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>
More information about the dancer-users
mailing list