...

View Full Version : Unknown runtime error in IE



oilerdude
06-03-2009, 11:45 PM
Hey all,

I'm fairly new to Javascript. I am modding a script for an Event Calendar (view) (http://www.codeproject.com/KB/scripting/JavaScriptCalendar.aspx?), and am running into a problem in IE.

What I want to do is, when the user clicks on a date that has an event attached to it, the event information is displayed in a div below the calendar. I've used a switch() statement, and have gotten it to work the way I want in Firefox, but IE gives me an error.

Here is the code I am using...


<script type="text/javascript">

cal2 = new Calendar ("cal2", "tester2", new Date());
cal2.eventDates = new Array(
new Array("2009/6/10", 1)
, new Array("2009/6/14", 2)
, new Array("2009/6/25", 3)
, new Array("2009/7/14", 4)
);

cal2.selectEvent = function(eventId) {
onClick=initiateEventBox(eventId);
}

function initiateEventBox(eventId) {

switch(eventId) {

case "2009/6/10":
var eventInfo = "<p>Event one! Holy will this work?</p>"

break;

case "2009/6/14":
var eventInfo = "<p>Maybe...just maybe it did!</p>"

break;

}
//end function switch()

document.getElementById("event_holder").innerHTML = eventInfo;

}
//end function eventBox()

renderCalendar (cal2);
</script>

The line the IE is having issues with is "document.getElementById("event_holder".innerHTML = eventInfo;"

The JS works when I replace the "eventInfo" variable with straight text, but as soon as the variable is back in I get the error.


<div>

<p id="event_holder"></p>

</div>

This is where the event description then shows up.

Hopefully this made some sense, I look forward to any help you guys may have for me.

Thanks,

Marcel

venegal
06-03-2009, 11:58 PM
You are declaring the variable eventInfo within the function initiateEventBox, so it's scoped and cannot be seen outside that function.

Try declaring var eventInfo outside of all functions and within initiateEventBox changing var eventInfo = to eventInfo =.

oilerdude
06-04-2009, 12:03 AM
Thanks for the speedy reply venegal. I tried declaring outside a function, but am unfortunately still getting the same error in IE.


<script type="text/javascript">

cal2 = new Calendar ("cal2", "tester2", new Date());
cal2.eventDates = new Array(
new Array("2009/6/10", 1)
, new Array("2009/6/14", 2)
, new Array("2009/6/25", 3)
, new Array("2009/7/14", 4)
);

cal2.selectEvent = function(eventId) {
onClick=initiateEventBox(eventId);
}

var eventInfo = "";

function initiateEventBox(eventId) {

switch(eventId) {

case "2009/6/10":
eventInfo = "<p>Event one! Holy will this work?</p>"

break;

case "2009/6/14":
eventInfo = "<p>Maybe...just maybe it did!</p>"

break;

}
//end function switch()

document.getElementById("event_holder").innerHTML = eventInfo;

}
//end function eventBox()

renderCalendar (cal2);
</script>

That is, if I declared it right?

venegal
06-04-2009, 12:13 AM
Oh, your indentation is messed up, so I didn't see that all the stuff regarding eventInfo has been within the same function all along. Please disregard my last post.

Can you provide a link to your site so I can see the error in action?

oilerdude
06-04-2009, 12:15 AM
http://www.designerglasssigns.com/marcels/nvcss/calendar/calendar_demo.html

At the moment all it is is the calendar. Once I get that working, I'll be implementing it into an actual site.

Old Pedant
06-04-2009, 12:22 AM
Ummm...in that article, it says:


cal2.eventDates = new Array(
new Array("2005/2/10", 1)
, new Array("2005/2/12", 2)
, new Array("2005/2/14", 3)
);
The first argument in each array represents the event date;
the second represents an event ID.


So eventID should be 1 or 2 or 3, etc.

I don't understand how it works, at all, in FF.

Assuming I am reading this right, it means your JS code for that function can be a *TON* simpler:


var info = [
"", // since you don't use id=0
"<p>Event one! Holy will this work?</p>",
"<p>Maybe...just maybe it did!</p>",
"",
""
];
function initiateEventBox(eventId)
{
eventId = parseInt(eventId); // probably already integer, but won't hurt
document.getElementById("event_holder").innerHTML = info[eventId];
}

venegal
06-04-2009, 12:34 AM
Alright, I see your problem. IE doesn't like innerHTML all that much, but changing

document.getElementById("event_holder").innerHTML = eventInfo;

to

var div = document.createElement("div");
div.innerHTML = eventInfo;
document.getElementById("event_holder").innerHTML = "";
document.getElementById("event_holder").appendChild(div);

will at least get it working.

Old Pedant
06-04-2009, 12:57 AM
Still doesn't match what the docs in that article say.

And I have *never* had a problem with innerHTML in MSIE. In fact, MS invented innerHTML (yeah, yeah...for once they did something right).

Did you try it, with that actual calendar code?? I'm surprised, if it all works.

venegal
06-04-2009, 01:26 AM
I did try, and it works. Otherwise I would not dare giving out such dirty hacks without even having read what the code is all about.

oilerdude
06-04-2009, 04:38 AM
Thank you both for the replies, I will try this out when I get back into work tomorrow morning. Much appreciated, I'll report back.

Old Pedant
06-04-2009, 05:47 AM
Fascinating. Thanks Venegal. Teach me to believe the documentation. Should know better by now, I guess.

venegal
06-04-2009, 02:13 PM
oilerdude:
In your code there's

cal2.selectEvent = function(eventId) {
onClick=initiateEventBox(eventId);
}

That onClick= there doesn't make any sense. All it does is setting a global variable that's never used again.

Old Pedant:
Ok, I had a read through your comments, through the code, and through the documentation, and yes, that integer eventId is complete bogus, and the documentation is wrong, so your simplification won't work.

There are however possible simplifications without monkeypatching that calendar thing. Here's my try:

<script type="text/javascript">
cal2 = new Calendar("cal2", "tester2", new Date());

cal2.eventDates = [["2009/6/10"], ["2009/6/14"], ["2009/6/25"], ["2009/7/14"]];
var info = ["Event one! Holy will this work?", "Maybe...just maybe it did!", "another event", "4th event"];
var datesAndInfo = {};
for (var i in cal2.eventDates) datesAndInfo[cal2.eventDates[i][0]] = info[i];

cal2.selectEvent = function(eventId) {
document.getElementById("event_holder").innerHTML = datesAndInfo[eventId];
}

renderCalendar(cal2);
</script>

oilerdude
06-04-2009, 04:54 PM
Thank you so much venegal, the code you gave me makes it work in IE. However, only when the onClick is in the first function, so I suppose I will just leave it in there. This isn't a high-profile project or anything, so the code doesn't need to be perfect.

-Marcel



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum