0

This is a bit involved, I'll try to be as clear as possible. I'll also preface by first saying that this is working as intended in Chrome and later versions of IE but not in Firefox or older IE, that's the main thrust of my question.

I've added a jquery datepicker calendar to a page that has a list of events on it. The events have each been given names indicating the date they fall on and all have the css class "listing". I created an array (listing) that grabs all of these events with getElementsByClassName("listing"). I then created another array (events) and iterate through all the elements in 'listing' pushing an object into each element of the new array formatted for datepicker. Then I use this array (events) in the datepicker 'beforeShowDay' function to highlight/link all dates that have events.

Again, this works great in Chrome and newer IE but not Firefox (datepicker displays but no highlighted dates) or older IE versions (the datepicker calendar does not display). Any thoughts on how to get it working across all browsers?

Here's my code:

$(document).ready(function() {

    var listing = document.getElementsByClassName("listing");
    var events = new Array();

    for (var i = 0; i < listing.length; i++) {
        // something wrong with this line...?
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }
    $("#calendar").datepicker({
        beforeShowDay: function(date) {
            var result = [false, '', null];
            var matching = $.grep(events, function(event) {
                return event.Date.valueOf() === date.valueOf();
            });

            if (matching.length) {
                result = [true, 'highlight', null];
            }
            return result;
        },
        onSelect: function(dateText) {
            var selectedDate = new Date(dateText);
        var day = selectedDate.getDate();
        var month = selectedDate.getMonth() + 1;
        var year = selectedDate.getFullYear();
        location.hash = "#" + month + "-" + day + "-" + year;
        //alert(month + "-" + day + "-" + year);
        }
    });

});

One thing I've noticed is that if I replace the for loop that generates the 'events' array with an explicit definition of each value it will work in Firefox but still not older IE.

In other words replacing this:

    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    };

With this:

    var events = [ 
        { Title: "Event 1", Date: new Date("9/12/2012") }, 
        { Title: "Event 2", Date: new Date("9/25/2012") }, 
        { Title: "Event 3", Date: new Date("9/29/2012") }
    ];

Thanks in advance for any help, haven't had any luck finding answers anywhere.


Edit*:
Changed document.getElementsByClassName("listing"); to $(".listing"); working great in all versions of IE now (getElementsByClassName does not work in IE<9). Still no dates highlighting in FF. The only errors I'm seeing in FF console pertain to un-related CSS and prettyPhoto/slideshow js, don't think these are related to this problem at all..?


Edit*:
Not sure if I should be replacing the content of my original question or appending, apologies if I'm making this too long... Continuing to try different things, still no luck. Everything is working fine in all browsers except for FF, the calendar pops up fine but no event dates are highlighted/linked. I tried explicitly filling the 'events' array instead of iteratively pushing into it and this works fine. Seems that the iterative push part is what's not working in FF.

In other words, replacing this:

    var events = [];
    for (var i = 0; i < listing.length; i++) {
        events.push({Title : listing[i].getAttribute("name"), Date: new Date(listing[i].getAttribute("name"))});
    }

With this:

    var events = [ 
        { Title: "Event 1", Date: new Date("9/20/2012") }, 
        { Title: "Event 2", Date: new Date("9/27/2012") }, 
        { Title: "Event 3", Date: new Date("10/4/2012") }
    ];

Works fine in FF. Does anyone see something wrong with the for-loop above? Thanks again for any insights...

9
  • Please open the console in FF and look for errors there. If you'll find any errors, please add them to your question's description. Also the semicolon is not needed after braces of for loop. Commented Sep 19, 2012 at 17:55
  • 6
    First thought, if you're using jQuery, then stop using JavaScript. for example: var listing = document.getElementsByClassName("listing"); should simply be var listing = $(".listing"); Commented Sep 19, 2012 at 17:56
  • Is it possible that "events" is reserved? Try another variable name. Commented Sep 19, 2012 at 18:00
  • Good catch, SpYk3HH - getElementsByClassName is not working in IE < 9: quirksmode.org/dom/w3c_core.html Commented Sep 19, 2012 at 18:01
  • @SpYk3HH Depending on what is wanted, plain JavaScript and jQuery can be mixed. But in this case it's better jQuery because getElementsByClassName doesn't work on old browsers. Commented Sep 19, 2012 at 18:15

1 Answer 1

0

Ok, took a lot of fiddling around but found the problem. Pretty dumb ultimately but now I know. Apparently FF has problems when you throw new Date() at it with dashes, but it works with slashes. So my main mistake (which I should have been more specific about in the original post, apologies) was using the format "MM-DD-YYYY" in the name tags of each event element. I changed the name tags of each event element to the format "MM/DD/YYYY", updated the linking function to reflect this and everything seems to be working perfectly now across all tested browsers (Chrome, IE 9, IE<9, FF).

Thanks for all of your suggestions, definitely helped get me to the final solution.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.