Forums

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.

But why do you need to use a custom date picker ? v4 already has a datepicker.

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

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.

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

useFadeInOut: !Browser.Engine.trident, // dont animate fade-in/fade-out for IE

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:

/* useFadeInOut: !Browser.Engine.trident, // dont animate fade-in/fade-out for IE */

and see if that does the trick.

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

Hi Adam,

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 :?