I've been having this problem for some time now and am becoming increasingly frustrated with my lack of progress, just wondering if anyone can help me?
I'm creating a restaurant booking system which involves an SVG interface in which tables change colour based on whether the table is available, reserved, or unsuitable for party size. The only problem I'm having is with the reserved tables.
For the available or unsuitable tables, I use PHP to query my database using data inputted by the user (Date, Start time, and Party size), selecting all tables which would be suitable for their party size and the tables that wouldn't. The first result and the count of the result is printed as labels with class names to a div on my page. From here I use Jquery to select these and use a for loop to go through all the tables and change their colour respectively.
Now here's where I get problems. I want to change tables to red if there is already a booking made, but it isn't as easy as the other tables. Say there are two bookings on two separate tables (let's say 17 and 28), how am I supposed to use a loop to go through numbers if they are not close to each other? For the reserved tables I print out all the results of the table using a while loop in PHP and give each row a unique ID, but how do I select these IDs within jQuery?
Code:
if(redBoolean = "true"){
for(var i = 0; i < redSTCount; i++){
var redSTNumber = $('#ST_'++).text();
for(var i = 0; i < redSTCount; i++){
$("[id='"+redSTNumber+"']").css({ fill: "red" }).fadeIn("1500");
$("[id='"+redSTNumber+"']").css({ cursor: "default" });
}
}
}
Above is a snippet of my code, on the third line I am unsure how to have a unique ID change every time to whatever table is booked.
I'm sorry if this isn't very clear, I find it quite difficult to explain but that is the best I could do haha
Here is the page I am working on if it helps:
http://steakhousekitchen.co.uk/Booking.php
Thanks!