Oct 30, 2011

Seat Reservation with jQuery

In my Online Bus Reservation System project, I got queries from many people about how to implement seat selection screen effectively. So, I decided to write on it. This post explains how to implement seat booking with jQuery. It can be used in online Bus, flight, hotel, exam support, cinema and ticket booking system.

seat reservation jquery

HTML:

<h2> Choose seats by clicking the corresponding seat in the layout below:</h2>
    <div id="holder"> 
		<ul  id="place">
        </ul>    
	</div>
	<div style="float:left;"> 
	<ul id="seatDescription">
		<li style="background:url('images/available_seat_img.gif') no-repeat scroll 0 0 transparent;">Available Seat</li>
		<li style="background:url('images/booked_seat_img.gif') no-repeat scroll 0 0 transparent;">Booked Seat</li>
		<li style="background:url('images/selected_seat_img.gif') no-repeat scroll 0 0 transparent;">Selected Seat</li>
	</ul>
	</div>
        <div style="clear:both;width:100%">
		<input type="button" id="btnShowNew" value="Show Selected Seats" />
		<input type="button" id="btnShow" value="Show All" />           
        </div>

We will add seats in “#place” element using javascript.

Settings:

To make it generalize, settings object is used.

 var settings = {
                rows: 5,
                cols: 15,
                rowCssPrefix: 'row-',
                colCssPrefix: 'col-',
                seatWidth: 35,
                seatHeight: 35,
                seatCss: 'seat',
                selectedSeatCss: 'selectedSeat',
				selectingSeatCss: 'selectingSeat'
            };

rows: total number of rows of seats.
cols: total number of seats in each row.
rowCssPrefix: will be used to customize row layout using (rowCssPrefix + row number) css class.
colCssPrefix: will be used to customize column using (colCssPrefix + column number) css class.
seatWidth: width of seat.
seatHeight: height of seat.
seatCss: css class of seat.
selectedSeatCss: css class of already booked seats.
selectingSeatCss: css class of selected seats.

Seat Layout:

We will create basic layout of seats.

var init = function (reservedSeat) {
                var str = [], seatNo, className;
                for (i = 0; i < settings.rows; i++) {
                    for (j = 0; j < settings.cols; j++) {
                        seatNo = (i + j * settings.rows + 1);
                        className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
                        if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                            className += ' ' + settings.selectedSeatCss;
                        }
                        str.push('<li class="' + className + '"' +
                                  'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
                                  '<a title="' + seatNo + '">' + seatNo + '</a>' +
                                  '</li>');
                    }
                }
                $('#place').html(str.join(''));
            };
			//case I: Show from starting
            //init();

            //Case II: If already booked
            var bookedSeats = [5, 10, 25];
            init(bookedSeats);

init method is used to draw seats layout. Already booked seats array will be passed as argument of this method.

Seat Selection:

$('.' + settings.seatCss).click(function () {
if ($(this).hasClass(settings.selectedSeatCss)){
	alert('This seat is already reserved');
}
else{
	$(this).toggleClass(settings.selectingSeatCss);
	}
});

$('#btnShow').click(function () {
	var str = [];
	$.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
		str.push($(this).attr('title'));
	});
	alert(str.join(','));
})

$('#btnShowNew').click(function () {
	var str = [], item;
	$.each($('#place li.' + settings.selectingSeatCss + ' a'), function (index, value) {
		item = $(this).attr('title');                   
		str.push(item);                   
	});
	alert(str.join(','));
})

When user clicks on available seat, it is selected and second click on same seat will unselect seat. Button “Show All” will show all booked seat numbers and “Show Selected Seats” will show selected seats only.

CSS:

#holder{	
height:200px;	 
width:550px;
background-color:#F5F5F5;
border:1px solid #A4A4A4;
margin-left:10px;	
}
#place {
position:relative;
margin:7px;
}
#place a{
font-size:0.6em;
}
#place li
{
 list-style: none outside none;
 position: absolute;   
}    
#place li:hover
{
background-color:yellow;      
} 
#place .seat{
background:url("images/available_seat_img.gif") no-repeat scroll 0 0 transparent;
height:33px;
width:33px;
display:block;	 
}
#place .selectedSeat
{ 
background-image:url("images/booked_seat_img.gif");      	 
}
#place .selectingSeat
{ 
background-image:url("images/selected_seat_img.gif");      	 
}
#place .row-3, #place .row-4{
margin-top:10px;
}
#seatDescription li{
verticle-align:middle;	  
list-style: none outside none;
padding-left:35px;
height:35px;
float:left;
}

In my next post, you will get how to use this in asp.net project with sql server database .
If you have any query, put in below comment box.

37 comments

  1. Hi Bro,
    thanks for code sharing, this is very helpful but I am not understand how to update bookedSeats array when a new user book seats. Could you please help me? as soon as possible.

  2. how can we edit this seat arrangement…..eg:.if 1 seat got damaged how can we inform…or if i wanna add 2 seats more how can i??? thank you

  3. Liked your work but I have a problem concerning the seat Reservation with Jquery. My holder frame is empty. How do I draw the seats. thank u

      1. I guess You are a beginner , the empty seats area will show up just download jquery File (I.e .js file) and attach at the head of this code , u can download that from Jquery(dot) com

    1. view source code of this page and copy that code and edit it.. there is external link of java script which we have to put

  4. Hey very nice thanks for this code… I just wanted to ask a very simple thing…

    Here you have given static values for fields like rows,columns,seat width and seat height.

    var settings = {

    rows: 5,

    cols: 15,

    rowCssPrefix: ‘row-‘,

    colCssPrefix: ‘col-‘,

    seatWidth: 35,

    seatHeight: 35,

    seatCss: ‘seat’,

    selectedSeatCss: ‘selectedSeat’,

    selectingSeatCss: ‘selectingSeat’

    };

    I wanted to know how can I make this thing dynamic by taking these inputs from user through textbox or input box and then assigning it to the var.. I am sry to ask but I am very poor in JQuery so wanted to learn it..

  5. hi thnks for posting this jquey code as mentioned above but in order to use this code we ned to have database jst for clicking on seat and that seat no sjhould display…can u provide any code for this step by step..waitiing for ur reply

  6. I don’t get what about the database ? how it is going to get store in side? do i need table ? what should be included in table?

  7. could u please explain the Database design?
    Also need numberr of buses available for a particular date…

  8. Hi ,I tried to use but its not working in asp.net 3.5 will u plz help me how to use it , as m facing this issue since last 20 days and found no solution i have to generate seat layout from the collection of data returned by ITSWebservice, It would really be grtfull if u can help

  9. Hi Brij,am having a problem adding some more elements into the array bookedSeats from a selected¬† input field in a form…how do i do this?

  10. Hello Brij, i have a little problem when i click on live view in dreamweaver, the numerous seats  are not visualized. I tried also to copy and paste the source code (from the browser) of your demo example. can you give me a suggestion?

Leave a Reply

Your email address will not be published. Required fields are marked *