We Keep Coding

vue checkbox doesn't bind data correctly by v-model

I have a todolist that you can add new todo, and mark each todo as completed by click checkbox, and select the item visibility of the list by all or active or completed on the footer.
When I select Completed on the footer, it only shows item that is completed.
The problem is when I unmark the completed item in completed view, the remain(especially next one) item's checkbox display incorrectly.
var STORAGE_KEY = 'todo mvc by vue';
var todoStorage = {
data: [],
fetch: function () {
return this.data;
},
save: function (data) {
this.data = data;
//localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
}
}
var filters = {
all: function (todos) {
return todos;
},
active: function (todos) {
return todos.filter(todo => !todo.completed);
},
completed: function (todos) {
return todos.filter(todo => todo.completed);
}
}
var app = new Vue({
el: '.app',
data: {
todos: todoStorage.fetch(),
newTodo: '',
visiblitys: [{
title: 'All',
selected: true,
filter: filters.all
}, {
title: 'Active',
selected: false,
filter: filters.active
}, {
title: 'Completed',
selected: false,
filter: filters.completed
}]
},
computed: {
todosForShow: function () {
return this.currentFilter(this.todos);
},
currentFilter: function () {
return this.visiblitys.find(v => v.selected).filter;
}
},
watch: {
todos: {
handler: function (todos) {
todoStorage.save(todos);
},
deep: true
}
},
methods: {
deleteItem: function (todo) {
this.todos.splice(this.todos.indexOf(todo), 1);
},
deleteCompletedItem: function () {
this.todos = filters.active(this.todos);
},
addItem: function (todo) {
var value = this.newTodo && this.newTodo.trim();
if (!value) return;
this.todos.push({
content: value,
completed: false
});
this.newTodo = '';
},
selectVisiblity: function (visiblity) {
this.visiblitys.forEach(vis => vis.selected = false);
visiblity.selected = true;
},
completeAll: function () {
this.todos.forEach(todo => todo.completed = true);
}
}
});
* {
box-sizing: border-box;
}
header h1 {
text-align: center;
}
.container {
max-width: 800px;
margin: 0 auto;
}
.new-todo {
padding: 16px;
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
font-size: 24px;
width: 100%;
}
li.completed {
text-decoration: line-through;
}
footer {
border-top: 1px solid #e6e6e6;
height: 20px;
padding: 10px 15px;
color: #777;
text-align: center;
position: relative;
}
.filters {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
right: 0;
}
.filters li {
display: inline;
}
.filters li a {
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
color: inherit;
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.complete-all {
float: right;
cursor: pointer;
position: relative;
color: black;
}
.todo-list {
clear: both;
}
.clear-completed {
float: right;
cursor: pointer;
position: relative;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-font-smoothing: antialiased;
}
<header>
<h1>Todos</h1>
</header>
<div class="app container">
<input class="new-todo" type="text" v-on:keyup.enter="addItem()" v-model="newTodo"
placeholder="What needs to be done?">
<section class="main" v-show="todos.length > 0">
<button class="complete-all" #click="completeAll()">Complete All</button>
<ul class="todo-list">
<li v-for="todo in todosForShow" :class="{completed: todo.completed}">
<input type="checkbox" v-model="todo.completed">
{{todo.content}} -
remove
</li>
</ul>
<footer>
<span class="todo-count">{{todos.filter(t=>!t.completed).length}} items left</span>
<ul class="filters">
<li v-for="visiblity in visiblitys">
<a href="#" :class="{selected: visiblity.selected}"
#click.prevent="selectVisiblity(visiblity)">{{visiblity.title}}</a>
</li>
</ul>
<button class="clear-completed" v-show="todos.some(t=>t.completed)" #click="deleteCompletedItem()">Clear
Completed</button>
</footer>
</section>
<br>todos raw data：{{this.todos}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
begin
select the completed in the footer
after uncheck first item

Mini/maximize effect on "dialogs"

Im trying to get a FB messaging system now i can append the dialogs next to eachother but how can i position the minimized dialog on bottom of the div ?
On the demo open 2 or more dialogs by clicking create button than click on titlebar it will minimize/maximize the dialog. What i want is a FB messaging effect $(this) titlebar must go down
Private = {
count: 0,
windowsOpen: [],
closeDialog: function(evt){
evt.parent().parent().remove()
Private.removeFromArray(evt.parent().text())
},
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
dialogCloseButton = $("<span />", {
class: "ct icon-cancel close-private-dialog"
}),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.append(dialogHeader)
},
dialogChecker: function(nickname){
if(Private.windowsOpen.indexOf(nickname) === -1){
Private.windowsOpen.push(nickname)
Private.createDialog(nickname)
} else {
console.log("this dialog is already open")
}
},
dialogHandler: function(nickname){
Private.dialogChecker(nickname)
},
dialogSize: function(evt){
evt.next().toggle()
},
events: function() {
$("#create").on("click", function(){
Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
removeFromArray: function(nickname){
if(Private.windowsOpen.indexOf(nickname) !== -1){
var index = Private.windowsOpen.indexOf(nickname);
Private.windowsOpen.splice(index, 1)
}
}
}
Private.init()
#main-container {
position: absolute;
border: 1px solid red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#private-dialog {
position: absolute;
bottom: 0;
right: 0;
}
.private-section {
float: right;
width: 7em;
margin-left: 2px;
}
.private-title {
background-color: #e01859;
color: #FFF;
padding: .5rem;
border-radius: .3rem .3rem 0 0;
box-shadow: 0px -2px 1px rgba(16, 13, 14, 0.39);
cursor: pointer;
}
.private-init {
background-color: #FFF;
height: 5em;
padding: 1em;
}
.private-section > .icon-cancel:before {
float: right;
margin-top: 2px;
}
.close-private-dialog {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
Click couple times on "create" button
<button id="create">
create
</button>
<div id="private-dialog">
</div>
</div>

Replace float: right with display: inline-block in .private-section and use prepend() rather than append() if you want to keep the same order when adding new popups.
There's a area at the bottom that still needs handling when all of them are collapsed, but that's the basic idea.
Private = {
count: 0,
windowsOpen: [],
closeDialog: function(evt){
evt.parent().parent().remove()
Private.removeFromArray(evt.parent().text())
},
createDialog: function(nickname) {
var dialog = $("#private-dialog"),
dialogCloseButton = $("<span />", {
class: "ct icon-cancel close-private-dialog"
}),
dialogHeader = $("<div />", {
class: "private-section"
}),
dialogInit = $("<div />", {
class: "private-init",
html: "Here will come the messages"
}),
dialogTitle = $("<div />", {
class: "private-title",
html: nickname
});
dialogTitle.append(dialogCloseButton)
dialogHeader.append(dialogTitle, dialogInit)
dialog.prepend(dialogHeader)
},
dialogChecker: function(nickname){
if(Private.windowsOpen.indexOf(nickname) === -1){
Private.windowsOpen.push(nickname)
Private.createDialog(nickname)
} else {
console.log("this dialog is already open")
}
},
dialogHandler: function(nickname){
Private.dialogChecker(nickname)
},
dialogSize: function(evt){
evt.next().toggle()
},
events: function() {
$("#create").on("click", function(){
Private.openDialog()
})
$(document).on("click", ".close-private-dialog", function(){
Private.closeDialog($(this))
})
$(document).on("click", ".private-title", function(){
Private.dialogSize($(this))
})
},
init: function() {
Private.events()
},
openDialog: function(){
var nick = "test" + Private.count;
Private.dialogChecker(nick)
Private.count++;
},
removeFromArray: function(nickname){
if(Private.windowsOpen.indexOf(nickname) !== -1){
var index = Private.windowsOpen.indexOf(nickname);
Private.windowsOpen.splice(index, 1)
}
}
}
Private.init()
#main-container {
position: absolute;
border: 1px solid red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#private-dialog {
position: absolute;
bottom: 0;
right: 0;
}
.private-section {
display: inline-block;
width: 7em;
margin-left: 2px;
}
.private-title {
background-color: #e01859;
color: #FFF;
padding: .5rem;
border-radius: .3rem .3rem 0 0;
box-shadow: 0px -2px 1px rgba(16, 13, 14, 0.39);
cursor: pointer;
}
.private-init {
background-color: #FFF;
height: 5em;
padding: 1em;
}
.private-section > .icon-cancel:before {
float: right;
margin-top: 2px;
}
.close-private-dialog {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-container">
Click couple times on "create" button
<button id="create">
create
</button>
<div id="private-dialog">
</div>
</div>

Remove Entire Modal with Jquery

I've been looking at previously posted StackOverflow questions, and still could not find my answer. So, I've been trying to simply delete the entire modal when I click on the close button. I can't get it to work, unfortunately. This is my code, so far.
var jQueryLoaded = 0;
function Modal(title, contents) {
if (jQueryLoaded === 1) {
var modal = document.createElement('div'),
modal_box = document.createElement('div'),
modal_head = document.createElement('div'),
modal_title = document.createElement('div'),
close_btn = document.createElement('div'),
modal_content = document.createElement('div');
modal.className = 'modal';
modal_box.className = 'modal_box';
modal_head.className = 'modal_head';
modal_title.className = 'modal_title';
modal_title.innerHTML = title;
close_btn.className = 'modal_close';
close_btn.innerHTML = '\u00D7';
modal_content.className = 'modal_content';
modal_content.innerHTML = contents;
$("body").append(modal);
$(modal).append(modal_box);
$(modal_box).append(modal_head, modal_content);
$(modal_head).prepend(modal_title);
$(modal_head).append(close_btn);
} else {
console.warn('jQuery, a required library, is not available at moment of function run. Please double check jQuery is loaded properly before running this function again.');
}
}
$(document).ready(function () {
jQueryLoaded = 1;
$("div.modal_close").on('click', function () {
$(this).parent().parent().closest('.modal').remove();
});
Modal('hello','<p>Example</p>');
});
/* Modals based off of W3Schools example! */
div.modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
div.modal > div.modal_box {
background: #FFFFFF;
margin: auto;
padding: 5px;
border: 1px solid #000000;
width: 80%;
box-shadow: 3px 5px 3px rgba(0, 0, 0, 0.6);
}
div.modal > div.modal_box > div.modal_head {
width: 100%;
height: auto;
border: none;
border-radius: 0;
border-bottom: 1px solid #000000;
min-height: 10px;
font-weight: 16px;
}
div.modal > div.modal_box > div.modal_head > div.modal_title {
display: inline-block;
color: #000000;
text-align: center;
font-weight: 900;
font-size: 24px;
}
div.modal > div.modal_box > div.modal_head > div.modal_close {
margin: 1px;
font-weight: 900;
color: #000000;
border: 1px solid transparent;
padding: 2px;
border-radius: 5px;
background: transparent;
cursor: pointer;
float: right;
line-height: 10px;
user-select: none;
-webkit-user-select: none;
-o-user-select: none;
-k-user-select: none;
-moz-user-select: none;
}
div.modal > div.modal_box > div.modal_head > div.modal_close:hover,
div.modal > div.modal_box > div.modal_head > div.modal_close:focus {
border: 1px solid #000000;
background: rgba(0, 0, 0, 0.3);
}
div.modal > div.modal_box > div.modal_head > div.modal_close:active {
background: rgba(255, 0, 0, 0.8);
border: 1px solid #000000;
}
div.modal > div.modal_box > div.modal_content {
padding: 4px;
padding-left: 10px;
font-size: 16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
Mind you, the code to remove the modal was just the last one I tried. I tried many others like $(this).parent().parent().closest('.modal').remove(); and $(this).parent().parent().find('.modal').remove().

You're mixing JS and jQuery, not that it's not good, but you use it in an inappropriate way. jQuery is designed to help you manipulate with DOM and events - make use of it!
If you're building a Modal function to handle modals, the close should be handled from within the script, not by adding extra stuff all around your .js files.
How do you call your Modal?
Here's an example to give you an idea and get you started:
jQuery(function ($) { // DOM is ready and $ alias secured
Modal("opened",{
title : "Opened example",
content : "<p>Immediately opened from JS using <code>.open()</code></p>"
}).open();
Modal("test1", {
title : "This is Title",
content :
`<p>
<b>Lorem Ipsum</b>
Dolor sit amet<br>
Example
</p>`
});
Modal("another", {
title: "Auto-hide in 3sec",
content: "<p>Like it? <b>Show some love</b></p>",
duration: 3000
});
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
[data-modal]{ color:blue; cursor:pointer; }
<h1>Modal Demo</h1>
Click <a data-modal="test1">here</a> to call modal ID test1<br>
or you can click <a data-modal="another">here</a> to call another modal
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
/** Modal - Custom modals example by RokoCB
* #param {String} modalId - A modal name used to reference a modal
* #param {Object} data - {title:"String", content:"HTML", duration:ms}
* #return {Object} - methods: .open() .close()
*/
function Modal(modalId, data) {
// DEFAULT MODAL STYLES
var css = {
area: {
position: "fixed",
visibility: "hidden",
opacity: 0,
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 99999,
background: "rgba(0,0,0,0.4)",
transition: "0.4s",
},
modal: {
position: "absolute",
left: "50%",
top: "50%",
minWidth: 240,
transform: "translate(-50%, -50%)",
background: "#fff",
boxShadow: "0 8px 24px rgba(0,0,0,0.6)",
},
title: {
padding: "8px 32px 8px 16px",
fontSize: 18,
borderBottom:"1px solid rgba(0,0,0,0.15)",
},
content: {
padding: "16px",
},
close: {
position: "absolute",
top: 4,
right: 4,
padding: 8,
cursor: "pointer",
userSelect: "none",
}
}
// ELEMENTS
var $area = $("<div/>", {
class: "modal_area",
appendTo: "body",
css: css.area,
click : closeModal,
});
var $modal = $("<div/>", {
class: "modal",
appendTo: $area,
css: css.modal,
click: function(evt){evt.stopPropagation();}
});
$("<div/>", {
class: "modal_title",
appendTo : $modal,
text : data.title,
css: css.title,
});
$("<div/>", {
class: "modal_content",
appendTo : $modal,
html : data.content,
css: css.content,
});
$("<div/>", {
class: "modal_close",
appendTo : $modal,
text : '\u00d7',
css: css.close,
click : closeModal,
});
// ACTIONS
var closeTimeout = null;
function closeModal() {
$area.removeClass("open").css({visibility:"hidden", opacity:0});
}
function openModal() {
$area.addClass("open").css({visibility:"visible", opacity:1});
if(data.duration) {
clearTimeout(closeTimeout);
closeTimeout = setTimeout(closeModal, data.duration);
}
}
$(document).on("click", "[data-modal='"+modalId+"']", openModal);
// METHODS
return {
open : openModal,
close : closeModal
}
}
</script>

The button will have no event listener attached to it because you're creating it after the attaching of the event listener. There is two solution for this:
EITHER:
Add the event listener just after the button is created inside the Modal class here:
close_btn.onclick = function() {
$(this).closest('.modal').remove();
}
OR:
Use event delegation like this:
$(document).on('click', 'div.modal_close', function () {
$(this).closest('.modal').remove();
});
NOTE: Since, as mentioned in the comments, you are already using jQuery why not using it inside the Modal class too.

Drag and Drop from localstorage HTML5 not working

I have created a web page with drag and drop features for some of the elements.
Once the drag and drop are done, I store the elements which are in the droppable area in the local storage of the browser.
Later when the page is accessed again, I take the values from local storage and restore them on the web page.
After I restore, I couldn't drag the elements in the droppable area within its containment. Could anyone please help? Below is the code I have used.
Here is the link to FIDDLE
HTML
×
Battery Voltage
<div class="left_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Flight Time Left</p>
<div class="flightLeft"></div>
</div>
<div class="cnt_flight floatleft ui-widget-content">
<a class="boxclose displayblock">×</a>
<p>Current Flight Time</p>
<div class="curFlight"></div>
</div>
<div style="clear:both"></div>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
</div>
JS:
$(function() {
if (localStorage.length > 0) {
for (var i = 0; i < localStorage.length; i++) {
var dropClass = localStorage.key(i);
var clonediv = $("." + dropClass.substr(4, dropClass.length - 4)).clone();
var droppable = $("#droppable");
clonediv.appendTo(droppable);
clonediv
//.draggable({ revert: false, grid: [30, 30], scroll: true })
//.sortable()
.resizable({
containment: "#droppable"
});
clonediv.find('a').removeClass("displayblock").click(function() {
var par = $(this).parent();
var id = par.attr("class").split(' ');
var droppable = $("#droppable");
var removing = droppable.find("." + id[0]);
removing.remove();
localStorage.removeItem("drop" + id[0]);
});
}
} else {}
$(".bat_voltage").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".left_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$(".cnt_flight").draggable({
revert: true,
grid: [30, 30],
scroll: true
});
$("#droppable").droppable({
drop: function(event, ui) {
var dragged = ui.draggable;
var id = dragged.attr("class").split(' ');
var droppable = $("#droppable");
var findElement = (droppable.find("." + id[0]));
if (findElement.length != 0) {} else {
ui.helper.css({
'top': 0,
'left': 0,
'position': 'relative'
});
ui.helper.clone()
.appendTo(droppable)
.draggable({
containment: "#droppable",
grid: [30, 30],
snap: true
})
.resizable({
containment: "#droppable"
}).sortable({
revert: false
});
droppable.find("." + id[0]).find('a').removeClass("displayblock").click(function() {
var par = $(this).parent();
var id = par.attr("class").split(' ');
var droppable = $("#droppable");
var removing = droppable.find(findElement);
removing.remove();
localStorage.removeItem("drop" + id[0]);
});
localStorage.setItem("drop" + id[0], droppable);
}
}
});
});
CSS:
.bat_voltage { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.floatleft { float: left; }
.left_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
.cnt_flight { width: 250px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0; z-index: 1; }
#droppable { width: 50%; height: 400px; padding: 0.5em; margin: 10px; resize: both; border: 2px; overflow: auto; }
#progressbar { width: 200px; height: 50px; margin-top: 20px; }
a.boxclose { float: right; margin-top: -10px; margin-right: -10px; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 8px;
background: #605F61; font-size: 21px; font-weight: bold; display: inline-block; line-height: 0px; padding: 8px 3px; display: block; }
.displaynone { display: none !important; }
.displayblock { display: none !important; }

It must be somehow caused by the element not being dragged into the droppable area, making the revert parameter active because of this. Not sure how to solve this better than by just disabling it for the elements present inside it at the start:
$('#droppable .ui-draggable').draggable( "option", "revert", false );
Working FIDDLE

print the selected options from the jquery plugin

I'm trying to use a Jquery movie seat selection plugin on my jsp website. The plugin works well and i can able to select the seat.
My problem is, since i don't know Jquery i could not able to print the user selected seat on my jsp page.
kindly help me to print the users selected seat on jsp page. So that i can use them to store on my derby database.
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>
<input type="button" value="BUY" class="checkout-button"/>
<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 Help!
Thanks.

I may suggest you to use the jQuery dialog plugin (dialog), plus jsPDF in order to produce a dialog on a print button containing a pdf version of the html related to your selected seat.
The result is like:
The snippet is:
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>
<input type="button" value="BUY" class="checkout-button"/>
<input type="button" value="PRINT" class="checkout-button"/>
<div id="legend"></div>
</div>
<div style="clear:both"></div>
</div>

The function to print in the html with jquery is "html()" for example if you want to write in the div with the id legend you can do this:
$("#legend").html("<p>whatever you want to write</p>");
You can find more details on this page
w3schools tutorial
Hope it help