Migrating form from Joomla 2.5 to 3
Hi, I'm having a bit of trouble recreating my rather complex form created initially in CF4/J2.5 in J3.
1. Install V4 on J3
I initially thought that it would be a simple case of installing Chronoforms V4 in Joomla 3 as this would have definately been the most straightforward method, but as my form was slider-based it didn't work and I soon found out why (http://www.chronoengine.com/forums/posts/f26/t90627.html).
2. Recreate V4 form in V5 on J3
I then decided to try to recreate my form in V5 but after doing the majority of the preparation found it was going to involve quite a lot of re-jigging as far as the actions side of things was concerned, so I had the bright idea of changing the container function in my original V4 form to tabs, which seemed to initially work. However, there is a problem in that the date pickers written into the javascript to appear in certain fields don't seem to work.
I have attached a pdf to demonstrate.
Many thanks in advance
Adam
p.s. I am not a programmer - the javascript was written by someone else, but like I said, it works on J2.5 no problem.
Hi, I'm having a bit of trouble recreating my rather complex form created initially in CF4/J2.5 in J3.
1. Install V4 on J3
I initially thought that it would be a simple case of installing Chronoforms V4 in Joomla 3 as this would have definately been the most straightforward method, but as my form was slider-based it didn't work and I soon found out why (http://www.chronoengine.com/forums/posts/f26/t90627.html).
2. Recreate V4 form in V5 on J3
I then decided to try to recreate my form in V5 but after doing the majority of the preparation found it was going to involve quite a lot of re-jigging as far as the actions side of things was concerned, so I had the bright idea of changing the container function in my original V4 form to tabs, which seemed to initially work. However, there is a problem in that the date pickers written into the javascript to appear in certain fields don't seem to work.
I have attached a pdf to demonstrate.
Many thanks in advance
Adam
p.s. I am not a programmer - the javascript was written by someone else, but like I said, it works on J2.5 no problem.
But why do you need to use a custom date picker ? v4 already has a datepicker.
Regards,
Max
Regards,
Max
I know Max, but I'd rather not change it all now. It's because we had to add some behaviours (i.e. grey out dates before today's date etc.) and it was the way we decided to do it. Basically, why is the Jquery datepicker appearing in J2.5 but not 3, even though the form is absolutely identical? I just need it to work as I'm only migrating a site from J2.5 to J3 and don't want to spend time recreating the entire form... I'll keep plugging away trying to find the problem
Hi Adam,
Which date-picker are you using and what is the script used to call it.
Bob
Which date-picker are you using and what is the script used to call it.
Bob
Hi Bob, here's the entire javascript for the form. It's Jquery. Just search for datepicker. I remind you that I'm not a programmer! The person who did it is too busy to help me right now...
jQuery(function($) {
var courses = {
'A': {'1': '165', '2': '295', '3': '420', '4': '525'},
'B': {'1': '210', '2': '380', '3': '505', '4': '610'},
'C': {'1': '250', '2': '430', '3': '615', '4': '745'},
'D': {'2': '590', '4': '950'},
'E': {'4': '890'},
'F': {'1': '180', '2': '315', '3': '450', '4': '580'},
'G': {'1': '270', '2': '425', '3': '555', '4': '700'},
'H': {'1': '260', '2': '475', '3': '690', '4': '885'},
'I1': {'1': '250', '2': '465'},
'I2': {'1': '350', '2': '695'},
'I3': {'1': '450', '2': '895'},
'J': {'2': '585'},
'K': {'3': '685'},
'L': {'1': '235', '2': '415', '3': '565', '4': '700'},
'O': {'1': '245', '2': '400', '3': '550', '4': '695'},
'P': {'1': '225', '2': '375', '3': '530', '4': '675'},
'Q': {'1': '230', '2': '390', '3': '555', '4': '685'},
'TT1': {'1': '100'},
'TT2': {'1': '100'},
'TT3': {'1': '100'},
'TT4': {'1': '100'}
}
var extraweeks = {
'A': {'extra': '120'},
'B': {'extra': '140'},
'C': {'extra': '175'},
'F': {'extra': '130'},
'G': {'extra': '185'},
'H': {'extra': '210'},
'L': {'extra': '170'},
'O': {'extra': '180'},
'P': {'extra': '165'},
'Q': {'extra': '165'}
}
var accommodation = {
'FAM_FB': {'individual': '196', 'double': '171', 'extra_night_individual': '25', 'extra_night_double': '22'},
'FAM_HB': {'individual': '176', 'double': '150', 'extra_night_individual': '29', 'extra_night_double': '26'},
'FLAT': {'individual_1': '120', 'individual_2': '200', 'individual_extra_week': '85', 'extra_night': '25', 'double_1': '95', 'double_2': '195', 'double_extra_week': '80'},
'HOSTAL': {'individual': '22', 'double': '22'}
}
var transfer = {
'mal1': '150', 'mal2': '300', 'gra1': '50', 'gra2': '100', 'no': '0'
}
// compute the total price in any case:
// this is computed as follows:
// first: get the course code
// second: obtain the number of weeks.
// third: obtain the price from the variable courses.
// fourth: if there is any extra weeks add to the global calculation.
var COMPUTATIONS = {
onDocumentReady: function() {
$('select[name=course]').change(COMPUTATIONS.onCourseChange);
$('select[name=weeks]').change(COMPUTATIONS.onWeekChange);
$('select[name=additional]').change(COMPUTATIONS.computeCourseTotal);
$('select[name=airport_transfer]').change(COMPUTATIONS.computeTransferTotal);
$('#departure_date').change(COMPUTATIONS.dateCalc);
$('input[name=accom_single_double]').change(COMPUTATIONS.dateCalc);
$('select[name=type]').change(COMPUTATIONS.dateCalc);
$("select[name=additional]").attr('disabled', 'disabled');
//select single room by default:
$("#accom_single_double_0").attr("checked", "checked");
$('#accom_number_weeks').val(0);
$('#accom_extra_nights').val(0);
$('#accom_total').val(0);
$('#transfer_total').val(0);
$('#course_total').val(0);
//datepicker customization:
$('#course_start').min_date = '23/03/2014';
$( "#course_start" ).datepicker({
minDate: 0, dateFormat: 'dd/mm/yy'
});
$( "#arrival_date" ).datepicker({
minDate: 0, dateFormat: 'dd/mm/yy'
});
$( "#departure_date" ).datepicker({
minDate: 0, dateFormat: 'dd/mm/yy'
});
$('#accom_number_weeks').attr("readonly", "readonly");
$('#accom_extra_nights').attr("readonly", "readonly");
$('#accom_total').attr("readonly", "readonly");
$('#transfer_total').attr("readonly", "readonly");
$('#course_total').attr("readonly", "readonly");
$('#final_total').attr("readonly", "readonly");
$('#arrival_date').datepicker();
$('#departure_date').datepicker();
$('#course_start').datepicker();
$('#course_start').change(COMPUTATIONS.dateBefore());
COMPUTATIONS.onCourseChange();
COMPUTATIONS.onWeekChange();
COMPUTATIONS.computeTransferTotal();
},
onReset: function() {
alert('reset');
// $("select[name=additional]").hide();
// COMPUTATIONS.onCourseChange();
// COMPUTATIONS.onWeekChange();
},
computeCourseTotal: function() {
// $("select[name=additional]").hide();
var priceInputId = "course_total";
var price = 0;
// workaround
if ($('select[name=weeks]').val() !== '' && $('select[name=weeks]').val() !== undefined && $('select[name=weeks]').val() !== '-') {
// var price = 0;
price = parseInt(courses[$('select[name=course]').val()][$('select[name=weeks]').val()]);
if ($('select[name=additional]').val() !== '' && $("select[name=additional]").val() !== undefined) {
var numberExtraWeeks = parseInt($("select[name=additional]").val());
var priceExtraWeek = 0;
if(extraweeks[$('select[name=course]').val()] !== undefined){
priceExtraWeek = parseInt(extraweeks[$('select[name=course]').val()]['extra']);
}
price = price + numberExtraWeeks * priceExtraWeek;
}
}
$("#" + priceInputId).val(price);
// alert('Total price' + total_price_acc);
COMPUTATIONS.computeFinalTotal();
},
dateBefore: function() {
var startD = $('#course_start').val().split("/");
var startDate = new Date(startD[2],startD[1]-1,startD[0]);
var currDate = new Date();
var dateDiff = Math.abs(currDate.getTime() - startDate.getTime());
if (dateDiff < 0) {
alert('Course starting date should be after current date');
}
},
onCourseChange: function() {
$('select[name=weeks] option').remove();
$('select[name=weeks]').append('<option id="" value="-"> -</option>');
for (var i = 0, l = Object.keys(courses[$('select[name=course]').val()]).length; i < l; i++) {
var v = Object.keys(courses[$('select[name=course]').val()])[i];
$('select[name=weeks]').append('<option id="' + v + '" value="' + v + '">' + v + ' weeks</option>');
}
$('select[name=additional]').val('0');
COMPUTATIONS.onWeekChange();
COMPUTATIONS.computeCourseTotal();
},
onWeekChange: function() {
var last_week = 0;
try{
last_week = Object.keys(courses[$('select[name=course]').val()]).length - 1;
}catch(err){
last_week = 0;
}
// 13/03/2014: avoid first week problem.
//if(last_week < 0 ){ last_week = 0;}
if ($('select[name=weeks]').val() === Object.keys(courses[$('select[name=course]').val()])[last_week]
&& (extraweeks[$('select[name=course]').val()] !== undefined
|| extraweeks[$('select[name=course]').val()] !== ''
)
) {
$("select[name=additional]").removeAttr('disabled');
}
else {
// set the extra week value to 0:
$('select[name=additional]').val('0');
$("select[name=additional]").attr('disabled', 'disabled');
}
try{
if (extraweeks[$('select[name=course]').val()] === undefined) {
$('select[name=additional]').val('0');
$("select[name=additional]").attr('disabled', 'disabled');
}
}catch(err){
$('select[name=additional]').val('0');
$("select[name=additional]").attr('disabled', 'disabled');
}
COMPUTATIONS.computeCourseTotal();
},
dateCalc: function() {
var startD = $('#arrival_date').val().split("/");
var endD = $('#departure_date').val().split("/");
var startDate = new Date(startD[2],startD[1]-1,startD[0]);
var endDate = new Date(endD[2],endD[1]-1,endD[0]);
if (isNaN(startDate) || isNaN(endDate)) {
$('#accom_number_weeks').val(0);
$('#accom_extra_nights').val(0);
} else {
var dateDiff = endDate.getTime() - startDate.getTime();
if(dateDiff < 0){
alert('Arrival date can not be before departure date');
$('#arrival_date').val('');
}else{
dateDiff = Math.abs(dateDiff);
var diffDays = Math.ceil(dateDiff / (1000 * 3600 * 24));
var weeks = Math.floor(diffDays / 6);
if (weeks == 0) {
alert('Minimum one week');
$('#departure_date').val('');
}
else {
var extraNights = diffDays - (weeks * 6);
// alert('Total days:'+diffDays+' Total weeks:'+weeks+' extra nights: '+extraNights);
$('#accom_number_weeks').val(weeks);
$('#accom_extra_nights').val(extraNights);
// this.weeks = weeks;
//this.extraNights = extraNights;
}
}
}
COMPUTATIONS.computeAccomodationTotal();
},
computeAccomodationTotal: function() {
// $('select[name=type]').val();
var accomTotal = "accom_total";
var priceWeeks = 0;
var priceNights = 0;
var total_price_acc = 0;
var selectedAcc = $('select[name=type]').val();
var weeks = $('#accom_number_weeks').val();
var extra_nights = $('#accom_extra_nights').val();
// var dateCalc = new dateCalc();
var single = $("input[name='accom_single_double']:checked").val();
// alert('Selected accomodation' + selectedAcc);
if (selectedAcc === 'FAM_FB' || selectedAcc === 'FAM_HB') {
// alert('value for radio:' + single);
// var double = $('input[name=accom_single_double]:cheched').val;
if (single === 'single') {
// alert('single');
// alert('price weeks:' + accommodation[selectedAcc]['individual']);
priceWeeks = parseInt(accommodation[selectedAcc]['individual']);
priceNights = parseInt(accommodation[selectedAcc]['extra_night_individual']);
} else {
// alert('double');
priceWeeks = parseInt(accommodation[selectedAcc]['double']);
priceNights = parseInt(accommodation[selectedAcc]['extra_night_double']);
}
total_price_acc = priceWeeks * weeks + priceNights * extra_nights;
}
else if (selectedAcc === 'FLAT') {
if (single === 'single') {
if (weeks == 1) {
total_price_acc = parseInt(accommodation[selectedAcc]['individual_1']);
} else if (weeks == 2) {
total_price_acc = parseInt(accommodation[selectedAcc]['individual_2']);
} else if (weeks > 2) {
var extra_weeks = weeks - 2;
total_price_acc = parseInt(accommodation[selectedAcc]['individual_2']) + extra_weeks * parseInt(accommodation[selectedAcc]['individual_extra_week']);
}
total_price_acc = total_price_acc + extra_nights * parseInt(accommodation[selectedAcc]['extra_night'])
} else {
if (weeks == 1) {
total_price_acc = parseInt(accommodation[selectedAcc]['double_1']);
} else if (weeks == 2) {
total_price_acc = parseInt(accommodation[selectedAcc]['double_2']);
} else if (weeks > 2) {
var extra_weeks = weeks - 2;
total_price_acc = parseInt(accommodation[selectedAcc]['double_2']) + extra_weeks * parseInt(accommodation[selectedAcc]['individual_extra_week']);
}
total_price_acc = total_price_acc + extra_nights * parseInt(accommodation[selectedAcc]['extra_night'])
}
} else if (selectedAcc === 'HOSTAL') {
var total_nights = 6 * parseInt(weeks) + parseInt(extra_nights);
var night_price = 0;
if (single === 'single') {
night_price = parseInt(accommodation[selectedAcc]['individual']);
} else {
night_price = parseInt(accommodation[selectedAcc]['double']);
}
// alert('total_nights'+total_nights);
total_price_acc = parseInt(night_price * total_nights);
}
// Object.keys([]])
// var weeks = $('#accom_number_weeks').val();
// var extra_nights = $('#accom_extra_nights').val();
$('#' + accomTotal).val(total_price_acc);
// alert('Total price' + total_price_acc);
COMPUTATIONS.computeFinalTotal();
},
computeTransferTotal: function() {
var selectedTransfer = $('select[name=airport_transfer]').val();
var transferTotal = transfer[selectedTransfer];
$('#transfer_total').val(transferTotal);
COMPUTATIONS.computeFinalTotal();
},
computeFinalTotal: function() {
var finalTotal = "final_total";
if ($('#accom_total').val() == '' || $('#accom_total').val() == null) {
$('#accom_total').val(0);
}
if ($('#course_total').val() == '' || $('#course_total').val() == null) {
$('#course_total').val(0);
}
if ($('#transfer_total').val() == '' || $('#transfer_total').val() == null) {
$('#transfer_total').val(0);
}
var totalPrice = parseInt($('#accom_total').val()) + parseInt($('#course_total').val()) + parseInt($('#transfer_total').val());
$("#" + finalTotal).val(totalPrice);
}
}
;
$(document).ready(COMPUTATIONS.onDocumentReady());
// $("#chronoform_registration_en").bind("reset",COMPUTATIONS.onReset());
});
The script is huge, did you check the browser's console for JavaScript errors ? if it was working fine before then it should continue to work, unless there is some error.
So you can do a comparison. Focus on the course start field) in section 3 (you can see I've changed the sliders to tabs for Joomla 3).
Live site in Joomla 2.5 https://www.shm.edu/en/registration?chronoform=registration_en&event=submit
New site in Joomla 3 (made live for this occasion) http://s323377535.mialojamiento.es/index.php/en/registration?chronoform=registration_en-test&event=submit. It does throw up a couple of errors, seemingly related to datepicker, but the form is exactly the same.
Live site in Joomla 2.5 https://www.shm.edu/en/registration?chronoform=registration_en&event=submit
New site in Joomla 3 (made live for this occasion) http://s323377535.mialojamiento.es/index.php/en/registration?chronoform=registration_en-test&event=submit. It does throw up a couple of errors, seemingly related to datepicker, but the form is exactly the same.
Hi Adam,
There are two related JavaScript errors on the page. The underlying one looks to be "Uncaught TypeError: Cannot read property 'trident' of undefined" which is coming from this line in the datepicker
The second error is that 'datepicker' is undefined - presumably because of the first error in the datepicker
As a workaround please try commenting out the line 65 of the datepicker:
The bigger problem is that you are using the MooTools MonkeyPhysics datepicker in Joomla! 3 - it was obsolete after Joomla! 1.5 - see this FAQ and is unlikely to work at all well - maybe not at all - in Joomla! 3.
You can try switching to use the MooTools datepicker (see the FAQ) and see if that works but I would recommend that you you change the form to use a jQuery datepicker instead.
Bob
There are two related JavaScript errors on the page. The underlying one looks to be "Uncaught TypeError: Cannot read property 'trident' of undefined" which is coming from this line in the datepicker
useFadeInOut: !Browser.Engine.trident, // dont animate fade-in/fade-out for IEThe second error is that 'datepicker' is undefined - presumably because of the first error in the datepicker
As a workaround please try commenting out the line 65 of the datepicker:
/* useFadeInOut: !Browser.Engine.trident, // dont animate fade-in/fade-out for IE */The bigger problem is that you are using the MooTools MonkeyPhysics datepicker in Joomla! 3 - it was obsolete after Joomla! 1.5 - see this FAQ and is unlikely to work at all well - maybe not at all - in Joomla! 3.
You can try switching to use the MooTools datepicker (see the FAQ) and see if that works but I would recommend that you you change the form to use a jQuery datepicker instead.
Bob
I deleted that line, and still nothing appears when I click in the date fields that should bring up the JQuery datepickers defined in the custom Javascript. The problem is not with the Chronoform datepickers, which do appear (despite the css styling appearing to be a bit off).
I'll keep investigating and be sure to post any progress here. Have a good weekend
Adam
I'll keep investigating and be sure to post any progress here. Have a good weekend
Adam
Hi Adam,
Hmm . . . I wonder if both datepickers are called 'datepicker' that might cause some confusion?
Bob
Hmm . . . I wonder if both datepickers are called 'datepicker' that might cause some confusion?
Bob
It could well be Bob, thanks for the hint.
I'm now investigating this http://stackoverflow.com/questions/2682259/jquery-ui-datepicker-not-displaying - although the examples are for a Wordpress site I'm going to try and go through every possible scenario. As I'm not a programmer it could take some time :?
I'm now investigating this http://stackoverflow.com/questions/2682259/jquery-ui-datepicker-not-displaying - although the examples are for a Wordpress site I'm going to try and go through every possible scenario. As I'm not a programmer it could take some time :?
This topic is locked and no more replies can be posted.
