HTML script and javascript


HTML script and javascript

我试图从数据库中显示不可用的座位

<?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";
}
?>

这就是我后来看到的:

<!-- 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>

当我检查代码时,我看到了我想要的东西,但它不起作用,因为它说"UncaughtReferenceError:sc没有定义"。

"sc"answers"get"来自"js/booking.js"answers"js/seat-chards.min.js"。

更新:

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;
}

**

问题是"sc"不是全球性的,我们必须把它放在外面功能

**

您应该初始化seatCharts,例如:

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();
        }
    }
});

并尝试添加ready函数,因为sc变量将在加载后声明,否则sc.gets将在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 "});"

检查jQuery座位表

希望这能有所帮助。

问题是"sc"不是全局的,我们必须将其放在函数之外