» » jQuery election seat reservations online (theater piece)

 

jQuery election seat reservations online (theater piece)

Author: bamboo06 on 17-11-2014, 00:58, views: 69512

87
When our online ticketing (such as movie tickets, tickets, etc.) can choose their own seat. Developers listed seating seats on the page, the user can see at a glance the seat and payment can be selected. In this paper, cinema tickets, for example, to show you how to choose seats, seat selection data processing.

Here, I'll give you about a jQuery plugin based online seat selection: jQuery Seat Charts, it supports custom seat types and prices, support for custom styles, support settings are not optional seat, also supports keyboard control seat.
HTML
We assume that entered the film "Gingerclown" The seat selection page, the page layout see the big picture above, left of the page will appear in the # seat-map in theater seating layout, the right side of # booking-details display movie-related information as well as selected seating information # selected-seats and fares amounts of information, choose your seat confirmed after payment page to complete the payment.
   <div class="demo">
   		<div id="seat-map">
			<div class="front">SCREEN</div>					
		</div>
		<div class="booking-details">
			<p>Movie: <span> Gingerclown</span></p>
			<p>Time: <span>November 3, 21:00</span></p>
			<p>Seat: </p>
			<ul id="selected-seats"></ul>
			<p>Tickets: <span id="counter">0</span></p>
			<p>Total: <b>$<span id="total">0</span></b></p>
					
			<button class="checkout-button">BUY</button>
					
			<div id="legend"></div>
		</div>
		<div style="clear:both"></div>
   </div>

