How to toggleClass with SignalR hub.server?

Question

I am currently learning SignalR with .Net MVC and following a tutorial to work on a simple app. Right now it is working alright, but I am having trouble understanding some part and also if possible, want to sort of enhance it.

Plane Seats Tutorial link

Right now the app is working as when a user clicks on a seat, it reserves it. And there is no going back. I want to implement like a toggle, where if the user wants to change seat, he gets to unreserve his selected seat, and then be free to reserve another one. I am not being able to do it with myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss)); . Whenever I click on a seat, it gives me this error in the Dev tools

Uncaught: Converting circular structure to JSON

var settings = {
    rows: 5,
    cols: 15,
    rowCssPrefix: 'row-',
    colCssPrefix: 'col-',
    seatWidth: 35,
    seatHeight: 35,
    seatCss: 'seat',
    selectedSeatCss: 'selectedSeat',
    selectingSeatCss: 'selectingSeat'
};
$(function() {
    //// Start the hub
    window.hubReady = $.connection.hub.start();
});
$.connection.hub.start().done(function() {
    // Call the server side function AFTER the connection has been started
    myHub.server.createUser();
    //invoke for the user data
    myHub.server.populateSeatData();
});
// Seat selection
$('.' + settings.seatCss).click(function() {
    if ($(this).hasClass(settings.selectedSeatCss)) {
        alert('Sorry, this seat has been already reserved');
    } else {
        //$(this).toggleClass(settings.selectingSeatCss);
        //myHub.server.selectSeat(userId, $(this).toggleClass(settings.selectingSeatCss));
        myHub.server.selectSeat(userId, $(this)[0].innerText);
    }
});
// Client method to broadcast the message
myHub.client.createUser = function(message) {
    userId = message;
};
//get seats data
myHub.client.populateSeatData = function(message) {
    var parsedSeatsData = JSON.parse(message);
    $('li.seat').removeClass(settings.selectedSeatCss);
    $.each(parsedSeatsData, function(index, value) {
        $("a:contains('" + value.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss);
    });
};
// Client method to broadcast the message as user selected the seat
myHub.client.selectSeat = function(message) {
    var parsedSeatData = JSON.parse(message);
    $("a:contains('" + parsedSeatData.seatnumber + "')").parent("li").toggleClass(settings.selectedSeatCss);
};

And can anyone please briefly explain what is str.push doing in this block of code? What is it exactly pushing into the array?

var init = function(reservedSeat) {
    var str = [],
        seatNo, className;
    for (i = 0; i < settings.rows; i++) {
        for (j = 2; j < settings.cols; j++) {
            seatNo = (i + j * settings.rows + 1);
            className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
            if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                className += ' ' + settings.selectedSeatCss;
            }
            str.push('<li class="' + className + '"' + 'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' + '<a title="' + seatNo + '">' + seatNo + '</a>' + '</li>');
        }
    }
    $('#place').html(str.join(''));
};

Answer 1

I had to use a toggleSeat() function instead of just using toggleClass .

public void toggleSeat(int userId, int seatNumber)
        {
            PlaneSeatArrangment mySeat = allSeats.Where(s => s.SeatNumber == seatNumber).FirstOrDefault();
            var retunData = JsonConvert.SerializeObject(mySeat);
            if (mySeat != null && userId == mySeat.UserId)

            ..............               
        }