MooTools Datepicker issues

Hi GreyHead,

I am trying to get MooTools DatePicker to work. I use J 2.5.4 and CF V4 RC3.3.

I have set-up a form with just 1 date field.

In General Tab I have selected MooTools DatePicker with Vista style.
In a Load JS event I have the following line: Locale.use('it-IT')
In the Custom MooTools DatePicker event I also have Vista style and + option: startView: 'years'

I load the form with tmpl=component and I don't have any error in firebug.
I can see the following files loaded:

datepicker.js -> not sure if needed since I have choosen MooTools Datepicker

Locale.en-US.DatePicker -> although I wanted it-IT
Picker.Attach.js
Picker.Date.js
Picker.js

Style is DashBoard instead of Vista.

When I check the list of js-flavoured files loaded I see various mootools, then jquery.noconflict and finally jQuery.

Please point me in the right direction 'cos I am just running around in circles.

Thanks,
adop

Hi adop,

The quick answer is to disable whatever is loading JQuery; or get them to fix it so that it loads in nonConflict mode.

The loner answer is:
Your template (or some other component) is loading the jQuery JavaScript library.

Out of the box jQuery isn't compatible with the MooTools library used by Joomla! and ChronoForms. You can use jQuery with MooTools in no-conflict mode. There are various ways of doing this. The simplest - which may or may not work - is to add a line of script in the ChronoForms Form JavaScript box:

jQuery.noConflict();

This will free the $ operator which is used by MooTools, so you may need to update your own javascripts to use the longer jQuery operator.

There is also a neat plugin named JB Library from Joomla! Bamboo that allows you to control on which pages jQuery is loaded, and will always load it in no-conflict mode. However this requires that JQuery is loaded using the Joomla Document object methods.

I have a tutorial on Resolving jQuery problems that explores some of the issues an diagnostics and shows how to modify one template example to use the Joomla! Document methods to load JQuery in noConflict mode.

Bob

Hi GreyHead,

thanks for your fast and comprehensive reply. I am back after experiencing the pleasures of js conflicts.

First of all regarding your Tutorial I had read it quickly before posting to this forum but it requires something more than just a quick reading and I fear I will have to go back to it.

After your reply I have disabled all jQuery loaded in various way, installed and played with JB Library plugin by Joomla, made sure that compression was disabled in the template.
However what made the difference was turning on the option Dynamic Files (Load the code inside a dynamic file instead of the page head, useful in few situations.) in JS load event. I thought it was only a matter of keeping the page tidy while in practice it is not like that. The same option in Genearl tab Config must be off for the whole thing to work. If you know why this happens I would be very pleased to learn it. This has enabled me to make the MooTools DatePicker work when calling the form with tmpl=component, ie without the template.

However there are still some sore points.
1) I load a locale with Locale.use('it-IT'); in JS load event but still do not get it in the html page. Could you please confirm that I should see among the files loaded Locale.it-It.DatePicker.js instead of Locale.en-US.DatePicker.js that I see loaded now?
2) Following one post of yours regarding language translations I load

days: days_array, months: months_array

in Date time Picker Config in General tab,

var days_array = new Array(#DAYS#);
var months_array = new Array(#MONTHS#);

in Load JS event, and

#DAYS#='Domenica', 'Lunedì', 'Martedì', 'Mercoledì', 'Giovedì', 'Venerdì', 'Sabato'
#MONTHS#='Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre'

in Multi Language - it-IT.
When I access the form without the template (&tmpl=component) everything seems fine, but when I access it with the template I get the following error message:

days_array is not defined

and there is nothing else on the loaded page, just 3 date fields with different options.
In both cases I also see that a GET request for

http://mydomain.com/components/com_chronoforms/js/load_js.php?code=f7aca6a20eb2ff51d2ea94759d8db2ff75a0f332eNptzr8KwkAMBvBd8B0Ol1NQB520OBTEXCL4Z1BcXCVtw3nQXiRNFX0m38IX0_ZaXCe3X74QvhTzyWw6720ogQzHZYF9bWW0PupB0O3cgFUKj-IMzPBQC-XwrsLKfb2kHJ1NQA-V3pQO0_er4hZYfkZOKGunyNKt9QkdcuMDxCD068vJyeVvY4TOgaXqZoVxzI2_jc8a4ZVthj4yxi8jWxpH_keT-Sw0VEitA4pgHnN9tBehhrvvp228tIn3IOgFH-_wYfI,

gets a 403 forbidden acces error. Is this the dynamic file loaded?
3) Could you please confirm that file Datepicker.js that I see loaded among the scripts in Firebug is supposed to stay there even though I do not use the standard datepicker?

Thanks,
adop

Hi adop,

If you use the MooTools Datepicker then setting the Locale should be sufficient to set the language for days and months. These are loaded from the MooTools files, not from the Locale.xx-XX.DatePicker.js file ( that just contains a couple of minor messages*).

Please remove all of the configuration options you have in 2) - they are not needed with the MooTools datepicker.

