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

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.