I am working on a Bus Reservation System.I am using jQuery,jQuery UI and jquery plugin named qTip and context menu with asp.net.
function GenerateSeatPlan(ATTBusType)
{
var $tableSeatPlan= $("#tableId");
$tableSeatPlan.empty();
var _NoOfCabinCol =2;
var _NoOfCabinRow =1;
var _NoOfColA =2;
var _NoOfColB =2;
var _NoOfColLastRow =1;
var _NoOfRowA =7;
var _NoOfRowB =8;
var _BookedReservedDetails=ATTBusType.BookedReservedDetails;
$tableSeatPlan.append("<tr id='trcabin'><td style='width:100%;'><table id='tbllcabin' border='0' style='width:100%;'></table></td></tr><tr id='trbody'><td style='width:100%;'><table id='tbllbody' border='0' style='width:100%;'></table</td></tr>");
var tbllcabinContent="";
for (var i = 0; i < _NoOfCabinRow; i++)
{
var c=0;
var trr="<tr>" ;
for (var j = 0; j < _NoOfCabinCol; j++)
{
c++;
var tdd="<td SeatNo='C"+c+"' ";
if (j == _NoOfCabinCol - 1)
{
tdd=tdd+"class='driver'> <img style='width:30px;height:30px' src='images/steering.jpg' alt='Driver' /> ";
}
else
{
tdd=tdd+"class='selectable'> <img style='width:30px;height:30px' src='images/Bus_Seat.jpg' alt='Seat' /> ";
}
tdd=tdd+"</td> ";
trr=trr+tdd;
}
tbllcabinContent=tbllcabinContent +trr;
}
$('table#tbllcabin').append(tbllcabinContent);
var tbllbodyContent="";
var seatcountA = 0;
var seatcountB = 0;
var colSpan;
for (var i = 0; i < _NoOfRowB; i++)
{
var colSpan = 0;
var trr="<tr> " ;
for (var j = 0; j < _NoOfColA; j++)
{
if (i == 0)
{
colSpan++;
var tdd="<td ";
if (j == 0)
{
tdd=tdd+ "id='door' style='background-color:transparent;text-align:center' >DOOR</td>";
trr=trr+tdd;
}
}
else
{
seatcountA++;
var tdd="<td SeatNo='A"+seatcountA+"' class='selectable'> <img style='width:30px;height:30px' src='images/Bus_Seat.jpg' alt='Seat' /></td> ";
trr=trr+tdd;
}
}
trr=trr+"<td style='width:7px'><pre></pre></td>";
for (var j = 0; j < _NoOfColB; j++)
{
seatcountB++;
var tdd="<td SeatNo='B"+seatcountB+"' class='selectable'> <img style='width:30px;height:30px' src='images/Bus_Seat.jpg' alt='Seat' /></td> ";
trr=trr+tdd;
}
tbllbodyContent=tbllbodyContent +trr+"</tr>";
}
$('table#tbllbody').append(tbllbodyContent);
$('#door').attr('colspan',_NoOfColA);
BindDelegatedEventsToDynamicallyGeneratedElements();
var stat="";
var type="";
var stt="";
var height=0;
var elem;
var itm;
var lenth= _BookedReservedDetails.length;
for (var i=0;i<lenth;i++)
{
itm=_BookedReservedDetails[i];
elem=$("[seatno='"+itm.Seat+"'] ");
stat=(itm.SeatStatus=="B" )?'Booked':'Reserved';
if(itm.CType=="N" )
{
type="Normal";
}
else if(itm.CType=="R" )
{
type="Regular";
}
else if(itm.CType=="S" )
{
type="Staff";
}
if(stat=='Booked')
{
stt='<tr><td>Boarding Place: </td><td>'+itm.BoardingPlace+'</td></tr>'+'<tr><td>Booked Date: </td><td>'+itm.BookedDate+'</td></tr>';
height=130;
}
else
{
stt='<tr><td>Reservation Date: </td><td>'+itm.ReservedDate+'</td></tr>';
height=115;
}
elem.data('vals', {id:itm.PID, name:itm.CName,address:itm.Address,phone:itm.Phone,cType:itm.CType});
elem
.attr('status',itm.SeatStatus)
.qtip({
content: '<table class="tooltip" style="width:100%"><tr><td style="font-size:larger:">Status</b>:</td><td>'+ stat +
'</td></tr> <tr><td>Name: </td><td>'+itm.CName+'</td></tr> <tr><td>Address: </td><td>'+itm.Address+
'</td></tr> <tr><td>Phone: </td><td>'+itm.Phone+'</td></tr> <tr><td>Type: </td><td>'+type+'</td></tr>'+stt+'</table>',
position: {
corner: {
target: 'rightTop',
tooltip: 'leftBottom'
},
adjust: {x:0}
},
style: {
width: 260,
height: height,
padding: 3,
background:'#A2D959',
color: '#fcfae6',
textAlign: 'left',
opacity:1,
border: {
width: 2,
radius: 27,
color: '#A2D959',
opacity:1
},
tip: {
corner: 'leftBottom',
opacity:.5
}
}
});
}
}
function BindDelegatedEventsToDynamicallyGeneratedElements()
{
$('.selectable').each(function(){
$(this).append('<div >'+$(this).attr('SeatNo')+'</div>');
});
$('.selectable').contextMenu('popup', { bindings: {
'Reservation': function(t) {
if(!( $('.selected').length) || $('.selected').filter('[status=R]').length) return false;
ResetReservationForm();
$( "#dialog-form-reserve" ).dialog( "open" );
},
'Booking': function(t) {
if(!( $('.selected').length) || $('.selected').filter('[status=B]').length ) return false;
ResetBookingForm();
var selxn=$('.selected').filter('[status=R]');
if(selxn.length)
{
$('#name').attr('readonly','readonly'); $('#name').val( selxn.filter(':first').data('vals').name );
$('#address').attr('readonly','readonly'); $('#address').val( selxn.filter(':first').data('vals').address );
$('#phone').attr('readonly','readonly'); $('#phone').val( selxn.filter(':first').data('vals').phone );
$('#phone').val( selxn.filter(':first').data('vals').phone );
$customerType.val(selxn.filter(':first').data('vals').cType);
personID= selxn.filter(':first').data('vals').id;
personAction="E";
}
$( "#dialog-form-book" ).dialog( "open" );
if(boardingPlace=="")
{
$.ajax({
url:'SeatPlan.aspx',
data:{LoadBoardingPlace:'yes'},
dataType:'json',
success:function(data){
boardingPlace=data;
LoadBoardingPlace();
},
error:function(){
$validationText.html('Could Not Load Boarding Place.');
$validation.dialog('open');
}
});
}
},
'Cancellation': function(t) {
var decision= confirm('are You Sure ?');
if(decision===false) return false;
if(!( $('.selected').length) || ( $('.selected').length != $('.selected').filter('[status=R],[status=B]').length ) ) return false;
GetSelectedSeat();
$.ajax({
url:'SeatPlan.aspx',
data: {cancellation:'Y',opnDt:$openDate.val() ,typId:$busType.val() , selected: seats },
success:function(data){
if(data=="Success"){
$validationText.html(' Cancellation Succcessfully.');
$validation.dialog('open');
Check() ;
}
else
{
$validationText.html(' Cancellation Failed.');
$validation.dialog('open');
}
},
error:function(){
$validationText.html('Reservation Cancellation Failed.');
$validation.dialog('open');
}
});
},
'Exit': function(t) {
RemoveSelection();
}
},
menuStyle: {
background: 'none repeat-x scroll 50% 50% #E4E2CC',
border: '1px solid #E4E2CC',
margin:'2px 2px 2px 5px',
fontWeight: 'bold',
padding: '0.4em 0.2em',
position: 'relative',
fontFamily: 'Trebuchet MS,Tahoma,Verdana,Arial,sans-serif'
},
itemStyle : {
color: '#E78F08',
border: 'none',
fontSize: '1.1em'
},
itemHoverStyle: {
fontSize: '1.15em',
border: 'none'
}
});
}