Bootstrap class="table" doesnt work [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have a simple table and am using knockout to populate the data.
I am trying to toggle my table body using two templates. I believe that's what the boostrap does not like. Please take a look at my code and give me suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type='text/javascript' src='Scripts/knockout-3.1.0.js'></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" data-bind="visible: folks().length > 0" >
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th></th>
</tr>
</thead>
<tbody data-bind="template: { name: templateToUse, foreach: folks}"></tbody>
</table>
<button data-bind="click: $root.addItem">New Item</button>
</div>
</body>
</html>
<script type='text/javascript' src='Scripts/myscript.js'></script>
<script id="itemTmpl" type="text/html">
<tbody>
<tr>
<td>
<span data-bind="text: name"></span>
</td>
<td>
<span data-bind="text: age"></span>
</td>
<td class="buttons">
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</script>
<script id="editTmpl" type="text/html">
<tbody>
<tr>
<td>
<input type="text" data-bind="value: name" ></input>
</td>
<td>
<input data-bind="value: age"></input>
</td>
<td class="buttons">
<button>Done</button>
<button>Cancel</button>
</td>
</tr>
</tbody>
</script>

You're including the tbody tag unnecessarily in your templates. The template content gets inserted into the parent tag, which in your case is already a tbody element. Bootstrap is failing because the rendered table looks like
<table>
...
<tbody>
<tbody>
...

Related

Bootstrap toggle button with <template>

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

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>

JavaScript/jQuery add innerHtml in other html page

I have two html pages, in the index.html file, I have an button and an input textbox. I want the value in the textbox to show on the next page. how should i go about doing this, should i have two javascript file? or what?
Javascript:
$('#searchBtn').click(function(){
var search = document.getElementById('searchField');
document.getElementById("demo").innerHTML = search.value;
});
Index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" type="text/css" />
<title>The Lantzyfi Bay</title>
</head>
<body>
<div class="head">
<img class="logo" src="pics/logo.png">
</div>
<div class="body">
<form>
<div class="searchField">
<input id="searchField" type="text" placeholder="Lantzify Search" name="search" size="32"/>
<a id="searchBtn" class="search" href="results.html">Search</a>
</div>
<div class="checkboxes">
<input type="checkbox" name="music">Music</input>
<input type="checkbox" name="pics">Pics</input>
<input type="checkbox" name="videos">Videos</input>
<input type="checkbox" name="other">Other</input>
</div>
</form>
<div class="links">
Userpolicy
About
Lorem Ipsum
</div>
</div>
<script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</body>
</html>
results.html:
<!DOCHTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/index.css" type="text/css" />
<link rel="stylesheet" href="css/results.css" type="text/css" />
<title>The Lantzyfi Bay</title>
</head>
<body>
<div class="head">
<form id="q">
<img class="logo" src="pics/logo.png">
<input id="searchField" type="text" placeholder="User serch" name="search" size="30"/>
<a id="searchBtn" class="search" href="results.html">Search</a>
</form>
</div>
<div class="content">
<h2>Serach: <!--Users Search word--></h2><h2 id="demo"></h2>
<div class="mainContent">
<table>
<thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>DB</th>
<th>RP</th>
</tr>
</thead>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript" src="java/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="java/search.js"></script>
</body>
</html>
You could add it to the URL and than read it on the other side.
Index.html would something like this:
$("#searchBtn").on('click', function () {
var url = "results.html?q=" + $("#searchField").val();
window.location = url
}
Result.html would have something like:
$(document).read(function () {
$("...").html(getParameterName('q'));
}
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Credit for getParameterName function
NOTE:
You do have to note that this is not the proper way of doing things as you will have a lot of problems like url encoding, strings that are too long. This is however a good way to start. All the best.
Also I was using some jquery in the code. If this is a problem let me know and I can change it to do without
Only with a simple JS and HTML can not. By means of storing value and Timer (1) or SignalR (2) it could do this.
1, store value somewear ( database or cookies if just for actual user) and at some time refrest Result Page, by JS or outher, and read values.
2, SignalR Async refresh content of page, but you nead ASP.NET (MCV).
http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr#next
It appears two pages are served from the same origin.
localStorage is an option:
The Mozilla demo containing an example
If the first page has a reference to the window of the 2nd page, e.g. 2nd page is opened by calling window.open. window.postMessage is also an option, it also works for cross origin.
If the web server is also under your control, you can of course use the server as a transmitter by sending data back to server through ajax then let the server notify the 2nd page through Server Sent Event or Web Socket and etc.

HTML doesn't load after cache clear/hard reset but will successive times

So I'm working on a very simple web app. When I do a cache clear and hard reset, or I open the page in a different browser, it won't display everything. But then every refresh after that the display is fine. Is this something wrong with my code? Here's a copy of my HTML.
<!DOCTYPE html>
<html>
<head>
<title>Small Store</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body ng-app="myApp" ng-controller="store">
<div id="wrapper">
<div class="box" id="Store">
<table>
<thead>
<tr>
<td colspan="3" style="text-align:center">Store</td>
</tr>
</thead>
<tbody>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Price</em></td>
</tr>
<tr ng-repeat="item in store">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Price|currency}}</td>
<td>
<button ng-disabled="store.money<item.Price" ng-click="buy(item)">Buy</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Stock" ng-hide="stock.length===0">
<table>
<tbody>
<tr>
<td colspan="3" style="text-align:center">Stock</td>
</tr>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Quantity</em></td>
</tr>
<tr ng-repeat="item in stock" ng-hide="item.Quantity<1">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Quantity}}</td>
<td>
<button ng-click="sell(item)">Sell</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Cart" ng-hide="cart.length===0">
<!-- TO IMPLEMENT -->
</div>
</div>
<div id="Editor">
<!-- TO IMPLEMENT -->
</div>
<div id="money">
Remaining money: {{money|currency}}
<p>
<input type="checkbox" name="Edit" value="true"> Edit store
<br>
</p>
</div>
<script src="app.js"></script>
</body>
</html>
And here it is in codepen with the css and javascript. The error persists in codepen so I think the error is in my code but I'm not exactly sure..

