Doesn't work on mobile

[cmbasse]

I've tested on both iPhone using safari and android using chrome and the seating chart doesn't render. This is the code I used.

          var $cart = $('#selected-seats'),
                $counter = $('#counter'),
                $total = $('#total'),
                sc = $('#seat-map').seatCharts({
                    map: [
                        '___ggggggggggg_ggggggggggg___',
                        'gggggggggggggg_gggggggggggggg',
                        'gggggggggggggg_gggggggggggggg',
                        '_ggggggggggggg_ggggggggggggg_',
                        '_ggggggggggggg_ggggggggggggg_',
                        '_ggggggggggggg_ggggggggggggg_',
                        '__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: {
                        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 : [
                            [ '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": "{{ csrf_token() }}"
                            };

                            $.ajax({
                                cache: "false",
                                type: "POST",
                                data: tosend,
                                url: "{{url()->current() . '/reserve'}}",
                                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": "{{ csrf_token() }}"
                            };

                            $.ajax({
                                cache: "false",
                                type: "DELETE",
                                data: tosend,
                                url: "{{url()->current() . '/reserve'}}",
                                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();
                        }
                    }
                });

            checkReservations(sc);
            setInterval(function(){checkReservations(sc)}, 20000)
        });
        //this will handle "[cancel]" link clicks
            $('#selected-seats').on('click', '.cancel-cart-item', function () {
                  sc.get($(this).parents('li:first').data('seatId')).click();
            });

[mateuszmarkowski]

Does the demo map render for you?

[cmbasse]

Yes the demo worked. I reworked my js includes and where they load on the page and I can now get mine to render but the seats aren't clickable (i just updated click code it in my original post)

[mateuszmarkowski]

Are you seeing any JS warnings/errors in the console?

[cmbasse]

No I've been playing around with it a little and could it be that the map is too big? If on my phone I click the display desktop site it works. I'm using bootstrap to make the site mobile friendly could this be the issue?