CSS
Use CSS to beautify the various elements of the page, especially seating list layout for the seat status (sold, optional seats, has been elected seats, etc.) set up different styles, we have collated CSS code, of course, you can own project page style themselves modify any CSS code.
.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} 
div.seatCharts-row {height: 35px;} 
div.seatCharts-seat.available {background-color: #B9DEA0;} 
div.seatCharts-seat.focused {background-color: #76B474;border: none;} 
div.seatCharts-seat.selected {background-color: #E6CAC4;} 
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
div.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} 
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center} 

jQuery
This example is based on jQuery, so do not forget to load jquery library and the first elected seat plugins: jQuery Seat Charts.
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.seat-charts.min.js"></script> 

Next, we define such a good fare, seating area, the number of votes, a total amount of such elements, then call the plugin:. $ ('# Seat-map') seatCharts ().
We first set up seating chart, an auditorium seating is fixed good. In this example, the third row is the aisle, as well as 34 rows to the right vacancy exports, the last row we set up a couple of blocks, then the theater's layout is this:
aaaaaaaaaa
aaaaaaaaaa
__________
aaaaaaaa__
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aa__aa__aa
We use the letter A represents a seat, represented by the symbol _ empty, ie no seats, of course, you can also use a, b, c, etc. represent different levels of seating.
Then define the legend style, the key is detective click event click (): When the user clicks on the seat, if the seat status is optional (available), then click on the rear seat, the seat information (several rows) was added to the right of the selected Block list and calculate the total number of votes and the total amount; if the seat status is checked (selected), then click on the seat again, it will be selected seating information is deleted from the list on the right seat, and the state is set to election; if the seat status is already sold (unavailable), you can not click on the seat. Seat number last used state get () method to set Sold Sold. The following is a detailed code:
var price = 10; //price
$(document).ready(function() {
	var $cart = $('#selected-seats'), //Sitting Area
	$counter = $('#counter'), //Votes
	$total = $('#total'); //Total money
	
	var sc = $('#seat-map').seatCharts({
		map: [  //Seating chart
			'aaaaaaaaaa',
            'aaaaaaaaaa',
            '__________',
            'aaaaaaaa__',
            'aaaaaaaaaa',
			'aaaaaaaaaa',
			'aaaaaaaaaa',
			'aaaaaaaaaa',
			'aaaaaaaaaa',
            'aa__aa__aa'
		],
		naming : {
			top : false,
			getLabel : function (character, row, column) {
				return column;
			}
		},
		legend : { //Definition legend
			node : $('#legend'),
			items : [
				[ 'a', 'available',   'Option' ],
				[ 'a', 'unavailable', 'Sold']
			]					
		},
		click: function () { //Click event
			if (this.status() == 'available') { //optional seat
				$('<li>R'+(this.settings.row+1)+' S'+this.settings.label+'</li>')
					.attr('id', 'cart-item-'+this.settings.id)
					.data('seatId', this.settings.id)
					.appendTo($cart);

				$counter.text(sc.find('selected').length+1);
				$total.text(recalculateTotal(sc)+price);
							
				return 'selected';
			} else if (this.status() == 'selected') { //Checked
					//Update Number
					$counter.text(sc.find('selected').length-1);
					//update totalnum
					$total.text(recalculateTotal(sc)-price);
						
					//Delete reservation
					$('#cart-item-'+this.settings.id).remove();
					//optional
					return 'available';
			} else if (this.status() == 'unavailable') { //sold
				return 'unavailable';
			} else {
				return this.style();
			}
		}
	});
	//sold seat
	sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
		
});
//sum total money
function recalculateTotal(sc) {
	var total = 0;
	sc.find('selected').each(function () {
		total += price;
	});
			
	return total;
}

Explanation
jQuery Seat Charts plugin provides multiple options to set and method calls, specifically with reference to the project's official website: https: //github.com/mateuszmarkowski/jQuery-Seat-Charts.
Next, GOOCODE will provide you with jQuery Seat Charts richer application example, we can use the plug-in applications to the aircraft cabin seat selection, train / car seat selection, conference tournament election seat auditorium, a restaurant restaurant seat selection, etc. Please pay attention to our site.

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
8 March 2015 15:05

Emmancipate Takunda Musemwa

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hie,

Thanks for the post it helped me a lot in my project, but how do check which seats are sold out if I am using mysql database to store the seat reservations

Thank you.

<
  • 5 Comments
  • 182 Articles
16 March 2015 00:37

bamboo06

Reply
  • Group: Administrators
  • РRegistered date: 24.10.2014
  • Status: Currently Offline
 
Quote: Emmancipate Takunda Musemwa
Hie,

Thanks for the post it helped me a lot in my project, but how do check which seats are sold out if I am using mysql database to store the seat reservations

Thank you.

Reservation status is stored in mysql db, select them and display on the plugin.

Quote: Emmancipate Takunda Musemwa
Hie,

Thanks for the post it helped me a lot in my project, but how do check which seats are sold out if I am using mysql database to store the seat reservations

Thank you.

Reservation status is stored in mysql db, select them and display on the plugin.

<
  • 0 Comments
  • 0 Articles
7 April 2015 23:01

devesh pradhan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
how to run this code..please give me step by step guide.

<
  • 0 Comments
  • 0 Articles
11 April 2015 04:40

sanjay

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
jquery.seat-charts.min.js where this is code?

<
  • 0 Comments
  • 0 Articles
12 April 2015 21:59

tedzed

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
how can i get jquery.seat-charts.min.js

how can i get jquery.seat-charts.min.js

<
  • 0 Comments
  • 0 Articles
24 April 2015 06:32

Simon

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks. But can you send me the source file please? Since I have copied the code but failed to run it.

<
  • 5 Comments
  • 182 Articles
24 April 2015 13:02

bamboo06

Reply
  • Group: Administrators
  • РRegistered date: 24.10.2014
  • Status: Currently Offline
 
Quote: sanjay
jquery.seat-charts.min.js where this is code?

http://www.goocode.net/demo/seat/jquery.seat-charts.min.js
You can download it from the above url.

<
  • 0 Comments
  • 0 Articles
5 May 2015 20:07

Ruby

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi, thanks for your useful demo.
I currently can dynamically select all unavailable seats in my db.
But now i want add all selected seat info in 1 json array like this:
var seatArray = new Array();
sc.find('selected').each(function () {
var seatTemp = new Object();
seatTemp["SeatNo"] = sc.settings.id;
seatTemp["SeatType"] = sc.data().category;
seatTemp["Price"] = sc.data().price;
seatArray.push(seatTemp);
});

$.ajax({
type: "POST",
url: "seatHandler.ashx",
cache: false,
data: JSON.stringify(seatArray),
contentType: 'application/json',
dataType: "json",
success: getSuccess,
error: getFail
});

I tried put this in $('#checkout-button').onclick() but it didn't work
Could you show me how to make these code runs when click the checkout-button?

<
  • 0 Comments
  • 0 Articles
15 May 2015 22:31

janak

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
How to submit the span value to mysql or store in php variable plz help

How to submit the span value to mysql or store in php variable plz help

<
  • 0 Comments
  • 0 Articles
19 May 2015 00:06

tewodros

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Thanks for the post it helped me a lot in my project.to get jquery.seat-charts.min.js use this link https://github.com/mateuszmarkowski/jQuery-Seat-Charts

<
  • 0 Comments
  • 0 Articles
12 July 2015 20:17

Jack

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi, i'm aware that labels of the rows can be changed from alphabet to numbers. Any idea on how to do this? Please help thanks

<
  • 0 Comments
  • 0 Articles
5 November 2015 01:16

Aditya

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi, this plugin works like a dream and can be customized with some efforts winked . But I am still not able to achieve one thing, i.e. I want to provide a check box for each row and on clicking the check box I want the entire row to be selected. Is this possible. I was successful is providing the check box at the starting of each row by making some changes in the javascript library. Added the following line

$row.append('<div class="seatCharts-cell seatCharts-space"><input type="checkbox" id="'+row+'_check" onclick="enable(this.id)"></div>');

This code can be added below the "//do this for each map row" comment just before the "if (settings.naming.left)" condition.

I am not getting how to make all seats of the row checked when clicking the checkbox

<
  • 5 Comments
  • 182 Articles
5 November 2015 04:27

bamboo06

Reply
  • Group: Administrators
  • РRegistered date: 24.10.2014
  • Status: Currently Offline
 
Quote: Aditya
Hi, this plugin works like a dream and can be customized with some efforts winked . But I am still not able to achieve one thing, i.e. I want to provide a check box for each row and on clicking the check box I want the entire row to be selected. Is this possible. I was successful is providing the check box at the starting of each row by making some changes in the javascript library. Added the following line

$row.append('<div class="seatCharts-cell seatCharts-space"><input type="checkbox" id="'+row+'_check" onclick="enable(this.id)"></div>');

This code can be added below the "//do this for each map row" comment just before the "if (settings.naming.left)" condition.

I am not getting how to make all seats of the row checked when clicking the checkbox

You can use sc.get(['1_1', '1_2', '1_3', '1_4']).status('available') to realize the similar effect. Thanks for ur option.

<
  • 0 Comments
  • 0 Articles
24 February 2016 20:55

Tejash

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
How to set Seat limit for booking?

<
  • 1 Comment
  • 0 Articles
10 March 2016 06:11

Neuromancer

Reply
  • Group: Members
  • РRegistered date: 10.03.2016
  • Status: Currently Offline
 
I can do the plugin work here. Need some support, please. Do you have a step by step process? I am new on JQUERY and I really like this plugin.

<
  • 0 Comments
  • 0 Articles
30 March 2016 07:32

karthik

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi.
How can w change the row values from 1,2.. to A,B.used row:['A','B']..but its not working

<
  • 0 Comments
  • 0 Articles
16 April 2016 08:02

saravana jagan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hello,

Thank you for this plugin.

Can you please post a simple example for getting the selected seat in javascript var ?

thanks alot.

<
  • 0 Comments
  • 0 Articles
18 April 2016 22:19

Leo

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi, this plugin is wonderful, but how can I pass mutli-seat select to the db

<
  • 0 Comments
  • 0 Articles
27 April 2016 05:34

phatthinh

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi im trying to use your plugin together with jstl to load seat number and row from the database
But i dont know why its not start a new line for a new row although i cut the string by , exactly like the text in map youre demo
But it not start a new line, when i try to print it and i copy the print from the chrome to seatmap, it work just fine
I dont know what's wrong here..

If u can demo for me a bit in database load seat charts maybe its really helped :D

<
  • 0 Comments
  • 0 Articles
22 May 2016 02:38

daniel

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
hi, how can i implement that on my project??


thanks

in my project doesn t show the seats of the movie theatre,why?????
but shows the rest(legend).WHY?

<
  • 0 Comments
  • 0 Articles
8 June 2016 17:25

davin

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
how to send the id of selected chair to php?

how to send the id of selected chair to php?

thanks
i really don't know about jquery

<
  • 1 Comment
  • 0 Articles
27 July 2016 16:26

geet16

Reply
  • Group: Members
  • РRegistered date: 27.07.2016
  • Status: Currently Offline
 
it is not taking the function ????what to do for that???I did all the plugins

<
  • 0 Comments
  • 0 Articles
15 September 2016 21:11

lamin

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi thank u for this post.
But how can i include it in my java/jsp project.

<
  • 0 Comments
  • 0 Articles
24 October 2016 17:03

Prasanth

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi,
I added jquery.seat-charts.min.js in my project
but it didnt display the layout.
Please Help me

<
  • 0 Comments
  • 0 Articles
15 December 2016 08:17

Allan Souza

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi,
I added jquery.seat-charts.min.js in my project
but it didnt display the layout.
Please Help me

<
  • 0 Comments
  • 0 Articles
24 January 2017 18:25

krunal

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
jquery seat chart does not work in multiple time in same page . please help me

<
  • 0 Comments
  • 0 Articles
23 March 2017 17:04

krrish

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
how to passs selected seat in another page of php

<
  • 1 Comment
  • 0 Articles
23 March 2017 19:33

kevin

Reply
  • Group: Members
  • РRegistered date: 23.03.2017
  • Status: Currently Offline
 
anyone have seat map in html page

<
  • 0 Comments
  • 0 Articles
10 April 2017 20:06

Jessie41

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Fran kimmel laundry day essay florida about grandparents essay Othello turning point essay plan critical thinking reading detective beginning Science and mysticism are they compatible essay essays government intervention economy

<
  • 0 Comments
  • 0 Articles
9 May 2017 18:15

Batonx4t

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Здравствуйте! Если Вам интересно, размещу Вашу статью на блоге с ТИЦ 40 http://blackseoforum.kl.com.ua/, с вечно индексируемой ссылой на Ваш ресурс
Единственное условие это:
статья должна быть уникальной не менее 1000 символов и с картинкой

Оплата по факту размещения и всего 2 доллара за статью
Если вы заинтересованы, прошу контактировать https://bablokos.pw/kontakty

Previous Next
Information
Comment on the news site is possible only within (days) days from the date of publication.