Bootstrap responsive table doesn't work with Ember.js

I'm new to Bootstrap and Ember. I'm trying to generate a responsive table using Ember.js.
The problem is that when my application is running if I change the browswer's size to an small one, I don't see the horizontal scroll at the table as expected.
However if I save the web page and open it from disk, then it works ok. Very odd :)
I'm pasting my page code here in case it helps. It's a simple example I'm using to learn.
Thanks in advance.
Cheers!!
Gonzalo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<!-- Bootstrap -->
<link href="libs/bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/x-handlebars">
<h2>Registro de llamadas</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" id="index">
<div class="container">
<div class="table-responsive">
<table class="table">
<th>
Número
</th>
<th>
Nombre
</th>
<th>
Asunto
</th>
{{#each item in model}}
<tr>
<td>
{{#link-to 'editarLlamada' item}}Editar{{/link-to}}
</td>
<td>
{{item.number}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.subject}}
</td>
</tr>
{{/each}}
</table>
</div>
</div>
<button {{action 'nuevallamada'}}>Nueva llamada</button>
</script>
<script type="text/x-handlebars" id="nuevallamada">
<div class='container'>
<p>Acá ingreso la nueva llamada</p>
{{input type="text" value=number}}
{{input type="text" value=name}}
{{input type="text" value=subject}}
<button {{action 'guardarllamada'}}>Guardar</button>
</div>
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="libs/bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<!-- <script src="js/libs/jquery-1.10.2.js"></script> -->
<script src="js/libs/ember-template-compiler-1.10.0.js"></script>
<script src="js/libs/ember-1.10.0.debug.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/nuevallamada-controller.js"></script>
<script src="js/routes/nuevallamada-route.js"></script>
<script src="js/routes/editarllamada-route.js"></script>
<script src="js/routes/index-route.js"></script>
</body>
</html>
According to bootstrap, the table structure should be like below
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
</thead>
</tbody>
<tr>
<td>value 1</td>
<td>value 2</td>
</tr>
</tbody>
</table>
</div>
For more reference follow Bootstrap Responsive Table

Categories