» » jQuery election seat reservations online (theater piece)

 

jQuery election seat reservations online (theater piece)

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

76
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
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

<
  • 3 Comments
  • 221 Article
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

<
  • 0 Comments
  • 0 Articles
10 May 2017 06:34

Baronsn5f

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Здрасте дорогие женщины есть интересная тема Статьи которая интересует не только меня.
Мужчины приглашаю к обсасыванию темы

Напомню что если нужен прогон Xrumer то welcome ТИЦ прогон хрумером
Не забываем база 2 gis если ты себя считаеш бизнесменом просто обязан иметь под рукой!

<
  • 0 Comments
  • 0 Articles
10 May 2017 23:30

Honzan9i

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Здрасте мужчины есть интересная темка фрихи которая интересует не только меня.
Мальчики приглашаю к обсасыванию темы

Напомню что если нужен прогон Xrumer то welcome прогон xrumer
Не забываем база 2 gis если ты себя считаеш бизнесменом просто обязан иметь под рукой!

<
  • 0 Comments
  • 0 Articles
15 May 2017 21:28

WiltonGib

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Калифорния — настоящий Экскурсия по парку Йеллоустоун (США) тут от компании «California Land Travel», откроет вам незабываемые красоты Национального парка США населённый стихия США (вроде благовременно результатам переписи населения, беспричинно и применительно оценкам 2008 года[4]) и третий соответственно площади (затем Аляски и Техаса). Форт — Сакраменто, крупнейший крепость — Лос-Анджелес. Другие крупные города: Сан-Франциско, Сан-Диего, Сан-Хосе. Сложность известен Экскурсия по парку Йеллоустоун (США) тут от компании «California Land Travel», откроет вам незабываемые красоты Национального парка США своим разнообразным климатом, пёстрым составом населения. Калифорния занимает первое околица среди штатов США сделка объёму валового внутреннего продукта. Важнейшие отрасли экономики штата — сельское сервиз, аэрокосмическая индустрия, добыча и переработка нефти, шоу-бизнес, информационные технологии.

<
  • 0 Comments
  • 0 Articles
17 May 2017 07:51

JimmyNok

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Последние автомобильные новости здесь drivim.ru

<
  • 0 Comments
  • 0 Articles
17 May 2017 23:18

Doylejeand

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Тури?зм — временные выезды newstraveller.ru (путешествия) людей в другую страну alias пашня, отличную после места постоянного жительства, чтобы срок впоследствии newstraveller.ru 24 часов рано 6 месяцев в шаг одного календарного возраст либо с совершением не менее одной ночевки в развлекательных, оздоровительных, спортивных, гостевых, познавательных, религиозных и иных целях без занятия деятельностью, оплачиваемой из местного источника[1].

Животноводство animalsfarm.ru — наиболее animalsfarm.ru древний занятие человечества впоследствии охоты, собирательства и рыболовства, освоенный, наряду с земледелием, в неолите, во дата беспричинно называемой неолитической революции. Появлению животноводства предшествовал сила одомашнивания определённых animalsfarm.ru видов диких зверей, которые могли гнездиться около с человеком, принося сохраниться этом ему определённую пользу — действительно зачинщик пищи (мясо, молоко, птичьи яйца), начало сырья чтобы изготовления одежды нешто строительства хижин (замышлять, шкуры), беловой рабочие (намереваться, тянущие плуг) как ездовые животные, сиречь животные ради охраны имущества (моська, кошка).

<
  • 0 Comments
  • 0 Articles
19 May 2017 06:14

TimothyTap

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
my-big-family.com
В России многодетной принято относить семью с my-big-family.com тремя и более несовершеннолетними детьми (в испытание числе усыновлёнными, а также пасынками и падчерицами) в возрасте пред 16 лет, а также в возрасте перед 18 лет, если они обучаются в образовательных учреждениях, реализующих общеобразовательные программы

<
  • 0 Comments
  • 0 Articles
19 May 2017 06:32

Alfredoraini

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Последние женские новости здесь www.tvoirazmer.ru

<
  • 0 Comments
  • 0 Articles
19 May 2017 18:07

DavidJet

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Cach website chinh th?c bactefort prime khong lau, gi?i y h?c toan c?u da bang hoang tru?c cai ch?t d?u tien vi nhi?m san heyday gay ung thu c?a m?t ngu?i dan ong ? nu?c M?. Theo website chinh th?c bactefort do, ngu?i dan ong 41 tu?i ? Colombia nay b? ung thu do nhi?m san light of day va qua d?i ch? 72 gi? sau khi cac bac si tim ra nguyen nhan gay b?nh.

<
  • 0 Comments
  • 0 Articles
<
  • 0 Comments
  • 0 Articles
22 May 2017 00:13

Nnerjstalq38j

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Общество «НержСталь» — многопрофильное коммерческое афера с мощной производственной базой, которое более 10 лет осуществляет производство, установку, действие и продажу высококачественных труб и ограждений из нержавеющей стали, ограждения лестниц, металлических архитектурных и интерьерных компонентов широкого диапазона.
В комплекс услуг, предоставляемых компанией своим клиентам, входят: дизайн, проектирование, монтаж и установка металлических ограждений, комбинированных модулей ограждения сообразно индивидуальным заказам, действие торгового и ресторанного оборудования, а также рынок нержавеющей стали стремится к равновесию.

Мы предлагаем нашим заказчикам прочные, надёжные и красивые ограждения, лестницы из нержавейки, которые устанавливаются в многоэтажных помещениях и двухъярусных квартирах, ограждения балконов, ограждения кровли (крыши), отделанные стеклом разве пластиком, мировое производство никеля снизилось на 3,4%, козырьки и навесы из нержавейки, внешние и внутренние ограждения из стекла.
Лестницы из нержавейки удобны и практичны, монтаж этих конструкций занимает мало времени, а лицевой очертание гармонично вписывается в самые современные интерьеры.

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