Bootstrap toggle button with <template> - javascript

Can someone explain and give me a solution why the bootstrap toggle button works fine when page loads but does not when using template and javascript
This code works on load but the toggle button is a checked button when I click on the button "Add Row":
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<div>
<button type="button" class="btn btn-primary" id="myButton">Add Row</button>
</div>
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
<th scope="col">Col 4</th>
<th scope="col"><input type="checkbox" checked data-toggle="toggle" data-width="10"
data-height="" data-on=" " data-off=" " data-onstyle="primary" data-offstyle="warning">
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td scope="col">Test 1</td>
<td scope="col">Test 2</td>
<td scope="col"><input class="form-control" type="number" value="12345" readonly>
</td>
<td scope="col">Test 4</td>
<td scope="col"><input type="checkbox" checked data-toggle="toggle" data-width="10"
data-height="" data-on=" " data-off=" " data-onstyle="primary" data-offstyle="warning">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<template id="newRow">
<tr>
<td scope="col">Test 1</td>
<td scope="col">Test 2</td>
<td scope="col"><input class="form-control" type="number" value="12345" readonly>
</td>
<td scope="col">Test 4</td>
<td scope="col"><input type="checkbox" checked data-toggle="toggle" data-width="10" data-height=""
data-on=" " data-off=" " data-onstyle="primary" data-offstyle="warning"></td>
</tr>
</template>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
<script>
function insertNewRow() {
var template = document.querySelector("#newRow");
var tbody = document.querySelector("#tableBody");
var clone;
var td;
clone = document.importNode(template.content, true);
td = clone.querySelectorAll("td");
td[0].textContent = "A";
td[1].textContent = "B";
td[2].textContent = "C";
td[3].textContent = "D";
tbody.appendChild(clone);
}
$('#myButton').on('click', insertNewRow)
document.addEventListener('DOMContentLoaded', insertNewRow);
</script>
</body>
</html>
Can someone explain and give me a solution why the bootstrap toggle button works fine when page loads but does not when using template and javascript
This code works on load but the toggle button is a checked button when I click on the button "Add Row":

Related

Bootstrap style not working while printing a div

I want to print a table and save it as pdf. But default bootstrap style not working when I print. I want to print the table as shown in the screen. Below is the code that I have tried. Also please look at the codepen.
I tried using bootstrap with media property 'print', but it doesn't work for me.
Codepen link here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-12" id="printable">
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="col-12">
<button class="btn btn-info" id="printBtn">Print Table</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$('#printBtn').click(function(){
var divToPrint=document.getElementById('printable');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
});
})
</script>
</body>
</html>

jQuery slideDown, and slideUp NOT animate

I can't explain why my slideUp and slideDown is not working.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<div class="text-center">
<button class="btn btn-lg btn-success" type="button" id="show">Show</button>
<button class="btn btn-lg btn-danger" type="button" id="hide">Hide</button>
</div>
<br><br><br>
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<!-- EX1 -->
<!-- $('#hide').on('click', function() { -->
<!-- $('table').hide(); -->
<!-- }); -->
<!-- $('#show').on('click', function() { -->
<!-- $('table').show(); -->
<!-- }); -->
<!-- EX2 -->
<!-- $('#hide').on('click',function() { -->
<!-- $('table').fadeOut(2000); -->
<!-- }); -->
<!-- $('#show').on('click',function() { -->
<!-- $('table').fadeIn(2000); -->
<!-- }); -->
<script type="text/javascript">
$('#hide').on('click', function() {
$('.table').slideUp("slow", function(){
console.log('%c -------->> hide clicked <<--------', "color: green;");
});
});
$('#show').on('click', function() {
$('.table').slideDown("slow", function(){
console.log('%c -------->> show clicked <<--------', "color: green;");
});
});
</script>
</body>
</html>
I can reproduce it here too
https://jsfiddle.net/bheng/gef1ntLq/
I've tried almost every version of jQuery.
Tables can be picky and you should not use any animation effects on the table directly. But it works fine, if you pack the table into a div and use slideUp() and slideDown() on the div.
Here is an updated version of your jsFiddle.

HTML Codes are doesn't work in bootstrap table

