Problem using jquery UI in Dancer
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).
Hi Sullivan, You'll need to put those js (and any css) files into approot/public/jquery (but i'd recommend dropping it into directory named 'js/jquery'). Dancer provides static file location through 'public' directory. see: https://metacpan.org/pod/distribution/Dancer/lib/Dancer/Tutorial.pod#Serving... for more details in this case, you don't need to use 'send_file', just drop them in public HTH, Lee On Wed, Jun 11, 2014 at 8:59 AM, Sullivan Beck <sbeck@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@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
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@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@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
In case it's helpful, this is what I switch on when loading a page - it informs me if the page has failed to find the javascript/css files I've referred to: https://addons.mozilla.org/en-US/firefox/addon/firebug/ On Wed, Jun 11, 2014 at 2:59 PM, Sullivan Beck <sbeck@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@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
As others have already suggested, it looks like your files are not being served by Dancer over http because Dancer doesn't know they're part of the app (whereas your browser can find them on the file system if it's looking in file:// ... urls, Dancer does not automatically expose the file system). You might find it easiest to start with a boilerplate app using dancer -a App::MyApp (or whatever you want to call the thing) and work from there, as per http://www.perldancer.org/quickstart - that will mean your app is structured the same way as other people's dancer apps and will be easier to maintain in the long run than designing your own folder structure. Alternatively, if you have some reason for not doing something like the above, you could replace the relative urls in the script tags with absolute urls which you know to work, i.e. link to the JS files hosted on a CDN. Daniel From: Sullivan Beck <sbeck@cpan.org> To: dancer-users@dancer.pm, Date: 11/06/2014 14:59 Subject: [dancer-users] Problem using jquery UI in Dancer Sent by: dancer-users-bounces@dancer.pm 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). [attachment "dancer2.pl" deleted by Daniel Perrett/ELT/UK/cambridge] [attachment "dancer2.html" deleted by Daniel Perrett/ELT/UK/cambridge] _______________________________________________ dancer-users mailing list dancer-users@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
Yes. Thanks to everyone who replied... I just got my app working as desired. I had indeed overlooked the section on static files needing to be in public... one problem with having a tool which really is quite easy to start using is that sometimes you start using it before you've sufficiently digested the docs! :-) Thanks again to everyone. On 06/11/2014 12:14 PM, Daniel Perrett wrote:
As others have already suggested, it looks like your files are not being served by Dancer over http because Dancer doesn't know they're part of the app (whereas your browser can find them on the file system if it's looking in file:// ... urls, Dancer does not automatically expose the file system).
You might find it easiest to start with a boilerplate app using dancer -a App::MyApp (or whatever you want to call the thing) and work from there, as per http://www.perldancer.org/quickstart- that will mean your app is structured the same way as other people's dancer apps and will be easier to maintain in the long run than designing your own folder structure.
Alternatively, if you have some reason for not doing something like the above, you could replace the relative urls in the script tags with absolute urls which you know to work, i.e. link to the JS files hosted on a CDN.
Daniel
From: Sullivan Beck <sbeck@cpan.org> To: dancer-users@dancer.pm, Date: 11/06/2014 14:59 Subject: [dancer-users] Problem using jquery UI in Dancer Sent by: dancer-users-bounces@dancer.pm ------------------------------------------------------------------------
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).
[attachment "dancer2.pl" deleted by Daniel Perrett/ELT/UK/cambridge] [attachment "dancer2.html" deleted by Daniel Perrett/ELT/UK/cambridge] _______________________________________________ dancer-users mailing list dancer-users@dancer.pm http://lists.preshweb.co.uk/mailman/listinfo/dancer-users
participants (6)
-
Andrew Solomon -
Daniel Perrett -
Lee Carmichael -
Maxwell Carey -
sbeck＠cpan.org -
Sullivan Beck