jqueryプラグインから選択したオプションを印刷します

Question

jspウェブサイトでJqueryムービーシート選択プラグインを使用しようとしています。プラグインはうまく動作し、座席を選択することができます。

私の問題は、Jqueryがわからないので、私のJSPページでユーザーが選択したシートを印刷できなかったことです。

jspページでユーザーが選択した座席を親切に印刷できます。だから私はそれらを使用して私のderbyデータベースに保存することができます。

HTML

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

助けてください！

ありがとうございました。あなたはこれを行うことができ、IDの伝説とdivの中に書きたい場合はjQueryを使ってHTMLで印刷する

Answer 1

助けを願って、プラスjsPDFあなたの選択した座席にスニペットがある

：よう

結果が

var price = 120; //price 
var sc; 

//sum total money 
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 
} 

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: inline; 
    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 
} 
#_myPdf { 
    width: 100% !important; 
} 

<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

機能は、例えば、「HTML（）」である： $("#legend").html("<p>whatever you want to write</p>");

あなたはについての詳細を見つけることができますこのページ w3schools tutorial

は、HTML relatのPDF版を含む印刷ボタンのダイアログを生成するために、それは私はあなたがjQueryのダイアログのプラグイン（dialog）を使用することを提案することができる