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

**

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. — John Weisz
– John Weisz, Commented Jan 7, 2016 at 12:53

Zakaria Acharki · Accepted Answer · 2016-01-05 19:30:48Z

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.

edited Jan 5, 2016 at 19:30

answered Jan 5, 2016 at 19:06

Zakaria Acharki

67.5k15 gold badges78 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adrian Vazquez Over a year ago

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 Over a year ago

Thanks @ZakariaAcharki because now the code is better but still not working, "Uncaught ReferenceError: sc is not defined"

Adrian Vazquez · Accepted Answer · 2016-01-08 13:02:49Z

0

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

answered Jan 8, 2016 at 13:02

Adrian Vazquez

3471 gold badge7 silver badges21 bronze badges

Collectives™ on Stack Overflow

HTML script and javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related