Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unknown runtime error in IE

    Hey all,

    I'm fairly new to Javascript. I am modding a script for an Event Calendar (view), 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...

    Code:
    <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.

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

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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 =.

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the speedy reply venegal. I tried declaring outside a function, but am unfortunately still getting the same error in IE.

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

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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?

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    http://www.designerglasssigns.com/ma...ndar_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.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Ummm...in that article, it says:
    Code:
    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:
    Code:
    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];
    }

  • #7
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Alright, I see your problem. IE doesn't like innerHTML all that much, but changing
    Code:
    document.getElementById("event_holder").innerHTML = eventInfo;
    to
    Code:
    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.

  • Users who have thanked venegal for this post:

    oilerdude (06-04-2009)

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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.

  • #9
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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.

  • Users who have thanked venegal for this post:

    Old Pedant (06-04-2009)

  • #10
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Fascinating. Thanks Venegal. Teach me to believe the documentation. Should know better by now, I guess.

  • #12
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    oilerdude:
    In your code there's
    Code:
    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:
    Code:
    <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>

  • #13
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •