» » jQuery online seat selection (High Speed Rail Edition)

 

jQuery online seat selection (High Speed Rail Edition)

Author: bamboo06 on 21-11-2014, 04:26, views: 21789

11
In addition to the cinema online seat selection, we will come into contact with the aircraft cabin seat selection, of course, there's a bus ticket ticket seat selection. If there is one day to buy train tickets are also available online seat selection, then today I come to tell you how to use jQuery election under the seat plug-in to complete high-speed rail train seat layout, seat selection, different levels of seating pricing and other operations.

HTML
And on an article like: jQuery online seat selection and reservations (theater piece), we use the same html structure, layout position shown on the left, the right side shows seat selection information. Please download the DEMO relevant CSS code source view, this article will not elaborate.
   <div class="demo">
		<div class="container">
				<div id="seat-map">
					<div class="front">Carriage 1</div>
					<div id="seat-info"></div>
				</div>
				<div class="booking-details">
					<h3> Seat selection information:</h3>
					<ul id="selected-seats"></ul>
					<p>Tickets Num: <span id="counter"></span></p>
					<p>Total: $<span id="total">0</span></p>
					
					<button class="checkout-button">BUY</button>
					
					<div id="legend"></div>
				</div>
		</div>
   </div>

jQuery
Key to focus on jQuery code, we still use the online seat selection plugin: jQuery Seat Charts. First arrange high-speed rail Carriage seat layout, I assume that within the 1st Carriage seat and the second seat has a number of first-class, middle separated by the entrance channel, roughly layout is as follows:
		map: [ //Seating chart
			'ff__ff',
			'ff__ff',
			'______',
			'eee_ee',
			'eee_ee',
			'eee_ee',
			'eee_ee',
			'eee_ee',
			'eee_ee'
		],

The above code f represents the first-class seat, e represents the second seat, the symbol "_" represents the aisle.
Then we want to define the relevant attributes seat type:
		seats: { //Definition seat property
			f: {
				price   : 100,
				classes : 'first-class', 
				category: '1st'
			},
			e: {
				price   : 40,
				classes : 'economy-class', 
				category: '2nd'
			}					
		},

The above code defines a first-class seat and the second seat prices, the category name and the corresponding css styles. They can be called back by the method data ().
Next we define the ranks of information by naming seating chart, as top is set to true then the top of the display indicates the horizontal (row), columns and rows are used to define the value of the horizontal (row) and the vertical axis (columns), getLabel used to return the seat information, such as: 01A represents 01 row A seat.
		naming : { //Define the ranks of other information
			top : true,
			columns: ['A', 'B', 'C', '', 'D','F'],
			rows: ['01','02','','03','04','05','06','07','08','09'],
			getLabel : function (character, row, column) {
				return row+column;
			}
		},

Then we use the legend to define the legend, the legend associated with the corresponding element is #legend, and seat type definition corresponding style.
		legend : { //Definition legend
			node : $('#legend'),
			items : [
				[ 'f', 'available',   '1st' ],
				[ 'e', 'available',   '2nd'],
				[ 'f', 'unavailable', 'Sold']
			]					
		},

Finally, outside the click (click) seating chart in position to make different treatment depending on the current state of the seat, including the calculation of the total amount of votes and so on, can refer to the description of the theater piece.
		click: function () {
			if (this.status() == 'available') {//Optional seat
				$('<li>'+this.data().category+'<br/>Car 1 No.'+this.settings.label+'<br/>$'+this.data().price+'</li>')
				.attr('id', 'cart-item-'+this.settings.id)
				.data('seatId', this.settings.id)
				.appendTo($cart);
				//Update tickets
				$counter.text(sc.find('selected').length+1);
				//calculate total money
				$total.text(recalculateTotal(sc)+this.data().price);
				return 'selected';
			} else if (this.status() == 'selected') {//choosen
				$counter.text(sc.find('selected').length-1);
				$total.text(recalculateTotal(sc)-this.data().price);
				//Delete reservation
				$('#cart-item-'+this.settings.id).remove();
				return 'available';
			} else if (this.status() == 'unavailable') {//sold
				//sold
				return 'unavailable';
			} else {
				return this.style();
			}
		},

Finally, we use the get () and status () method sets have been sold without the optional seat.
	//have been Sold without optional seat
	sc.get(['01_A', '04_A', '07_B', '07_F']).status('unavailable');

It is worth mentioning that, when the site is very frequent need to pay attention to timely booking refresh seating chart, if the seat has been seized is not optional. We can use ajax asynchronous request, and set to run once every 10 seconds, you can refer to the following code:
setInterval(function() { 
    $.ajax({ 
        type     : 'get', 
        url      : 'book.php', 
        dataType : 'json', 
        success  : function(response) { 
            //Through all seats
            $.each(response.bookings, function(index, booking) { 
                //The seats have been sold to the invalid state
                sc.status(booking.seat_id, 'unavailable'); 
            }); 
        } 
    }); 
}, 10000); //per 10s 

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 1 Comment
  • 0 Articles
10 May 2015 17:05

girish

Reply
  • Group: Members
  • РRegistered date: 10.05.2015
  • Status: Currently Offline
 
how to download source

how to download source

<
  • 0 Comments
  • 0 Articles
15 June 2015 20:06

Abhishek singh

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
i need this script for online bus reservation.

i need this script for online bus reservation

<
  • 0 Comments
  • 0 Articles
10 July 2015 17:56

ramkumar

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
how to download source

<
  • 0 Comments
  • 0 Articles
5 October 2015 19:35

mtulya

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
here is the source code link where you can download them
http://jquer.in/random-jquery-plugins-for-superior-websites/seat-charts/

here is the source code link where you can download them
http://jquer.in/random-jquery-plugins-for-superior-websites/seat-charts/

<
  • 5 Comments
  • 180 Articles
17 October 2015 03:21

bamboo06

Reply
  • Group: Administrators
  • РRegistered date: 24.10.2014
  • Status: Currently Offline
 
Quote: mtulya
here is the source code link where you can download them
http://jquer.in/random-jquery-plugins-for-superior-websites/seat-charts/

here is the source code link where you can download them
http://jquer.in/random-jquery-plugins-for-superior-websites/seat-charts/

Thanks for sharing another source.

Quote: girish
how to download source

how to download source

You can view the source code. It doesn't use any active page, so you can get it easily by viewing the source code.

<
  • 0 Comments
  • 0 Articles
24 January 2016 12:41

Terry

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hi is there a way to allow the name of the booked seat to be shown even in a tooltip and then have it go to database?

<
  • 1 Comment
  • 0 Articles
1 February 2016 00:08

sandeep_goocode

Reply
  • Group: Members
  • РRegistered date: 1.02.2016
  • Status: Currently Offline
 
Hello Experts
I am not able to download the source code from
http://jquer.in/random-jquery-plugins-for-superior-websites/seat-charts/.
Any help will be appreciated. Thanks in advance.

<
  • 0 Comments
  • 0 Articles
3 February 2016 22:21

Jackson

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Try this link :)
https://github.com/mateuszmarkowski/jQuery-Seat-Charts

<
  • 0 Comments
  • 0 Articles
16 February 2016 21:17

jerome

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
How can i get the value of the seat that I have clicked and insert it to my database?

<
  • 0 Comments
  • 0 Articles
13 December 2016 19:06

swapnil

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
i want source code of this jquery online seat reservation

<
  • 0 Comments
  • 0 Articles
30 March 2017 00:03

20170330shizhong

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
<a href="http://www.pradaoutlet.org"><strong>prada handbags</strong></a>
<a href="http://www.vansshoes.in.net"><strong>vans sk8 hi</strong></a>
cheap jordan shoes
air jordan uk
http://www.airforce1-nike.fr
http://www.canadagooseuk.me.uk


Add comments

Name:*
E-Mail:
Comment:
Bold Italic Underline Strike | Align left Center Align right | Insert smilies Insert link URLInsert protected URL Select color | Add Hidden Text Insert Quote Convert selected text from selection to Cyrillic (Russian) alphabet Insert spoiler
Security Code: *