Javascript Confusion

[TheTyke]

Hi

I've had a good search of the forum and can't seem to find an answer to my problem.

I have inserted a pop up calendar on the order.php (step 1) so that customers can select a delivery time and date.

I have inseretd in header.tpl the links to the javascript documents.

The pop up works well but other bits do not now work on the page. IE is also showing a number of errors linked to javascript.

Is there a special way I need to set out the links in the header.tpl or is it a case the javascript will always cause issues.

[Star]

Hi

I've had a good search of the forum and can't seem to find an answer to my problem.

I have inserted a pop up calendar on the order.php (step 1) so that customers can select a delivery time and date.

I have inseretd in header.tpl the links to the javascript documents.

The pop up works well but other bits do not now work on the page. IE is also showing a number of errors linked to javascript.

Is there a special way I need to set out the links in the header.tpl or is it a case the javascript will always cause issues.

What is the error message exactly say?

[TheTyke]

Star

This is what I get

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; InfoPath.2; .NET CLR 1.1.4322; .NET CLR 3.5.30729; OfficeLiveConnector.1.4; OfficeLivePatch.0.0; .NET CLR 3.0.30729)
Timestamp: Wed, 8 Jul 2009 18:59:10 UTC


Message: Object doesn't support this property or method
Line: 539
Char: 1
Code: 0
URI: http://www.centrefillings.co.uk/online_store/modules/blockcart/ajax-cart.js


Message: Object doesn't support this property or method
Line: 401
Char: 4
Code: 0
URI: http://www.centrefillings.co.uk/online_store/order.php?step=1


Message: 'null' is null or not an object
Line: 29
Char: 2
Code: 0
URI: http://www.centrefillings.co.uk/online_store/themes/centrefillings/js/tools/treeManagement.js

[Star]

I will take a look tonight.

[TheTyke]

Star

Many thanks

Would you like me to post the script I am using for the datepicker? It does mention tree and ajax in the behaviours.js

var rules = {
   // Rich Text Editors
   'textarea.richtext': function(elt) {
       new Control.RTE(elt, '/js/controls/rte/images', { fileLister: listUserFiles });
   },
   'input.datepicker': function(elt) {
       new Control.DatePicker(elt, { icon: 'calendar.png' });
   },
   'input.timepicker': function(elt) {
       new Control.DatePicker(elt, { icon: 'clock.png', datePicker: false, timePicker: true });
   },
   'input.datetimepicker': function(elt) {
       new Control.DatePicker(elt, { icon: 'calendar.png', timePicker: true, timePickerAdjacent: true, use24hrs: true });
   },
   'input.datetimepicker_es': function(elt) {
       new Control.DatePicker(elt, { icon: 'calendar.png', locale:'es_AR', timePicker: true });
   },
   'input.colorpicker': function(elt) {
       new Control.ColorPicker(elt);
   },
   'input.filechooser': function(elt) {
       new Control.FileChooser(elt, listUserFiles, {
               icon: '/js/controls/filechooser/filechooser.png',
               parentImage: '/js/controls/filechooser/parent.gif',
               fileImage: '/js/controls/filechooser/file.gif',
               directoryImage: '/js/controls/filechooser/directory.gif'
           });
   },
   '.rating_bar': function(elt) {
       var code = elt.id.replace(/rating_/, '');
       new Control.RatingBar(elt, {
           starClass: 'rating_star',
           onClass: 'rating_on',
           hoverClass: 'rating_hover',
           halfClass: 'rating_half',
           onclick: rateItem(code)
           });
   },
   '.tabcontrol': function(elt) {
       new Control.TabStrip(elt, {
               activeClass: 'active',
               hoverClass: 'hover',
               disabledClass: 'disabled',
               disabled: null
           });
   },
   '.treeselect': function(elt) {
       new TreeSelect(elt);
   },
   '#livegrid': function(elt) {
       new Control.LiveGrid(elt, 10, 100, getData, {
               prefetchBuffer: 'active',
               selectable: true,
               rowIdPrefix: 'result_',
               onrowopen: openRows,
               onrowselect: selectRows,
               onscroll: scrollRows,
               sortHeader: 'livegrid_header',
               sortField: 'name',
               sortDir: 'asc',
               sortAscendImg: '/js/controls/livegrid/sort_asc.png',
               sortDescendImg: '/js/controls/livegrid/sort_desc.png',
               imageWidth: 9,
               imageHeight: 9
           });
   },
   '.treelist': function (elt) {
       new Control.TreeList(elt, {
           topOffset: 5,
           collapseIcon: '/js/controls/treelist/down_arrow_outline.gif',
           collapseIconHover: '/js/controls/treelist/down_arrow_filled.gif',
           expandIcon: '/js/controls/treelist/right_arrow_outline.gif',
           expandIconHover: '/js/controls/treelist/right_arrow_filled.gif'
           });
   }
};
Behaviour.register(rules);

function listUserFiles(directory, callback) {
   new Ajax.Request('/software/js/fileaccess.php', {
           parameters: 'a=listdir&d;=' + (directory || ''),
           onComplete: function(transport) {
               try {
                   callback(eval('(' + transport.responseText + ')'));
               } catch(e) {
                   callback({status:'error'});
               }
           }
       });
}

function getData(offset, limit, sortField, sortDir, callback) {
   new Ajax.Request('/software/js/getData.php', {
               parameters: {
                   'offset': offset,
                   'limit': limit,
                   'sort': sortField,
                   'dir': sortDir
               },
               onComplete: function(transport) {
                   try {
                       callback(eval('(' + transport.responseText + ')'));
                   } catch (e) {
                       alert(e.message);
                   }
               }
           });
}

function selectRows(e, selector) {
   var selected = selector.selectedRows();
   var desc = selected.length ? selected.join(', ') : 'None';
   $('livegrid_selected_label')[removed] = 'Selected rows: ' + desc;
}
function openRows(e, selector) {
   alert('Open row event: ' + selector.selectedRows().join(', '));
}
function scrollRows(start, count, total) {
   $('livegrid_label')[removed] = 'Viewing '+(start+1)+' to '+(start+count)+' of '+total+' results';
}
function rateItem(code) {
   return function(ratingbar) {
       var rating = ratingbar.rating;
       ratingbar.setLoading(true);
       new Ajax.Request('/ratings/rate.php', {
               parameters: {'m': 'rpc', 'r': rating, 'c': code},
               onSuccess: function(transport) {
                   ratingbar.setLoading(false);
                   try {
                       var response = eval('(' + transport.responseText + ')');
                       ratingbar.rating = response.rating;
                       ratingbar.resetRating();
                       $('rating_'+code+'_average')[removed] = response.rating;
                       $('rating_'+code+'_votes')[removed] = response.votes;
                   } catch(e) {
                       alert(e.message);
                   }
               },
               onFailure: function(transport) {
                   ratingbar.setLoading(false);
                   ratingbar.resetRating();
               }
           });
   }
}

[Star]

I was successfully implemented a JS delivery date calendar (no times, only dates) on my site at check out step 3. But my site is heavily modified, therefore my script will not work for anyone.

I don't know anything about your calendar, but I think the principal is the same. You can Pm me your files that you have changed, I will take a look tonight.