Using a datepicker jQuery widget in a pyramid project

Question

i want to use a jquery widget in my pyramid project. Specifically I want to use a datepicker widget.

I copypasted the jquery datepicker code from http://jqueryui.com/demos/datepicker/ in my template (.pt) file.

<script type="text/javascript">
    jQuery(function() {
        jQuery( "#datepicker" ).datepicker();
    });
</script>
<div class="demo">
<p>Date: <input type="text" id="datepicker"></p>

And I downloaded jquery and I am including its js files like this:

<script src="${request.static_url('eventmanager:static/javascripts/jq/jquery-1.7.1.min.js')}"></script>
<script src="${request.static_url('eventmanager:static/javascripts/jq/jquery-ui-1.8.18.custom.min.js')}"></script>

However, in the page only the text input form appears, with no datepicker calendar, what am I doing wrong?

edit: In my browser javascript console I get the error:

Uncaught TypeError: Object [object Object] has no method 'datepicker'

for when i do

jQuery('#datepicker').datepicker(

Have you included [jQuery UI's css](http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-darkness/jquery-ui.css)? — DarkAjax, Mar 22 '12 at 17:15
you should probably look in the net panel in your browser to see if it is actually fetching the script. It may be returning a 404 silently. which would tell me static_url is not finding the script for some reason. — Tom Willis, Mar 22 '12 at 17:50

score 1 · Accepted Answer · answered Mar 22 '12 at 17:50

1

With your code, the calendar should appear, but only when you click in the input box.

To show a default calendar icon next to the input, do something like this:

$(function(){
  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'calendar.gif',
    buttonImageOnly: true           
  });
  $('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
});

You will have to provide the calender.gif icon yourself.

IN RESPONSE TO YOUR EDIT: Did you call jQuery.noConflict()?

answered Mar 22 '12 at 17:50

Stefan

3,850
2
26
39

I tried both calling jQuery.noConflict() and changing the script itself with the one you provided and the error persists – Abel Dantas Mar 22 '12 at 18:33
All I can find out about this, is that this sometimes happens if you link to the same jQuery scripts more than once. If you haven't yet, check the source of your final rendered page, and make sure you only include jQuery and UI scripts once. – Stefan Mar 22 '12 at 19:29
you are right, I was linking jQuery scripts in 2 different templates, now i only reference them in the base template and the error changed to "Uncaught ReferenceError: jQuery is not defined" – Abel Dantas Mar 22 '12 at 20:49
It's working, thanks Stefan. This last problem was because the js include order was wrong, as explained here: http://stackoverflow.com/questions/2194992/jquery-is-not-defined. – Abel Dantas Mar 22 '12 at 20:56

Danny Navarro · Answer 2 · 2012-03-22T21:34:27.947

Have you checked deform? It makes this kind of forms in Pyramid very straightforward. You may find easier to use the get_widget_resources method in the view serving the form and injecting every asset needed by any deform widget (including datepicker widget) in the template like this

Make sure you are using a static view for deform assets when configuring your application. For the datepicker widget I think you also need to insert <script>deform.load()</script> somewhere at the end of the template, but I might work without doing so.

Using a datepicker jQuery widget in a pyramid project

2 Answers2