Question

I am using the datepicker ui for jQuery. The calendar is loading fine. Now I want to fire an event showing the current date when I select a day. I am trying to use this but not having any luck.

The function looks like this:

$(document).ready(AllPageLoads);

    function AllPageLoads()
    {
        $('#datepicker').datepicker();
        $('table.games tbody tr.top').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
        $('table.games tbody tr.bottom').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
    }

    function EpicFail(response, status, error)
    {
        alert(response + " / " + status + " / " + error);

}
$('.selector').datepicker("option", "onSelect", function (dateText, inst) {
  alert(dateText);
 });

html:

<h2>Current Data</h2>

<div id="datepicker">
</div>

<p>All Times Pacific/p>
<table id="games" class="games">
    <thead> 
        <tr>
            <th>Date</th>
            <th>Data</th>
            <th>Col1</th>
            <th>Col2</th>
            <th>Data1</th>
            <th>Data2</th>
            <th>Data3</th>
        </tr>
     </thead>
  <tbody>

  <tr class="left">

        <td>6/9/2011</td>

        <td>901</td>

        <td>Team1</td>

        <td>Payer1</td>

        <td>info1</td>

        <td>OFF</td>

        <td>OFF</td>

    </tr>

    <tr class="right">

        <td>4:05 PM</td>

        <td>902</td>

        <td>Team2</td>

        <td>Palyer2</td>

        <td>info2</td>

        <td>OFF</td>

        <td>OFF</td>

    </tr>
   </tbody>
</table>

Answer 1

When you use $('.selector'). you are telling to jQuery: Look for the element who has class="selector" and perform this function.

But you don’t have any element with this class name.

So, to solve the problem, simple add the code:

    function AllPageLoads()
    {
        $('#datepicker').datepicker({
           onSelect: function (dateText, inst) { alert(dateText); }
        });
        $('table.games tbody tr.top').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
        $('table.games tbody tr.bottom').each(function (index) { if (index % 2 == 0) { $(this).addClass("even"); } else { $(this).addClass("odd"); } });
    }