I have a bootstrap table with filters and search options are on.
But i can't use HTML/PHP codes in table when i use "data-toggle="table"
I've tried the update bootstrap versions its didn't work.
When i remove "data-toggle="table" codes are starts to working.
I greatly appreciate your help
Here is my codes;
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>KVK Teknik Servis Hizmet Verilen Modeller Tablosu</title>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css'>
<link rel='stylesheet' href='http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css'>
</head>
<body>
<div class="container">
<div id="toolbar">
</select>
</div>
<table id="table"
data-toggle="table"
data-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
class="table-responsive">
<thead>
<tr>
<th data-field="state" data-filter-control="select" data-sortable="true">Marka</th>
<th data-field="tip" data-filter-control="select" data-sortable="true">Tip</th>
<th data-field="prenom" data-filter-control="input" data-sortable="true">Model</th>
<th data-field="date" data-filter-control="input" data-sortable="true">Bölge</th>
<th data-field="examen" data-filter-control="input" data-sortable="true">Yetki</th>
<th data-field="uzman" data-filter-control="select" data-sortable="true">Ürün Uzmanı</th>
<th data-field="destek" data-filter-control="select" data-sortable="true">Teknik Destek</th>
<th data-field="note" data-sortable="true">Link</th>
<th data-field="bilgi" data-sortable="true">Button</th>
</tr>
</thead>
<tbody>
<tr><td>Asus</td>
<td>Tablet</td>
<td>TP200SA Transformer Book Flip</td>
<td>KARTAL</td><td>Level 1, Anakart Değişimi, DOA, DAP</td>
<td>Tuba BAKIR ILGAZ</td>
<td>Emre DIĞIŞ</td>
<td>Sample Link</td>
<td><button type="button" class="btn btn-primary">Primary</button>/td>
</tr>
</tbody>
</table>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js'></script>
<script src='http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js'></script>
<script src="js/index.js"></script>
</body>
</html>
USE THIS:
<tbody>
<tr data-index="0">
<td style="">Asus</td>
<td style="">Tablet</td>
<td style="">TP200SA Transformer Book Flip</td>
<td style="">KARTAL</td>
<td style="">Level 1, Anakart Değişimi, DOA, DAP</td>
<td style="">Tuba BAKIR ILGAZ</td>
<td style="">Emre DIĞIŞ</td>
<td style="">Sample Link</td>
<td style=""><button type="button" class="btn btn-primary">Primary</button></td>
</tr>
</tbody>

Select single table row from bootstrap table

