javascript not executing when showing linear calendar (only on all version of IE)

Question

My client report a problem with the linear calendar on this page : http://www.portailjeunesselac2m.org/

with all browser it work except for IE (all version)

it just show the event without execution the javascript... i try debuggin it, but cannot "see" why it failed... can you get me some help please ?

because i do not know where to look, i will try to make html validate it... just in case ! i fix 10 errors !... maybe it can help !

*note 3 date must be highlight : 8, 10 and 24 october...

have you seen this error in your console: `HTML1424: Invalid character www.portailjeunesselac2m.org, line 131 character 20 SCRIPT5007: Unable to get property 'date' of undefined or null reference timeline.js, line 53 character 24` — blender_noob, Oct 09 '14 at 03:15
The problem is here (timeline.js, line 53) `for(j = i; j > 0 && events[j - 1].date > tmp.date; j--)`. j = 1, but events is array of objects, with empty first 5 elements. And it produces an error `Unable to get property 'date' of undefined or null reference` — Cheery, Oct 09 '14 at 03:56
HOW if the date array is empty, chrome and FF get it right ? — menardmam, Oct 09 '14 at 04:05
I also checked the website in Safari, and it is also not working. The problem might be on the parsing of the date. — blender_noob, Oct 09 '14 at 04:05
safary is broken too, did not see that... so FF and chrome is OK all the other are broken — menardmam, Oct 09 '14 at 15:34

Cheery · Accepted Answer · 2014-10-09T16:32:18.933

1

The problem is here (timeline.js, line 53) for(j = i; j > 0 && events[j - 1].date > tmp.date; j--). j = 1, but events is array of objects, with empty first 5 elements. And it produces an error Unable to get property 'date' of undefined or null reference.

First 5 elements are missing, because of

if (date == "Invalid Date")
    continue;

this.events[i] = {

It skips some events, but still increases i counter, leaving empty elements in array. Try to replace this.events[i] = { with this.events.push({ and add ) at the closing }. Or make all date valid :)

The date is invalid because new Date() is not recognizing "11 01 2014" as a valid date. Try to write it in a title as "2014-01-11" ("yyyy-mm-dd")

ps: as a quick 'fix' - replace var date = new Date(eventItems[i].getAttribute("title")); with var date = new Date(eventItems[i].getAttribute("title").replace(/(\d+)\s+(\d+)\s+(\d+)/, '$3-$1-$2'));

pps: tired of all the messages. This is how your portion of the code should look like

    for (var i = 0; i < eventItems.length; i++) {
        var date = new Date(eventItems[i].getAttribute("title")
                            .replace(/(\d+)\s+(\d+)\s+(\d+)/, '$3-$1-$2'));

        if (date == "Invalid Date")
            continue;

        this.events.push({
            name    : eventItems[i].className,
            date    : date,
            day     : date.getDate(),
            month   : date.getMonth(),
            year    : date.getFullYear(),
            content : jQuery(eventItems[i]).text()            
        });
    }

edited Oct 09 '14 at 16:32

answered Oct 09 '14 at 04:03

Cheery

16,063
42
57

the date is written as the apps whant to have it, just like it work 3 years ago... i have modified the code.. no luck ! will check it out tomorrow i have been on this for too long now, i dont see anything right ! thanks. – menardmam Oct 09 '14 at 04:31
@menardmam Read the `ps` part of my answer. The replacement with `push` is good, but it just removes an error. `ps:` part will help you with dates. – Cheery Oct 09 '14 at 04:34
quick fix applied, but it "remove or forget" dates.. and only one remain ! – menardmam Oct 09 '14 at 04:37
@menardmam you, probably, need `$3-$1-$2` if in the date in title you have first month, then day and last 4 digits - year. Just saw in code that you have a second set of numbers = 20 )) – Cheery Oct 09 '14 at 04:39
i will output the date as you said 2014-10-08 to see how it go – menardmam Oct 09 '14 at 04:41
@menardmam or change it with javascript, just write instead of `$3-$2-$1` the following `$3-$1-$2`. I did not know which number is month and date in your record. – Cheery Oct 09 '14 at 04:42
after echo to screen the date... some come as 0 (month or day) i will investigate that more... will tell you, thanks – menardmam Oct 09 '14 at 04:46
@menardmam Why won't you do what I told you?? 0 is showing because js is counting months from 0. Just write `var date = new Date(eventItems[i].getAttribute("title").replace(/(\d+)\s+(\d+)\s+(\d+)/, '$3-$1-$2'));` and remove all alerts, keeping the date in title the way it was. Or change the date in titles, keeping the js part as it was. – Cheery Oct 09 '14 at 04:48
i just did exacly all the step/mods you told me, but it just got worst, i loos all the date marker... and now i am stuck ! – menardmam Oct 09 '14 at 15:10
Changing SO MANY THING screw up averything... i am getting a backup now and back to basic... will keep you posted – menardmam Oct 09 '14 at 15:23
Getting back to last week, the calendar SHOW, but not the dates... it's 50% there – menardmam Oct 09 '14 at 15:29
@menardmam you needed to make only 2 changes, thats it. Look at answer. – Cheery Oct 09 '14 at 16:28
1

@menardmam http://jsfiddle.net/gr59t4wc/ This is how it should look like. There is only one date in October, which is shown on calendar. If you change the month - other dates are shown. – Cheery Oct 09 '14 at 16:43
why a date supposed to be 10 th day become the 09 ! – menardmam Oct 09 '14 at 19:03
@menardmam because it depends on the timezone. By default it works in GMT/UTC when parsing the date. If you do not provide hours, midnight at GMT corresponds to the previous date in everything to the west of greenwich meridian. If you do something like this `'$3-$1-$2 12:00'` - it will work in most cases, but it is better to use timezone of the events listed on the website. – Cheery Oct 09 '14 at 19:07
Or it is possible to take into account user's timezone http://stackoverflow.com/questions/2771609/how-to-ignore-users-time-zone-and-force-date-use-specific-time-zone – Cheery Oct 09 '14 at 19:13
i will try to fix the timezone.... bt can you check the calendar WITHOUT event date appear on : win7 or XP on IE8 or lower.... – menardmam Oct 09 '14 at 19:17
@menardmam Seriously, it feels like I'm developing this website, not you )) Read http://stackoverflow.com/questions/11020658/javascript-json-date-parse-in-ie7-ie8-returns-nan But IE8 is almost dead, I would not care about it. As it follows from the link, IE8 wants `'$3/$1/$2 12:00'` – Cheery Oct 09 '14 at 19:20
changing to $3/$1/$2 12:00 FIX the whole thing for all IE version and fix the timezone withou touching anything... again, thanks a lot for your great help, and coding changes – menardmam Oct 09 '14 at 19:32

javascript not executing when showing linear calendar (only on all version of IE)

1 Answers1