How to tell which JQUERY popup to display - php

Question

Finally figured it out thanks to One Mad Monkey, but forgot quotes on my $eventDate variable for the SQL query. Thanks for the help guys :)
$(".date_has_event").live("click",function(){
console.log('you clicked', this);
var dateClicked = $(this).attr('id');
$.ajax({
type:"GET",
url: "popup_events.php",
data:"date="+dateClicked,
success: function(data){
$(".popupContent").html(data);
}});
//centering with css
centerPopup();
//load popup
loadPopup();
});
This is linked to my popup_events.php file:
<?php
include ("Includes/dbConnect.php");
$eventDate = $_GET['date'];
$query = "SELECT * FROM events WHERE eventDate='$eventDate'";
$check = mysqli_query($cxn,$query) or die("Couldn't execute query!");
while($row = mysqli_fetch_array($check))
{
$id = $row['eventID'];
echo "<div class='submit_event_list'><a href='individual_event_page_main.php?id=$id'>";
echo $row['eventName'];
echo " | " . $row['host'];
echo " | " . $row['venue'];
echo " | " . $row['eventDate'];
echo "</a></div>";
echo "<br />";
}
?>

Answer 1

If the question is "is this possible?" The answer is yes. Of course you can bind events to your HTML that will show a popup. People do it all the time, so it's not really a valuable question!
The broader question of "am I doing this in a good way?" is a tougher one to answer and also stretches the limits of an "appropriate" Stack Overflow question, which should have a more focused scope than this.
I say "have at it!" safely knowing that you can add popups. Then come back when you have more specific questions. Things I would think about when you get started:
Is JavaScript the best way to dynamically generate a calendar? Are you using a server-side language at all? This might be the better place. And if you ARE using JS, why not build the calendar completely, and THEN go back and populate it?
Do you need to make your ajax call synchronous? Are there ways you can design it so that it can happily go fetch the new information and not worry about whether it's returning in sequence or not? (hint, this might relate back to #1)
Information moreso than a hint: live() is a deprecated function. From jQuery 1.7 onward, I would look into using .on() instead. There's an equivalent for .live() using .on() but I don't think you should use it... you should use the equivalent to .delegate() since you should have an ancestor of your calendar that can serve as a listener (instead of the whole document!). If you're using jQuery 1.5.x or 1.6.x then use .delegate().
Maybe this should've been the first question: have you looked into UI frameworks that already include calendars and popups (they won't include the event management, so you still have some fun work to do)?

Answer 2

I'm not sure you actually have a question...
But it seems like you probably just need some help on how to tell which pop up to display.
in your:
$(".popup").live("click",function(){})
you can use the special "this" variable to determine which of your day's was clicked.
eg.
$(".popup").live("click",function(){
console.log('you clicked', this);
//to get the date id (your formatdate) from this
var dateClicked = $(this).parent().parent().attr('id');
//have to do parent() twice because you put your .popup under <div class='title'>
})
To make it easier.. you should consider changing your click event to use .date_has_event instead of .popup so you could do this instead:
$(".date_has_event").live("click",function(){
var dateClicked = $(this).attr('id');
})
once you know you which day was clicked, you probably want to render that day's popup's content (the list of events for that day) in your popup window.
That's where you should use an ajax request sent to some backend code which is basically the php code you already have shoved behind your (that stuff under your #popupContact).
You should move that code out somewhere.. in say a "getEvents.php"
eg.
$(".date_has_event").live("click",function(){
var dateClicked = $(this).attr('id');
$.ajax({
type: "GET",
url: "getEvents.php",
dataType: "json",
data: "date="+dateClicked,
success: function(data){
//fill your popup with the data received
}
})
})
I think that should be enough to get you on your way.
Good luck.