display the chosen choices from the jquery tool

Question

display the chosen choices from the jquery tool

I have implemented a Jquery movie seat selection plugin on my jsp website successfully. It allows users to select seats with ease.

However, the issue I am facing is that due to my limited knowledge of Jquery, I am unable to display the selected seats by the user on my jsp page.

I kindly request assistance in showing the users' selected seats on the jsp page so that I can save them in my derby database for future reference.

Here is the HTML snippet:

  <div class="demo">
    <div id="seat-map">
        <div class="front">SCREEN</div>                
    </div>

    <div class="booking-details">


        <p>Seat: </p>
        <ul id="selected-seats"></ul>
        <p>Tickets: <span id="counter">0</span></p>
        <p>Total: <b>Rs.<span id="total">0</span></b></p>

                    <a href="ticketValidation"><input type="button" value="BUY" class="checkout-button"/></a>

        <div id="legend"></div>
    </div>
    <div style="clear:both"></div>

Jquery :

      </style>

    <script>
         var price = 120; //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',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',

    ],
    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return column;
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Avail' ],
            [ 'a', 'unavailable', 'Sold']
        ]                  
    },
    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
            $('<li>R'+(this.settings.row+1)+' S'+this.settings.label+'</li>')
                .attr('id', 'cart-item-'+this.settings.id)
                .data('seatId', this.settings.id)
                .appendTo($cart);

            $counter.text(sc.find('selected').length+1);
            $total.text(recalculateTotal(sc)+price);

            return 'selected';
        } else if (this.status() == 'selected') { //Checked
                //Update Number
                $counter.text(sc.find('selected').length-1);
                //update totalnum
                $total.text(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;
}
</script>

CSS:

<style> 
.front{width: 300px;margin: 5px 32px 45px 32px;background-color:           #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height:     25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-   moz-border-radius:5px;border-radius: 5px;} 
div.seatCharts-row {height: 35px;} 
div.seatCharts-seat.available {background-color: #B9DEA0;} 
div.seatCharts-seat.focused {background-color: #76B474;border: none;} 
div.seatCharts-seat.selected {background-color: #E6CAC4;} 
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
div.seatCharts-container {border-right: 1px dotted #adadad;width:      400px;padding: 20px;float: left;} 
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-    height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px;    border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-   weight:bold; text-align:center}
</style>

Please lend me your expertise!

Thank you!

javascript jquery css jsp plugins

Answer 1

Answer №1

If you're looking to create a dialog box with a PDF version of the HTML related to your selected seat when clicking a print button, I recommend using the jQuery dialog plugin (dialog) along with jsPDF.

Here's an example of what the result may look like: https://i.sstatic.net/j6Po3.jpg

Below is the code snippet:

var price = 120; //price
var sc;

//calculate total amount
function recalculateTotal(sc) {
  var total = 0;
  sc.find('selected').each(function () {
    total += price;
  });

  return total;
}

$(function () {
  var $cart = $('#selected-seats'), //Sitting Area

      $counter = $('#counter'), //Votes
      $total = $('#total'); //Total money

  sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',

    ],
      naming: {
      top: false,
      getLabel: function (character, row, column) {
      return column;
      }
      },
      legend: { //Definition legend
      node: $('#legend'),
      items: [
      ['a', 'available', 'Avail'],
    ['a', 'unavailable', 'Sold']
    ]
  },
                                 click: function () { //Click event
    if (this.status() == 'available') { //optional seat
      $('<li>R' + (this.settings.row + 1) + ' S' + this.settings.label + '</li>')
      .attr('id', 'cart-item-' + this.settings.id)
      .data('seatId', this.settings.id)
      .appendTo($cart);

      $counter.text(sc.find('selected').length + 1);
      $total.text(recalculateTotal(sc) + price);

      return 'selected';
    } else if (this.status() == 'selected') { //Checked
      //Update Number
      $counter.text(sc.find('selected').length - 1);
      //update totalnum
      $total.text(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');


$(':button[value="PRINT"]').on('click', function(e) {
  e.preventDefault();
  if ($('#selected-seats li').length > 0) {
    var doc = new jsPDF();

    var specialElementHandlers = {
      '#selected-seats': function(element, renderer){
        return true;
      }
    };
    doc.fromHTML($('#selected-seats').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    var uriPdf =  doc.output('datauristring');

    $('<div>').prop('id', '_currentDialog').add('<iframe id="_myPdf" type="application/pdf" src="' + uriPdf + '"></iframe>').dialog({
      title: "Selected seat",
      width: 600,
      height: 800,
      close: function (event, ui) {
        $('#_currentDialog').remove();
      }
    });
  } else {
    alert('No selected seat to print!')
  }
});
});

.front {
  width: 300px;
  margin: 5px 32px 45px 32px;
  background-color: #f0f0f0;
  color: #666;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
}

.booking-details {
  float: right;
  position: relative;
  width: 200px;
  height: 450px;
}

.booking-details h3 {
  margin: 5px 5px 0 0;
  font-size: 16px;
}

booking-details p {
  line-height: 26px;
  font-size: 16px;
  color: #999
}

booking-details p span {
  color: #666
}

/* CSS styles continue... */

<link href="js/jquery.seat-chart/jquery.seat-charts.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/jquery.seat-chart/jquery.seat-charts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>

<div class="demo">
    <div id="seat-map">
        <div class="front">SCREEN</div>
    </div>

    <div class="booking-details">


        <p>Seat: </p>
        <ul id="selected-seats"></ul>
        <p>Tickets: <span id="counter">0</span></p>

        <p>Total: <b>Rs.<span id="total">0</span></b></p>

        <a href="ticketValidation"><input type="button" value="BUY" class="checkout-button"/></a>
        <a href="ticketPrint"><input type="button" value="PRINT" class="checkout-button"/></a>

        <div id="legend"></div>
    </div>
    <div style="clear:both"></div>
</div>

Answer 2

If you're looking to create a dialog box with a PDF version of the HTML related to your selected seat when clicking a print button, I recommend using the jQuery dialog plugin (dialog) along with jsPDF.

Here's an example of what the result may look like: https://i.sstatic.net/j6Po3.jpg

Below is the code snippet:

var price = 120; //price
var sc;

//calculate total amount
function recalculateTotal(sc) {
  var total = 0;
  sc.find('selected').each(function () {
    total += price;
  });

  return total;
}

$(function () {
  var $cart = $('#selected-seats'), //Sitting Area

      $counter = $('#counter'), //Votes
      $total = $('#total'); //Total money

  sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',
      'aaaaaaaaaa',

    ],
      naming: {
      top: false,
      getLabel: function (character, row, column) {
      return column;
      }
      },
      legend: { //Definition legend
      node: $('#legend'),
      items: [
      ['a', 'available', 'Avail'],
    ['a', 'unavailable', 'Sold']
    ]
  },
                                 click: function () { //Click event
    if (this.status() == 'available') { //optional seat
      $('<li>R' + (this.settings.row + 1) + ' S' + this.settings.label + '</li>')
      .attr('id', 'cart-item-' + this.settings.id)
      .data('seatId', this.settings.id)
      .appendTo($cart);

      $counter.text(sc.find('selected').length + 1);
      $total.text(recalculateTotal(sc) + price);

      return 'selected';
    } else if (this.status() == 'selected') { //Checked
      //Update Number
      $counter.text(sc.find('selected').length - 1);
      //update totalnum
      $total.text(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');


$(':button[value="PRINT"]').on('click', function(e) {
  e.preventDefault();
  if ($('#selected-seats li').length > 0) {
    var doc = new jsPDF();

    var specialElementHandlers = {
      '#selected-seats': function(element, renderer){
        return true;
      }
    };
    doc.fromHTML($('#selected-seats').html(), 15, 15, {
      'width': 170,
      'elementHandlers': specialElementHandlers
    });
    var uriPdf =  doc.output('datauristring');

    $('<div>').prop('id', '_currentDialog').add('<iframe id="_myPdf" type="application/pdf" src="' + uriPdf + '"></iframe>').dialog({
      title: "Selected seat",
      width: 600,
      height: 800,
      close: function (event, ui) {
        $('#_currentDialog').remove();
      }
    });
  } else {
    alert('No selected seat to print!')
  }
});
});

.front {
  width: 300px;
  margin: 5px 32px 45px 32px;
  background-color: #f0f0f0;
  color: #666;
  text-align: center;
  padding: 3px;
  border-radius: 5px;
}

.booking-details {
  float: right;
  position: relative;
  width: 200px;
  height: 450px;
}

.booking-details h3 {
  margin: 5px 5px 0 0;
  font-size: 16px;
}

booking-details p {
  line-height: 26px;
  font-size: 16px;
  color: #999
}

booking-details p span {
  color: #666
}

/* CSS styles continue... */

<link href="js/jquery.seat-chart/jquery.seat-charts.css" rel="stylesheet">
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/jquery.seat-chart/jquery.seat-charts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>

<div class="demo">
    <div id="seat-map">
        <div class="front">SCREEN</div>
    </div>

    <div class="booking-details">


        <p>Seat: </p>
        <ul id="selected-seats"></ul>
        <p>Tickets: <span id="counter">0</span></p>

        <p>Total: <b>Rs.<span id="total">0</span></b></p>

        <a href="ticketValidation"><input type="button" value="BUY" class="checkout-button"/></a>
        <a href="ticketPrint"><input type="button" value="PRINT" class="checkout-button"/></a>

        <div id="legend"></div>
    </div>
    <div style="clear:both"></div>
</div>

Answer 3

Answer №2

If you're looking to incorporate jQuery into your HTML, the convenient function to use is "html()". For instance, if you wish to add text to a specific div with the id of "legend", simply execute this line of code:

$("#legend").html("<p>whatever message you want to include</p>");

For further guidance on this topic, feel free to visit the following link: w3schools tutorial

I trust this information proves useful in your endeavors.

Answer 4

If you're looking to incorporate jQuery into your HTML, the convenient function to use is "html()". For instance, if you wish to add text to a specific div with the id of "legend", simply execute this line of code:

$("#legend").html("<p>whatever message you want to include</p>");

For further guidance on this topic, feel free to visit the following link: w3schools tutorial

I trust this information proves useful in your endeavors.

display the chosen choices from the jquery tool

Answer №1

Answer №2

Similar questions

VueJS with Vuetify: Issue with draggable cards in a responsive grid

The computed variable in Vuex does not get updated when using the mapState function

PHP: Communicating Data with JavaScript

Enable the image to extend beyond the boundaries of its containing div

What could be causing the issue with Vite build and npm serve not functioning together?

Problem arises when attempting to display a div after clicking on a hyperlink

javascript: update hidden field if date is past January 15th

Try uploading a file with the imageUpload function in JavaScript, could be something basic

Creating a Border Length Animation Effect for Button Hover in Material-UI

Angular 6 CSS spacing dilemmas

Handling a JSON payload within an ASP.NET MVC controller

Disappearance of background image on HTML5 canvas upon mouse movement

What is the best way to navigate my Page while my Dialog Component is displayed?

How to maximize efficiency by utilizing a single function to handle multiple properties in Angular

Issue with integrating CrunchBase API and making AJAX requests using jQuery's $.getJSON method

Tips for effectively making REST requests from a ReactJS + Redux application?

Issues with retrieving the output of a function nested within another function through an ajax request

Encountering a problem with AngularJS ui router templates

What is the method for accessing an anonymous function within a JavaScript Object?

Rendering content conditionally using react technology