Please turn off the Dynamic JS loader - it seems to cause problems in most cases (the sequence in which scripts are loaded can get broken).

See if that fixes the problems.

There probably shouldn't be a dataepicker.js file being loaded by ChronoForms, though something else on the site may load it.

Bob

* I think that the standard Show HTML action always loads the US version of this. It contains these strings

Locale.define('en-US', 'DatePicker', {
	select_a_time: 'Select a time',
	use_mouse_wheel: 'Use the mouse wheel to quickly change value',
	time_confirm_button: 'OK',
	apply_range: 'Apply',
	cancel: 'Cancel',
	week: 'Wk'
});

Hi GreyHead,

I have removed the language config options and turned off Dynamic Files but the issue is still there, ie only standard config is loaded in english only and only days view.
No errors are show in Firebug.

Regarding your comment about dataepicker.js there is nothing else loaded on this page, not even the template, so I guess it can only come from CF.

Hi adop,

By all means email or PM me the site URL and a SuperAdmin login and I'll take a quick look.

Bob

Hi adop,

For some reason that I can't work out both versions of the DatePicker configuration are being added the to form page:

//<![CDATA[
window.addEvent('load', function() {
new Picker.Date($$('.DateOfBirth'), {pickerClass: 'datepicker_vista', format: '%d-%m-%Y', allowEmpty: 1, timePicker: 0, pickOnly: 'days', startView: 'years'});
});
//]]>
//<![CDATA[
window.addEvent('load', function() {
new Picker.Date($$('.YearOfFirstRegistration'), {pickerClass: 'datepicker_vista', format: '%Y', allowEmpty: 1, timePicker: 0, pickOnly: 'years', startView: 'years',maxDate: new Date()});
});
//]]>
//<![CDATA[
window.addEvent('load', function() {
new Picker.Date($$('.MaxDate'), {pickerClass: 'datepicker_vista', format: '%d-%m-%Y', allowEmpty: 0, timePicker: 0, pickOnly: 'days', minDate: new Date(), maxDate: new Date().increment('month',3), startView: 'days'});
});
//]]>
window.addEvent('load', function() {
new DatePicker($$('.cf_date_picker'), {
pickerClass: 'datepicker_dashboard', format: 'Y-m-d', allowEmpty: true, inputOutputFormat: 'Y-m-d'
});
new DatePicker($$('.cf_datetime_picker'), {
pickerClass: 'datepicker_dashboard', format: 'Y-m-d H:i:s', timePicker: true, allowEmpty: true, inputOutputFormat: 'Y-m-d H:i:s'
});
new DatePicker($$('.cf_time_picker'), {
pickerClass: 'datepicker_dashboard', format: 'H:i:s', timePickerOnly: 'true', allowEmpty: true, inputOutputFormat: 'H:i:s'
});
}); 

The first set are for the MooTools datapicker version and the second set for the MonkeyPhysics version. Looking at the code in the Show HTML action this should be an 'either/or' choice - it should not be possible to load both sets :-(

I don't have any obvious solution - I've taken a form backup and I'll keep thinking about it to see if I can work out what is happening.

Bob

PS I slso see that there are both compressed and uncompressed versions of MooTools loading. I don't' think that this has nay connection to the datpicker problem though.

Hi adop,

I found the problem :-(

My Show HTML [GH] action hadn't been updated to handle the MooTools Datepicker. I've done that now; please update the copy you are using to the current release and it should work OK. You no longer need the Locale script as that is inserted autoamtically based on the current language.

Bob

Hi GreyHEad,

I have updated Show HTML [GH] action and there is some improvements, ie the calendar pops up with the right style e config (days, minDate, etc.) when loaded without the template only. When loaded with the template nothing pops up.

If I remove the Locale setting I only get english strings. In order to have Italian strings I still need to include

<?php
$lang =& JFactory::getLanguage();
$tag = $lang->getTag();
echo "Locale.use('{$tag}');";
?>

Moreover in both cases, with and without a Locale set, I get the following error

set is not defined

which refers to the following line

set.Locale('en-US');

In any case thanks for your help.

Regards,
adop

Hi adop,

Thanks for that. I can now see that there are some problems with the datepicker classes that I thought had been solved a while ago :-( I think that what is happening is that two date-pickers are being assigned to the input one with your custom settings and one with the default settings.

I'll take another look at this in the morning and see if I can get to the bottom of it.

Bob

PS The 'set' error is just a typo on my part :-( should be Locale.use()

Hi adop,

Quick update: moving the Show HTML action before the Custom Date picker actions seems to fix the problems I was seeing earlier. It loads the custom scripts after the standard ones and so they take precedence - a bit crude but it seems to work.

Bob

Hi adop,

I can’t get the datepickers to display with the template :-(

I fixed the 'set' bug and the Show HTML [GH] action now shows the calendars without the template but I can't tell if the language is being shown correctly as I can only see the site in English at the moment.

Bob

Hi GreyHead,

Following your latest post I have set up different templates to understand if the issue relates to the template I use or there is something else.

There are some common traits:
Locale is still a problem since I cannot get it right even if I include

Locale.use('it-IT');

In all cases the 4 DatePicker files are loaded twice by all templates.

I have set the following default templates and checked the display with/without template. These are the findings:

en-EN -> template: Atomic
[list]
ie9:

with template: Does not display

without template: Does not display
Firefox:

with template: displays Ok

without template: displays Ok
chrome:

with template: displays Ok

without template: displays Ok

[/list]
es-ES -> template: Beeze 20
[list]
ie9:

with template: Does not display

without template: Does not display
Firefox:

with template: displays Ok

without template: displays Ok
chrome:

with template: displays Ok

without template: displays Ok

[/list]
it-IT -> template: JSN Teki (the one we began with)
[list]
ie9:

with template: Does not display

without template: Does not display
Firefox:

with template: Does not display

without template: displays Ok
chrome:

with template: Does not display

without template: displays Ok

[/list]
Regarding the template I use I can talk to the company that supplys it. However it would be easy for the to say that the problem is due to files being loaded twice. So I wonder if I should wait or do it now.

Regards,
adop

Hi adop,

The duplicate files is a tricky one. I'll see if I can work out a way to handle that. (The ChronoForms actions are largely independent and there isn't an established way to flag up that another action has already loaded the same file. It should be possible though.)

The IE9 problem I suspect is a symptom of the IE9+MooTools bug that we've seen before. The only fix I haved is to force those pages into IE8 mode. Please see this post for a fix.

Bob

Hi GreyHead,

just for your info I have read the post that you suggested and applied the code but it does not make any difference. With ie9 the calendar does not display. I have also tried with browser mode set to ie8 and ie7 with the same results.

Regards,
adop

Hi Bob,

do you have any news about the duplication inssue described below?

Thanks,
adop

Hi Bob,
you may remember from this rather long and a now slightly dated thread that there was an issue with the MooTools Datepicker being loaded twice in the document. I was just wondering if you have managed to get a solution for it.
If not could you just say if there is another way to make a datepicker work with CF forms and in case provide some details. Also any other solution that you can suggest will be much appreciated.

Thanks,
adop

Hi adop,

Still on the to-do list - though I'm not at all sure that the multiple load requests are the cause of the problems you are seeing.

Bob