jQuery datepicker does not work | XM Community
Solved

jQuery datepicker does not work

  • 18 January 2019
  • 6 replies
  • 423 views
I
If I use the javascript-function (see attachemt) to attach the jQuery-datepicker to a text-entry-question, then the datepicker only works if I reference jQuery via "look an feel/header".

Here my code for the header:

<link href="https://code.jquery.com/ui/1.11.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

And here's my question:
Why do i have to reference jQuery in the header, even though jQuery is integrated in qualtrics?

Does anyone have an explanation for this? Maybe I am doing something wrong.

Thanks in advance and a nice weekend.
icon

Best answer by TomG 21 January 2019, 20:50

View original

6 replies

TomG
Rank
Userlevel 7
Badge +27
You need to reference the jQuery UI in the header since that isn't loaded by Qualtrics (your first and third lines). You shouldn't need to load jQuery itself (your second line).
I
Thank you very much for your answer.

But if I open the Javascript console of my browser and drop "jQuery.ui.version", I get "1.11.1" as feedback.

I don't understand that.
TomG
Rank
Userlevel 7
Badge +27
@Ingo,

I think jQuery or jQueryUI is logging the jQueryUI version. Maybe because it is older or doesn't match the current jQuery version. You could load jQuery UI 1.12:
```
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
```
A
Badge +1
When I change the language of the survey, this no longer works. Any idea why?
TomG
Rank
Userlevel 7
Badge +27
> @afclark82 said:
> When I change the language of the survey, this no longer works. Any idea why?

It would be helpful if you described what exactly you mean by "this no longer works" (i.e., what happens, what does the screen look like, etc.). Have you read the localization documentation and implemented it?
A
Badge +1
> @TomG said:
> > @afclark82 said:
> > When I change the language of the survey, this no longer works. Any idea why?
>
> It would be helpful if you described what exactly you mean by "this no longer works" (i.e., what happens, what does the screen look like, etc.). Have you read the localization documentation and implemented it?

I have no idea what the localization means. When I change language from English to French, the date picker does not come up. It is just a blank text box. Same thing happens when I turn it back to English.

Here is the current code I am using:

In header:

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

In Javascript:

Qualtrics.SurveyEngine.addOnReady(function()
{
jQuery("#"+this.questionId+" .InputText").each(function(index){
jQuery(this).datepicker({
yearRange: '2008:2010',
dateFormat : 'yy-mm-dd',
defaultDate: '2008-01-01',
changeMonth: true,
changeYear: true
})
});
});

Leave a Reply


Terms & Conditions