Hello all,
I've been working on a calendar for my web application that involves
using jQuery to create a popup window with the calendar event
information. Everything seems to be working great in FF3, Safari and
Chrome. But of course IE7 is throwing me issues. Mainly the
information in the modal box is not being displayed at all. I'm
wondering if it is something inside my code. Here is what I have
written. The functionality works as follows:
1) Wait for a click on a calendar event.
2) Get the eventID and send a AJAX request to server.
3) Server returns XML data of the event.
4) Create an object to contain the event information and add names.
5) Parse together the Modal Title and Modal Content.
6) Display Modal Box.
Here is the code:
$(function(){
$('.eventInfo').click(function(){
var eventID = $(this).attr('class');
eventID = eventID.match(/\d+/);
//Get the eventdetails
var myEvent = new Object();
$.ajax({
type: "POST",
url: "../calendar/get_event_details/",
data: 'eventID='+eventID,
success: function(xml){
$(xml).each(function(){
myEvent.eventID
= $(this).find('eventID').text();
myEvent.eventname
= $(this).find('eventname').text();
myEvent.eventstarttime =
$(this).find('eventstarttime').text();
myEvent.eventendtime =
$(this).find('eventendtime').text();
myEvent.guestsestimate =
$(this).find('guestsestimate').text();
myEvent.status
= $(this).find('status').text();
myEvent.firstname
= $(this).find('firstname').text();
myEvent.lastname
= $(this).find('lastname').text();
myEvent.contactID
= $(this).find('contactID').text();
myEvent.locations
= $(this).find('locations').text();
});
var eventDetails = "<div id='event_times'>"
+myEvent.eventstarttime
+ " - " +myEvent.eventendtime+ "</div><div
id='event_status'><b>Current Status:</b> " +myEvent.status+ "</
div><div id='contactname'><b>Contact:</b> <a href='<?= base_url(); ?
>index.php/contact/details/" +myEvent.contactID+ "'>"
+myEvent.firstname +" " +myEvent.lastname+ "</a></div><div
id='locations'><b>Location(s):</b> " +myEvent.locations+ "</div><div
id='guests'><b>Expected Guests: </b>" +myEvent.guestsestimate+ "</
div><div id='view_event'> <a href='<?= base_url(); ?>index.php/event/
details/" +myEvent.eventID+"'>View Event Details</a></div><div
id='ical_event'> <a href='<?=base_url(); ?>index.php/event/
create_ical_event/" +myEvent.eventID+ "'>Create iCal Event</a></
div>";
var eventtitle = "<a href='<?= base_url();
?>index.php/event/
details/" +myEvent.eventID+"'>" +myEvent.eventname+ "</a>";
$('#eventPopUp').attr('title', eventtitle);
$('#ui-dialog-title-eventPopUp').html(eventtitle);
$('#eventPopUp').html(eventDetails);
$('#eventPopUp').dialog();
}
});
$("#eventPopUp").dialog('open');
return false;
});
});
Any insight in why this isn't working for me would be a huge help!
