I am using laravel 5.4 and this jquery seating chart plugin mateuszmarkowski/jQuery-Seat-Charts It works by turning a JavaScript array into an interactive map. This works fine for desktop browsers however on a mobile browsers you can not click the seats. If on the mobile device in the browser settings you click request desktop version. Then you can click the seats. Below is my specific code is there something wrong with the implementation of click functions preventing this from working.
$(document).ready(function() {
var $cart = $('#selected-seats'),
$counter = $('#counter'),
$total = $('#total')
sc = $('#seat-map').seatCharts({
map: [
'___ppppppppppp_ppppppppppp___',
'pppppppppppppp_pppppppppppppp',
'pppppppppppppp_pppppppppppppp',
'_ppppppppppppp_ppppppppppppp_',
'_ppppppppppppp_ppppppppppppp_',
'_ppppppppppppp_ppppppppppppp_',
'__gggggggggggg_gggggggggggg__',
'__gggggggggggg_gggggggggggg__',
'__gggggggggggg_gggggggggggg__',
'__gggggggggggg_gggggggggggg__',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
],
seats: {
p: {
general_price : 15,
student_price : 13,
classes : 'first-class', //your custom CSS class
category: 'Premium Seating'
},
g: {
general_price : 12,
student_price : 10,
classes : 'economy-class', //your custom CSS class
category: 'General Seating'
}
},
naming : {
top : false,
rows: ['A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','U'],
columns: ['27','25','23','21','19','17','15','13','11','9','7','5','3','1','0',
'2','4','6','8','10','12','14','16','18','20','22','24','26','28'],
getLabel : function (character, row, column) {
return row + '' + column;
},
},
legend : {
node : $('#legend'),
items : [
[ 'p', 'available', 'Premium Seating' ],
[ 'g', 'available', 'General Seating'],
[ 'f', 'unavailable', 'Already Booked'],
[ 't', 'enqued', 'Potential Conflict']
]
},
click: function () {
if (this.status() == 'available') {
//let's create a new <li> which we'll add to the cart items
$('<li>'+this.data().category+' Seat # '+this.settings.label+' <a href="#" class="cancel-cart-item">[cancel]</a></li>')
.attr('id', 'cart-item-'+this.settings.id)
.attr('name', this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+this.data().general_price);
var tosend = {
seat: this.settings.id,
user: $('#user').val(),
pid: $('#pid').val(),
"_token": ""
};
$.ajax({
cache: "false",
type: "POST",
data: tosend,
url: "",
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
console.log("The Problem: ", textStatus, errorThrown);
console.log(jqXHR);
},
success: function(response){
console.log("Seat added to que");
}//Close success
});//Close ajax
return 'selected';
} else if (this.status() == 'selected') {
//update the counter
$counter.text(sc.find('selected').length-1);
//and total
$total.text(recalculateTotal(sc)-this.data().general_price);
//remove the item from our cart
$('#cart-item-'+this.settings.id).remove();
var tosend = {
seat: this.settings.id,
user: $('#user').val(),
pid: $('#pid').val(),
"_token": ""
};
$.ajax({
cache: "false",
type: "DELETE",
data: tosend,
url: "",
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
console.log("The Problem: ", textStatus, errorThrown);
console.log(jqXHR);
},
success: function(response){
console.log("Seat removed from que");
}//Close success
});//Close ajax
return 'available';
} else if (this.status() == 'unavailable') {
//seat has been already booked
return 'unavailable';
} else {
return this.style();
}
}
});
//this will handle "[cancel]" link clicks
$('#selected-seats').on('click', '.cancel-cart-item', function () {
//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
sc.get($(this).parents('li:first').data('seatId')).click();
});
checkReservations(sc);
setInterval(function(){checkReservations(sc)}, 10000)
});
via cmb
