Query MySql when Hovering over Div

I have a calendar I'm building w开发者_JAVA百科ith events for specific days stored in mysql.

What I'm trying to do is that when a user hover's over a specific day on the calendar it will query mysql and retrieve and display those events for that day in div below the calendar. Any ideas?

Here's something rough::

<div class='calendar'>
 ..
 ..
 <div class='cal-day'>
  this is div that I want to initiate the hover 
  so when a user hovers over this div,mysql gets 
  queried and sends the results to the results div
 </div>
</div>

<div id='results>
 show results here
</div>

You need one more attribute in div which will hold date.

once someone mouse over div ajax will produce result.

Div should be

<div class='cal-day' rel="2011-10-10">
  this is div that I want to initiate the hover 
  so when a user hovers over this div,mysql gets 
  queried and sends the results to the results div
 </div>

JQuery

$('.cal-day').mouseover(function() {
  $('#result').load('ajax/result.php?date='+$(this).attr('rel');
});

Create a PHP page that takes a date as a GET parameter, and then based on the given day, generates HTML output that should be displayed in the output. This can be done easily with jQuery using the $.load function:

$('#cal-day-id').load(
    // the url of the AJAX request that will retrieve data
    'calinfo.php',

    // this would be dynamically calcaluated based
    // on which day they are hovering over
    { date: '2011-10-06' }
);

calinfo.php might look something like this:

$thedate = $_GET['date'];
// connect to db
$result = mysql_query('select * from events where date = ?');
// get results and display in HTML format for embedding on page
while ($row = mysql_fetch_assoc($result)) {
    echo '<p>Event: '. $row['name']. '</p>';
    echo '<p>Description: '. $row['description']. '</p>';
}

You'll have to do some AJAX to accomplish this. Set an "onmouseover" attribute pointing to some Javascript that makes an HTTP request to get your data and then use a callback function to update the results div.

You can't really talk directly to MySQL from front-end HTML so you'll need a layer in between (server-side technology like Java/PHP/RoR and such that has MySQL driver).

Once you've got a server-side controller, then you can set div's mousein and mouseout events (or jQuery hover) to make an AJAX call to the server and retrieve the list of days.

Just make an ajax request to a php script, that will get the results from mysql and send them to browser. You can jQuery $.ajax() function. Google it :)