HTML script and javascript

Question

I am trying to to show the seats unavailable from the database

<?php 
$query = "SELECT * FROM booking;";
$result = mysqli_query ($connection,$query) or die ("<div class='alert alert-danger' role='alert'>You couldn't execute booking query</div>");
//Fetch all rows for each booking
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
extract ($row);
echo "
 <script type='text/javascript'>
 sc.get(['".$BOOKING_SEAT."']).status('unavailable');
 </script>";
echo "\n";
}
?>

This is what I see later:

<!-- Booking JavaScript -->
<script type="text/javascript" src="js/booking.js"></script> 
<script type="text/javascript" src="js/seat-charts.min.js"></script> 
<script type='text/javascript'>
 sc.get(['5_7']).status('unavailable');
 </script>
 <script type='text/javascript'>
 sc.get(['5_8']).status('unavailable');
 </script>
 <script type='text/javascript'>
 sc.get(['5_9']).status('unavailable');
 </script>
 <script type='text/javascript'>
 sc.get(['5_10']).status('unavailable');
 </script>

When I inspect the code I see what exactly I want but it is not working because it says the "Uncaught ReferenceError: sc is not defined".

The "sc" and "get" are from "js/booking.js" and "js/seat-charts.min.js".

UPDATE:

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',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa'
 ],
 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
 $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
 .attr('id', 'cart-item-'+this.settings.id)
 .attr('value', (this.settings.row+1)+'_'+this.settings.label)
 .data('seatId', this.settings.id)
 .appendTo($cart);
 $counter.text(sc.find('selected').length+1);
 $counter.attr('value', sc.find('selected').length+1); 
 $total.text(recalculateTotal(sc)+price);
 $total.attr('value', recalculateTotal(sc)+price); 
 return 'selected';
 } else if (this.status() == 'selected') { //Checked
 //Update Number
 $counter.text(sc.find('selected').length-1);
 $counter.attr('value', sc.find('selected').length-1);
 //update totalnum
 $total.text(recalculateTotal(sc)-price);
 $total.attr('value', 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;
}

**

The problem is the "sc" is not global and we have to put it outside the function

**

• John Weisz: A little sidenote for when you become more experienced in client-server communication based on PHP and Javascript: retrieve data (preferably in JSON or XML format) using asynchronous requests (AJAX) instead of writing Javascript with PHP directly. Nothing good ever came out from mixing programming languages. Well, maybe in the field of evolutionary algorithms, but certainly not in manually created code.
• Adrian Vazquez: I do not know AJAX yet hehe

Answer 1

You should init your seatCharts, e.g :

var sc = $('#seat-map').seatCharts({
 map: [
 'aaaaaaaaaaaa',
 'aaaaaaaaaaaa',
 'bbbbbbbbbb__',
 'bbbbbbbbbb__',
 'bbbbbbbbbbbb',
 'cccccccccccc'
 ],
 seats: {
 a: {
 price : 99.99,
 classes : 'front-seat' //your custom CSS class
 }
 },
 click: function () {
 if (this.status() == 'available') {
 //do some stuff, i.e. add to the cart
 return 'selected';
 } else if (this.status() == 'selected') {
 //seat has been vacated
 return 'available';
 } else if (this.status() == 'unavailable') {
 //seat has been already booked
 return 'unavailable';
 } else {
 return this.style();
 }
 }
});

And try to add ready function since the sc variable will be declared after load otherwise the sc.gets will be triggered on load of the DOM:

echo "<script type='text/javascript'> $(document).ready(function(){";
while ($row = mysqli_fetch_array ($result, MYSQLI_ASSOC)) {
 extract ($row);
 echo "sc.get(['".$BOOKING_SEAT."']).status('unavailable'); \n";
}
echo "});"

Check jQuery Seat Charts .

Hope this helps.

• Adrian Vazquez: Thats what I have on "booking.js", look my update, as you can see there is a line that is comment about the unavailable seats that I am trying to modify in my new script
• Adrian Vazquez: Thanks @ZakariaAcharki because now the code is better but still not working, "Uncaught ReferenceError: sc is not defined"

Answer 2

The problem was the "sc" is not global and we have to put it outside the function