I need to be able to select a row in a table by clicking it (and using css class for highlight styling)
$("#infoTable tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#infoTable tr").removeClass("highlight");
if (!selected)
$(this).addClass("highlight");
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table id="infoTable" class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">Name</th>
<th class="col-xs-3">Age</th>
<th class="col-xs-6">Occupation</th>
<th class="col-xs-6">Salary</th>
</tr>
</thead>
<tbody>
<tr class="clickableRow">
<td class="col-xs-3">John</td>
<td class="col-xs-3">43</td>
<td class="col-xs-6">School Teacher</td>
<td class="col-xs-6">$43,000</td>
</tr>
<tr class="clickableRow">
<td class="col-xs-3">Tim</td>
<td class="col-xs-3">52</td>
<td class="col-xs-6">Plumber</td>
<td class="col-xs-6">$55,000</td>
</tr>
</tbody>
</table>
</div>
my files:
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="main.js"></script>
but it does nothing. Any help is appreciated, Thank You!
You can do this like:
$('#infoTable').on('click', 'tbody tr', function(event) {
$(this).addClass('highlight').siblings().removeClass('highlight');
});
.table tbody tr.highlight td {
background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<table id="infoTable" class="table table-fixed table-condensed">
<thead>
<tr>
<th class="col-xs-3">Name</th>
<th class="col-xs-3">Age</th>
<th class="col-xs-6">Occupation</th>
<th class="col-xs-6">Salary</th>
</tr>
</thead>
<tbody>
<tr class="clickableRow">
<td class="col-xs-3">John</td>
<td class="col-xs-3">43</td>
<td class="col-xs-6">School Teacher</td>
<td class="col-xs-6">$43,000</td>
</tr>
<tr class="clickableRow">
<td class="col-xs-3">Tim</td>
<td class="col-xs-3">52</td>
<td class="col-xs-6">Plumber</td>
<td class="col-xs-6">$55,000</td>
</tr>
<tr class="clickableRow">
<td class="col-xs-3">John</td>
<td class="col-xs-3">43</td>
<td class="col-xs-6">School Teacher</td>
<td class="col-xs-6">$43,000</td>
</tr>
</tbody>
</table>
</div>
$("#infoTable tr").click(function() {
$(".clickableRow").on("click",function(){
$(".highlight").removeClass("highlight");
$(this).addClass("highlight");
});
});
.highlight{
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container">
<table id="infoTable" class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">Name</th>
<th class="col-xs-3">Age</th>
<th class="col-xs-6">Occupation</th>
<th class="col-xs-6">Salary</th>
</tr>
</thead>
<tbody>
<tr class="clickableRow">
<td class="col-xs-3">John</td>
<td class="col-xs-3">43</td>
<td class="col-xs-6">School Teacher</td>
<td class="col-xs-6">$43,000</td>
</tr>
<tr class="clickableRow">
<td class="col-xs-3">Tim</td>
<td class="col-xs-3">52</td>
<td class="col-xs-6">Plumber</td>
<td class="col-xs-6">$55,000</td>
</tr>
</tbody>
</table>
</div>
$( document ).ready(function() {
$("#infoTable tbody tr").click(function() {
var selected = $(this).hasClass("highlight");
$("#infoTable tr").removeClass("highlight");
if (!selected)
$(this).addClass("highlight");
});
});
#infoTable .highlight td{
background-color: gold;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<table id="infoTable" class="table table-fixed">
<thead>
<tr>
<th class="col-xs-3">Name</th>
<th class="col-xs-3">Age</th>
<th class="col-xs-6">Occupation</th>
<th class="col-xs-6">Salary</th>
</tr>
</thead>
<tbody>
<tr class="clickableRow">
<td class="col-xs-3">John</td>
<td class="col-xs-3">43</td>
<td class="col-xs-6">School Teacher</td>
<td class="col-xs-6">$43,000</td>
</tr>
<tr class="clickableRow">
<td class="col-xs-3">Tim</td>
<td class="col-xs-3">52</td>
<td class="col-xs-6">Plumber</td>
<td class="col-xs-6">$55,000</td>
</tr>
</tbody>
</table>
</div>

HTML: Totaling columns

I am taking in the data in from an sql statement and throwing it into a table.
I am trying to create a subtotal for the table that I can then send to a checkout page using a java servlet. Problem is that I am having issues getting the subtotal working after going through several examples on stackoverflow.
Thank you for your time.
<html>
<head>
<link rel="stylesheet" href="resources/css/main.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="resources/scripts/jquery-1.8.2.min.js"></script>
<title>Home Page</title>
</head>
<body>
<br>
<br>
<script>
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
</script>
<sql:setDataSource var="snapshot" driver="com.mysql.jdbc.Driver"
url="jdbc:mysql://localhost:3306/sakila"
user="root" password="nbuser"/>
<sql:query dataSource="${snapshot}" var="result">
Select F.title, (F.rental_rate * F.rental_duration) as 'Price'
from cart as C
join cartofitems as CI
on CI.cart_id = C.cart_id
join film as F
on CI.film_id = F.film_id
</sql:query>
<div align="center">
<table width="850" style="BACKGROUND-COLOR: #FFFFFF;" border="1">
<tr>
<td align="center">
<img src="images/cart.png">
</td>
</tr>
<tr>
<td align="center" colspan="3">
<table width="650">
<tr>
<td>
<div align="justify" style="color:#3e160e;">
This is a custom HTML header. This header may contain any HTML code, text,
graphics, active content such as dropdown menus, java, javascript, or other
content that you would like to display at the top of your cart pages. You create
custom HTML header yourself and specify its location in the CustomCart Administrator.
Also note the custom wallpaper (brown striped background), this is uploaded via the
administrator. You may change the wallpaper any time you wish to change the look of
your cart.
</div>
</td>
</tr>
</table>
</td>
<tr>
<tr>
</tr>
</table>
</div>
<div align="center">
<form action="checkout.jsp" method="post" border="">
<table width="850" border="1" class="cart">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<c:forEach items="${result.rows}" var="cart">
<tr>
<td>Delete</td>
<td><c:out value="${cart.title}" /></td>
<td class="price"><c:out value="${cart.Price}" /></td>
</tr>
</c:forEach>
<tr class="totalColumn">
<td colspan="2" align="right" ><b>Subtotal: </b></td>
<td align="right" ><b><span id="subtotal"></span></b></td>
<script language="javascript" type="text/javascript">
var tds = document.getElementById('cart').getElementsByTagName('td');
var sum = 0;
for (var i = 0; i < tds.length; i++) {
if (tds[i].className == 'price') {
sum += isNaN(tds[i].innerHTML) ? 0 : parseInt(tds[i].innerHTML);
}
}
document.getElementById('price').innerHTML += '<tr><td>' + sum + '</td><td>total</td></tr>';
</script>
</tr>
</tbody>
</table>
<table width="850" border="1">
<tr>
<div style="width:650px;">
<button type="submit" name="your_name" value="totalCost" class="loginbtn">Checkout Cart</button>
</form>
<p><form action="faces/index.xhtml" method="post">
<button type="submit" name="your_name" value="your_value" class="adminloginbtn">Back To Search</button>
</form>
</div>
</tr>
</tbody>
</table>
</body>
</html>

Categories