Question

I’m writing a booking system in PHP and MySQL and the way that a user books a specific time slot is by clicking the Div which operates a JQuery function as you can see below:

$(document).ready(function(){
                $('.free').click(function(){
                    $(this).html("<div class='title'><img src='images/loader.gif' alt='image' width='30' /></div>").load('book.php?desk_id=<?php echo $desk_id;?>&booking_id='+this.id);
                });
                $('#bookweek').click(function(){
                    $('.free').html("<div class='title'><img src='images/loader.gif' alt='image' width='30' /></div>").load('book.php?desk_id=<?php echo $desk_id;?>&booking_id='+this.id);
                });
            })

What I am trying to do is get the second half of it where it would book the entire week to work. It partially works but doing a bit of investigation shows that it is not passing on the Div’s ID in the URL, so obviously it’s not passing on the correct variables to book.php which is making it not work.

There are many Divs with class ‘free’ but each has its own seperate ID. Any help on how to pass the individual IDs on in a URL would be greatly appreciated,

Many many thanks,

Steve

Edit:

The calender is generated using the following code:

<div id="bookweek" style="cursor:pointer"><h1>Book Entire Week</h1></div>
<div class="block">
    <div class="title">Times</div>
    <?php
$days = 0;
while($days < 7) {
    $day  = mktime(0, 0, 0, date("m"),   date("d") + $days,   date("Y"));
    $days++;
    echo '<div class="title">'.date("D d/m/y", $day).'</div>
    ';
}
?>
</div>
<?php
$hours = 0;
$counter = 0;
while($hours < count($bookingTimes)) {
    $name = $bookingTimes[$hours];
    $hours++;
    echo '<div class="block">
<div class="title">'.$name.'</div>
';
$i=0;
$counter++;
$days = 0;
while($i < 7) {
    $day  = mktime(0, 0, 0, date("m"),   date("d") + $days,   date("Y"));
    $days++;
    $i++;
    $id = $counter + $day;
    echo '<div class="free" id="'.$id.'">'.checkBooked($id,$desk_id).'</div>
    ';
    }
    echo '</div>';
}
?>
</div>

Answer 1

Try this for the click event handler for #bookweek

$("#bookweek").on("click", function () {
    $(this).parent().find(".free").trigger("click")
});

It finds the parent div (the week) and then triggers a click event on each of the child elements with class free.