Member Avatar for soUPERMan

I have a calendar code that contains a table with the td for days of the month as follows:

<td class="event">
<div class="eventList" title="Events For Today">
<ul>
    <li>Event 1</li>
    <li>Event 2</li>
</ul>
<br />
<a class="anEvent" href="#">[myDateHere]</a>
</div>
</td>

*[myDate] refers to the day of the month...

At the bottom of my page there is some jquery as follows:

* --dialog for calendar events-- */
$('.eventList').dialog({
    autoOpen: false,
    closeOnEscape: true
});

$('.anEvent').click(function(){
    $('.eventList').dialog("open");
});

At the moment, when the date is clicked it will open all instances of dialogs created (Which is not my aim), is there a way to select only the div of the clicked link to be opened??

Thanks for reading.

Member Avatar for soUPERMan

Well, i went experimenting and my solution was to include the date as an id for the div like this:

    <td class="event">
    <div id="[myDateHere]" class="eventList" title="Events For Today">
    <ul>
    <li>Event 1</li>
    <li>Event 2</li>
    </ul>
    <br />
    <a class="anEvent" href="#">[myDateHere]</a>
    </div>
    </td>

Then call the dialog with this:

$('.anEvent').click(function(){
    var day = $(this).text();
    $('#'+day).dialog('open');
});

Now to do the happy dance.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.