How to get page source using selenium RC

How to get page source using selenium RC - javascript

I want to Create A Simple Web Crawler in Java.
I am trying to use this code
WebDriver driver = new HtmlUnitDriver();
driver.get("https://codereview.qt-project.org/#change,70");
String pageSource=driver.getPageSource();
System.out.println(pageSource);
So I got this source code >>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gerrit Code Review</title><meta content="locale=en_US" name="gwt:property">
<script language="javascript" type="text/javascript">var gerrit_hostpagedata={"config":
{"useContributorAgreements":true,"useContactInfo":false,"allowRegisterNewEmail":false,
But the content is produced with JavaScript, I want to obtain the HTML snapshot.

Create a Javascript enabled driver..
WebDriver driver = new HtmlUnitDriver(true);
Results:
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>
codereview.qt-project Code Review
</title>
<meta content="locale=en_US" name="gwt:property"/>
<script language="javascript" type="text/javascript">
//<![CDATA[
var gerrit_hostpagedata={"config":{"useContributorAgreements":true,"useContactInfo":false,"allowRegisterNewEmail":false,"authType":"HTTP","downloadSchemes":["DEFAULT_DOWNLOADS"],"sshdAddress":"*:29418","wildProject":{"name":"All-Projects"},"approvalTypes":{"approvalTypes":[{"category":{"categoryId":{"id":"CRVW"},"name":"Code Review","abbreviatedName":"R","position":1,"functionName":"MaxWithBlock","copyMinScore":true,"labelName":"Code-Review"},"values":[{"key":{"categoryId":{"id":"CRVW"},"value":-2},"name":"This shall not be merged"},{"key":{"categoryId":{"id":"CRVW"},"value":-1},"name":"I would prefer this is not merged as is"},{"key":{"categoryId":{"id":"CRVW"},"value":0},"name":"No score"},{"key":{"categoryId":{"id":"CRVW"},"value":1},"name":"Looks good to me, but someone else must approve"},{"key":{"categoryId":{"id":"CRVW"},"value":2},"name":"Looks good to me, approved"}],"maxNegative":-2,"maxPositive":2},{"category":{"categoryId":{"id":"SRVW"},"name":"Sanity Review","abbreviatedName":"S","position":2,"functionName":"MaxWithBlock","copyMinScore":false,"labelName":"Sanity-Review"},"values":[{"key":{"categoryId":{"id":"SRVW"},"value":-2},"name":"Major sanity problems found"},{"key":{"categoryId":{"id":"SRVW"},"value":-1},"name":"Sanity problems found"},{"key":{"categoryId":{"id":"SRVW"},"value":0},"name":"No sanity review "},{"key":{"categoryId":{"id":"SRVW"},"value":1},"name":"Sanity review passed"}],"maxNegative":-2,"maxPositive":1}]},"editableAccountFields":["REGISTER_NEW_EMAIL","USER_NAME","FULL_NAME"],"commentLinks":[{"find":"[Tt]ask-number:\\s+([\\w\\-]+)","replace":"\u003ca href\u003d\"http://bugreports.qt-project.org/browse/$1\"\u003e$\u0026\u003c/a\u003e"}],"documentationAvailable":false}};gerrit_hostpagedata.theme={"backgroundColor":"#FCFEEF","topMenuColor":"#44A51C","textColor":"#000000","trimColor":"#B6DCA6","selectionColor":"#FFFFCC"};
//]]>
</script>
<style type="text/css">
#gerrit_topmenu {
color: #ffffff;
}
#gerrit_topmenu .gwt-Label {
color: #ffffff;
}
#gerrit_topmenu .gwt-TabBarItem-selected .gwt-Label {
color: #000000;
}
#gerrit_topmenu a, #gerrit_topmenu a:visited, #gerrit_topmenu a:hover {
color: #ffffff;
}
#qt-footer-links {
background-color: #44A51C;
}
#qt-footer-links ul {
width: 100%;
margin: 0;
text-align: center;
padding: .1em 0 .3em 0;
}
#qt-footer-links li {
display: inline;
padding: .1em 1em;
}
#qt-footer-links a, #qt-footer-links a:visited, #qt-footer-links a:hover {
font-family: Arial;
color: white;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
</style>
<link href="favicon.ico" rel="icon" type="image/gif"/>
<link href="gerrit/gwt/chrome/30B802F72484AED7E67C91FE77CD50BD.cache.css" rel="stylesheet"/>
<link href="undefined" rel="stylesheet"/>
</head>
<body>
<div id="gerrit_topmenu" class="GCLMTUVDNF">
<table class="GCLMTUVDIK">
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="GCLMTUVDMK">
<table cellspacing="0" cellpadding="0" class="GCLMTUVDJK">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table cellspacing="0" cellpadding="0" class="gwt-TabBar" role="tablist" style="width: 100%;">
<tbody>
<tr>
<td align="left" style="vertical-align: bottom;" height="100%" class="gwt-TabBarFirst-wrapper">
<div class="gwt-TabBarFirst" style="white-space: normal; height: 100%;">
 
</div>
</td>
<td align="left" style="vertical-align: bottom;" class="gwt-TabBarItem-wrapper gwt-TabBarItem-wrapper-selected">
<div tabindex="0" class="gwt-TabBarItem gwt-TabBarItem-selected" role="tab">
<div class="gwt-Label" style="white-space: nowrap;">
All
</div>
</div>
</td>
<td align="left" style="vertical-align: bottom;" width="100%" class="gwt-TabBarRest-wrapper">
<div class="gwt-TabBarRest" style="white-space: normal; height: 100%;">
 
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;" height="100%">
<div class="gwt-TabPanelBottom" role="tabpanel">
<div style="width: 100%; height: 100%; padding: 0px; margin: 0px;">
<div class="GCLMTUVDMG" role="menubar" style="width: 100%; height: 100%;">
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:open,n,z" role="menuitem">
Open
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:staged,n,z" role="menuitem">
Staged
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:integrating,n,z" role="menuitem">
Integrating
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:merged,n,z" role="menuitem">
Merged
</a>
<a class="GCLMTUVDPG GCLMTUVDNG" href="#q,status:deferred,n,z" role="menuitem">
Deferred
</a>
<a class="GCLMTUVDPG" href="#q,status:abandoned,n,z" role="menuitem">
Abandoned
</a>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td class="GCLMTUVDLK">
<div>
</div>
</td>
<td class="GCLMTUVDMK">
<div class="GCLMTUVDKK">
<div class="GCLMTUVDMG" role="menubar">
<a class="GCLMTUVDPG" href="javascript:;" role="menuitem">
Sign In
</a>
</div>
<div class="GCLMTUVDJJ">
<input type="text" class="gwt-TextBox GCLMTUVDHG" value="Change #, SHA-1, tr:id, owner:email or reviewer:email"/>
<button type="button" class="gwt-Button">
Search
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="GCLMTUVDGJ">
<span class="GCLMTUVDEJ GCLMTUVDFJ" style="">
Loading ...
</span>
</div>
</div>
<div id="gerrit_header">
<div>
<img src="static/logo_open_gov.png" style="margin: 18px 0 0 10px;"/>
<img src="static/logo_qt.png" style="float: right; margin: 18px 28px 0 0;"/>
</div>
</div>
<div id="gerrit_body" class="GCLMTUVDMF">
<div>
<div style="display: none;">
<div class="GCLMTUVDHJ GCLMTUVDLB">
<div class="GCLMTUVDIJ">
<span class="gwt-InlineLabel">
</span>
</div>
<div>
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<table class="GCLMTUVDFG GCLMTUVDKB">
<colgroup>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="header GCLMTUVDNK">
Change-Id:
</td>
<td class="GCLMTUVDNK GCLMTUVDBC">
 
</td>
</tr>
<tr>
<td class="header">
Owner
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Project
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Branch
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Topic
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Uploaded
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header">
Updated
</td>
<td>
 
</td>
</tr>
<tr>
<td class="header GCLMTUVDDB">
Status
</td>
<td>
 
</td>
</tr>
<tr>
<td class="GCLMTUVDHI">
 
</td>
<td class="GCLMTUVDHI">
 
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" style="vertical-align: top;">
<div class="GCLMTUVDMB">
</div>
</td>
</tr>
</tbody>
</table>
<div class="GCLMTUVDO">
<table class="GCLMTUVDGG">
<colgroup>
<col/>
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td class="header">
Reviewer
</td>
<td class="header">
 
</td>
<td class="header">
Code Review
</td>
<td class="header">
Sanity Review
</td>
<td class="header GCLMTUVDDJ">
 
</td>
</tr>
</tbody>
</table>
<ul class="GCLMTUVDCH">
</ul>
<div class="GCLMTUVDK" style="display: none;">
<div>
<input type="text" class="gwt-SuggestBox GCLMTUVDHG" value="Name or Email"/>
<button type="button" class="gwt-Button">
Add Reviewer
</button>
</div>
</div>
</div>
<table cellspacing="0" cellpadding="0" class="gwt-DisclosurePanel gwt-DisclosurePanel-closed">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<a href="javascript:void(0);" style="display: block;" class="header">
<table>
<tbody>
<tr>
<td align="center" style="width: 16px;">
<img onload="this.__gwtLastUnhandledEvent="load";" src="https://codereview.qt-project.org/gerrit/clear.cache.gif" style="width: 16px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) no-repeat 0px 0px" border="0" class="gwt-Image"/>
</td>
<td>
Included in
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="padding: 0px; overflow: hidden; display: none;">
<table class="content">
<colgroup>
<col/>
</colgroup>
<tbody>
<tr>
<td>
 
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" cellpadding="0" class="gwt-DisclosurePanel gwt-DisclosurePanel-closed">
<tbody>
<tr>
<td align="left" style="vertical-align: top;">
<a href="javascript:void(0);" style="display: block;" class="header">
<table>
<tbody>
<tr>
<td align="center" style="width: 16px;">
<img onload="this.__gwtLastUnhandledEvent="load";" src="https://codereview.qt-project.org/gerrit/clear.cache.gif" style="width: 16px; height: 16px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) no-repeat 0px 0px" border="0" class="gwt-Image"/>
</td>
<td>
Dependencies
</td>
</tr>
</tbody>
</table>
</a>
</td>
</tr>
<tr>
<td align="left" style="vertical-align: top;">
<div style="padding: 0px; overflow: hidden; display: none;">
<table class="GCLMTUVDOB content" style="width: auto;">
<colgroup>
<col/>
</colgroup>
<tbody>
<tr>
<td class="GCLMTUVDDG"/>
<td class="GCLMTUVDDG"/>
<td class="GCLMTUVDFB GCLMTUVDKD">
ID
</td>
<td class="GCLMTUVDKD">
Subject
</td>
<td class="GCLMTUVDKD">
Owner
</td>
<td class="GCLMTUVDKD">
Project
</td>
<td class="GCLMTUVDKD">
Branch
</td>
<td class="GCLMTUVDKD">
Updated
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDKJ">
Depends On
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDOE">
(None)
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDKJ">
Needed By
</td>
</tr>
<tr>
<td colspan="8" class="GCLMTUVDOE">
(None)
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table class="GCLMTUVDLJ">
<colgroup>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td>
Old Version History:
</td>
<td>
<select class="gwt-ListBox">
<option value="Base" selected="selected">
Base
</option>
</select>
</td>
</tr>
</tbody>
</table>
<div>
</div>
<div class="GCLMTUVDJB">
</div>
</div>
</div>
</div>
</div>
</div>
<div style="clear: both; margin-top: 15px; padding-top: 2px; margin-bottom: 15px;">
<div id="gerrit_footer">
<div>
<div id="qt-footer-links">
<ul>
<li>
<a href="http://qt.digia.com/">
qt.digia.com
</a>
</li>
<li>
<a href="http://qt-project.org/doc/">
Qt Documentation
</a>
</li>
<li>
<a href="http://qt-project.org/">
Qt-Project
</a>
</li>
<li>
<a href="http://planet.qt-project.org/">
Planet Qt
</a>
</li>
<li>
<a href="http://qt.gitorious.org/">
Qt Repositories - Gitorious
</a>
</li>
<li>
<a href="http://bugreports.qt-project.org/">
Qt Bug Tracker - JIRA
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="gerrit_btmmenu" style="clear: both;">
<div class="GCLMTUVDIG">
Press '?' to view keyboard shortcuts
</div>
<div class="GCLMTUVDAL">
Powered by
<a href="http://code.google.com/p/gerrit/" target="_blank">
Gerrit Code Review
</a>
(V2.2.1-NQT-012) |
<a href="http://code.google.com/p/gerrit/issues/list" target="_blank">
Report Bug
</a>
</div>
</div>
</div>
<iframe id="__gwt_historyFrame" src="javascript:''" style="position:absolute;width:0;height:0;border:0" tabindex="-1">
</iframe>
<script language="javascript" type="text/javascript">
//<![CDATA[
<!--
function gerrit(){var s,l,t,w=window,d=document,n='gerrit',f=d.createElement('iframe');function m(){if(s&&l){var b,i=d.createElement('img');i.src=n+'/clear.cache.gif';b=i.src;b=b.substring(0,b.lastIndexOf('/')+1);gerrit=null;f.contentWindow.gwtOnLoad(undefined,n,b);}}gerrit.onScriptLoad=function(){s=1;m();};gerrit.r=function(){l=1;m();};f.src="javascript:''";f.id=n;f.style.cssText='position:absolute;width:0;height:0;border:none';f.tabIndex=-1;d.body.appendChild(f);f.contentWindow.location.replace(n+'/7209E38C5F54FA2918411884E5DCDFEC.cache.html');d.write('<script defer="defer">gerrit.r()</'+'script>');}gerrit();
//-->
//]]>
</script>
<iframe src="javascript:''" id="gerrit" style="position:absolute;width:0;height:0;border:none" tabindex="-1">
</iframe>
<script defer="defer">
//<![CDATA[
gerrit.r()
//]]>
</script>
</body>
</html>

Related

Creating a horizontal scrolling table in shopify

So, I am trying to create a website using Shopify. I tried to edit the code and add three tabs in the product page. 1 Tab will be the description the other is Size chart and the other is reviews. I was able to put the description and reviews in the tab but when I put the size chart and look the website from the phone the size chart doesnt fit. So I wanted to create e horizonal scroll for the table.
Below is the html, CSS and Java code that I put in the product-template.liquid, theme.css, theme.java respectively. Below you can see a picture of the tabs:
Website picture
I used this code to create the review tabs.
<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>
<style>
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
</style>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content">{{product.metafields.meta.sizechart}}</div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>
I tried a lot of things to make the horizontal scroll bar. But it still now working. If anyone has any experience with shopify can you please help me.
The table in html:
<div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div>

Add This CSS & Check Updated HTML
.table-outer{
overflow: auto;
}
.table-outer table{
min-width:600px;
}
.tab-content
{
display:none;
}
.tab-content.active
{
display:block;
}
ul.tabs
{
list-style-type: none;
padding:0;
margin-left:0;
}
li.tab
{
display:inline-block;
padding:10px 15px;
cursor: pointer;
}
li.tab.active
{
color:grey;
border-bottom:1px solid red;
}
.table-outer{
overflow: auto;
padding:0 20px;
}
.table-outer table{min-width:600px;}
<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>
</head>
<body>
<ul class="tabs">
<li class="tab" data-content-id="Description">tab 1</li>
<li class="tab" data-content-id="Size chart">tab 2</li>
<li class="tab" data-content-id="Reviews">tab 3</li>
</ul>
<div id="tab-content-1" class="tab-content">content 1</div>
<div id="tab-content-2" class="tab-content" style="display:block;"><div class="table-outer"><div style='overflow-x:auto'>
<table class="t2">
<thead>
<tr>
<td style="width: 54px;" rowspan="2">Size</td>
<td style="width: 112px;" colspan="2">Length</td>
<td style="width: 96px;" colspan="2">Waist</td>
<td style="width: 86.6px;" colspan="2">Hip</td>
</tr>
<tr>
<td style="width: 57px;">CM</td>
<td style="width: 55px;">INCH</td>
<td style="width: 39px;">CM</td>
<td style="width: 57px;">INCH</td>
<td style="width: 40px;">CM</td>
<td style="width: 46.6px;">INCH</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 54px;">S</td>
<td style="width: 57px;">100</td>
<td style="width: 55px;">39.37 </td>
<td style="width: 39px;">61</td>
<td style="width: 57px;">24.02 </td>
<td style="width: 40px;">95</td>
<td style="width: 46.6px;">37.40 </td>
</tr>
<tr>
<td style="width: 54px;">M</td>
<td style="width: 57px;">101.5</td>
<td style="width: 55px;">39.96 </td>
<td style="width: 39px;">65</td>
<td style="width: 57px;">25.59 </td>
<td style="width: 40px;">99</td>
<td style="width: 46.6px;">38.98 </td>
</tr>
<tr>
<td style="width: 54px;">L</td>
<td style="width: 57px;">103</td>
<td style="width: 55px;">40.55 </td>
<td style="width: 39px;">69</td>
<td style="width: 57px;">27.17 </td>
<td style="width: 40px;">103</td>
<td style="width: 46.6px;">40.55 </td>
</tr>
<tr>
<td style="width: 54px;">XL</td>
<td style="width: 57px;">104.5</td>
<td style="width: 55px;">41.14 </td>
<td style="width: 39px;">73</td>
<td style="width: 57px;">28.74 </td>
<td style="width: 40px;">107</td>
<td style="width: 46.6px;">42.13</td>
</tr>
</tbody>
</table>
</div></div></div>
<div id="tab-content-3" class="tab-content">content 3</div>
<script>
tabs= document.querySelectorAll('.tab');
tabContents= document.querySelectorAll('.tab-content');
tabs.forEach(function(tab){
tab.addEventListener('click',function(){
contentId = this.dataset.contentId;
content = document.getElementById(contentId);
tabContents.forEach(function(content){
content.classList.remove('active');
});
tabs.forEach(function(tab){
tab.classList.remove('active');
});
this.classList.add('active');
content.classList.add('active');
});
});
</script>
</body>
</html>

How can I call function in HTML file for checkbox?

As a default, the checkbox is already checked but the tables are not hidden. As a default, the first two table shall be demonstrated. When you click on a few times, you can see hidden tables but they should be hidden as default checked. The problem is when I copy paste in https://codepen.io/ which is working because js directly calling the function. When you copy paste this code inside a html file, it is not working. How can I call function to get the result?
<html>
<head>
<script language="JavaScript">
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
show('box');
</script>
</head>
<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
</table>
</html>

I broke your js out into a separate file for ease of reading. Then i made the following tweaks:
add an id to your checkbox. this eliminates the need to check your element in a loop when there is only 1 of them and since its a checkbox there should always only be 1 with that name
pull the tables in by class name as you were and then convert the node collection to an array. then leverage the array builtin forEach loop.
lastly use a ternary if statement to set your table display for some syntactic sugar.
function showMe(cls) {
const checkbox = document.getElementById("c1"),
tables = Array.prototype.slice.call(document.getElementsByClassName(cls));
tables.forEach(function (t) {
t.style.display = checkbox.checked ? 'table' : 'none';
});
}
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" id="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3"><b>Event</b></td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3"><b>Status</b></td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; "><span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>

Add the JS at the end of file, this is doesn't work, because you return the JS before HTML. You need render HTML before JS, and change show('box'); to showME('box');
<html>
<head></head>
<br>
<table class="header" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="checkbox" name="c1" checked="true" onclick="showMe('box')">Show Result
</td>
</tr>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tr>
<td class="uniqueborder" width="90%" align="center" bgcolor="#F3F3F3">
<b>Event</b>
</td>
<td class="uniqueborder" width="10%" align="center" bgcolor="#F3F3F3">
<b>Status</b>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-right:1px solid #CBCBCB; padding-left:2px; padding-right:2px" align="left">
<p style="margin: 0pt; ">Test </p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="uniqueborder" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
<table class="box" width="100%" bordercolor="#CBCBCB" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Test input:</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
<tr>
<td class="uniqueborder" align="left">
<p style="margin: 0pt; ">
<span class="bluebold">1. Expected</span></p>
</td>
<td class="uniqueborder" align="center" width="10%">
<font color="gray">N/A</font>
</td>
</tr>
</tbody>
</table>
</table>
<script language="JavaScript">
function showMe(cls) {
var chboxs = document.getElementsByName("c1");
var vis = 0;
for (var i = 0; i < chboxs.length; i++) {
if (chboxs[i].checked) {
vis = 1;
break;
}
}
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
if (vis === 1) {
e.style.display = 'none';
} else {
e.style.display = 'table';
}
}
}
showMe('box');
</script>
</html>

First you try to call the function show('box'); which does not exist. You should rename the call to showMe('box');
The second problem is the order of execution. Basically everything that is loaded is executed immediately. In your case, the first thing that is defined is the function showMe(). After that it is called immediately (see above). The problem that occurs now is that the HTML element that the function is supposed to access has not yet been rendered.
So the initial call of the function showMe('box') should be done after the HTML elements are rendered. You can do this by making the call at the end of the page in separate script tags or in the body tag in the onload method.
<body onload="showResults('box')">
...
</body>
Basically, you should use meaningful variable and function names (for example, "resultVisible" instead of "vis" or "showResults" instead of "showMe") and use them with the correct type, e.g. Boolean (true / false).
I would add an ID to the checkbox instead of a name. Since you only have one of them, you can save yourself a lot of scripting to determine whether the checkbox is set or not. You can also shorten the part where you control the visibility.
function showResults(cls) {
var checked = document.getElementById('c1').checked;
var elements = document.getElementsByClassName(cls);
for (let e of elements) {
e.style.display = (checked) ? 'table' : 'none';
}
}

Keep style of <tr> while dragging

I have a table where I use JqueryUI and when I make a drag of a row the style of this disappear, that's normal cause when you make a drag of the row, this pass to be outside of table.
The element created while dragging is a <tr>and have the class .placeholder-style I want to keep the padding of the fields in the row created while drag.
How can I do this?
$("#tabs").tabs();
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if (cantidad_actual > cantidad_real) {
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for (var i = 0; i <= cantidad_a_ocultar; i++) {
$(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table');
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function(event, ui) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url: '/admin/projects/updateOrder',
data: {
ids: newOrder
}
})
.done(function(msg) {
location.reload();
});
}
}).disableSelection();
img {
width: 100px;
}
.hidden-td {
display: none !important;
}
.table {
background-color: green;
border: 0;
}
.trdrag {
background-color: yellow;
}
.thcenter {
background-color: grey !important;
}
.ui-sortable-helper {
left: 0px!important;
}
.idrow {
width: 5%;
}
.tdvisible {
width: 5%;
}
.tdslug {
width: 10%;
}
.tdimg {
width: 15%;
}
.tdorder {
width: 20%;
}
.tdacciones {
width: 40%;
}
#media (max-width: 500px) {
.ocultarid {
display: none;
}
.tdslug {
width: 15%;
}
}
#media (max-width: 350px) {
.ocultarvisible {
display: none;
}
.accionesvisible {
display: none;
}
.ordenvisible {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter ocultarid">ID</th>
<th class="thcenter ocultarvisible">Visible</th>
<th class="thcenter slug">Nombre</th>
<th class="thcenter header">Header</th>
<th class="thcenter home">Home</th>
<th class="thcenter ordenvisible">Orden</th>
<th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">2</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">3</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">4</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">5</p>
</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 2</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>
https://jsfiddle.net/3g3bt80e/9/

Try defineing the td / tr tags the css to a certain height & width this may resolve ur problem.

sorting doesn't work, datatable in bootstrap

I've got a problem with sorting my table. When I click on my table header, my table data don't sort. Even with using the "show 10/25/50 entries" and also the search bar.
I tried very long but seems not working. Here is my code. I don't is sit the plugin problem or my coding problem. I've tried many ways from the internet but all dont work. I'm running xampp locally with internet connection.
$(".contentContainer").css("min-height", $(window).height());
$("textarea").css("height", $(window).height() - 110);
$("textarea").keyup(function() {
$.post("updatediary.php", {
diary: $("textarea").val()
});
});
$(document).ready(function() {
$('#example').DataTable();
});
.navbar-brand {
font-size: 1.8em;
}
#topContainer {
background-image: url("background.jpg");
height: 400px;
width: 100%;
background-size: cover;
}
#topRow {
margin-top: 80px;
text-align: center;
}
#topRow h1 {
font-size: 300%;
}
.bold {
font-weight: bold;
}
.marginTop {
margin-top: 30px;
}
.center {
text-align: center;
}
.title {
margin-top: 100px;
font-size: 300%;
}
#footer {
background-color: #B0D1FB;
padding-top: 70px;
width: 100%;
}
,
marginBottom {
margin-bottom: 30px;
}
.appstoreImage {
width: 250px;
}
.table {
table-layout: fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse">
<ul class= "navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Date</td>
<th>Subject</th>
<td>Details</td>
<td>Status</td>
<td>ticket id</td>
<td>Actions</td>
</tr>
</thead>
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tbody method="post">
<td class="col-md-1"><?php print_r($date); ?></td>
<td class="col-md-1"><?php print_r($subject); ?></td>
<td class="col-sm-2"><?php print_r($detail); ?> </td>
<td class="col-md-1"><?php print_r($status); ?></td>
<td class="col-md-1"><?php echo $tickid ; ?></td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tbody>
<?php } ?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
</body>

Change td elements to th in thead
Take tbody out of while loop
Add table row tr element inside while loop to enclose table cells

I think you must clean up your code a little bit like #Gyrocode.com said. Code below works.
$(document).ready(function() {
$('#example').DataTable();
});
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- start to loop here -->
<tr>
<td class="col-md-1">10/04/2017</td>
<td class="col-md-1">ABC</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">1546546</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">11/04/2017</td>
<td class="col-md-1">DEF</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5646156</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">12/04/2017</td>
<td class="col-md-1">ZXY</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">454658</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">OPQ</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">56446</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">ggg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtr</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">2577</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtfe</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7254</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rggthg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">frgbf</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52727</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">grege</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">gtehtehte</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<!-- end loop -->
<tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
Cleanup you your code:
$(document).ready(function() {
$('#example').DataTable();
});
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody method="post">
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tr>
<td class="col-md-1">
<?php print_r($date); ?>
</td>
<td class="col-md-1">
<?php print_r($subject); ?>
</td>
<td class="col-sm-2">
<?php print_r($detail); ?> </td>
<td class="col-md-1">
<?php print_r($status); ?>
</td>
<td class="col-md-1">
<?php echo $tickid ; ?>
</td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

Issues with ui bootstrap modal CSS and printing

I am creating a webpage using angularjs and ui bootstrap to create modals. Then I have javascript to print just the modal. However, I am having an issue with my CSS. Firstly, for some reason (most likely because my CSS is messed up) the text is extending outside the div they belong in. Specifically, the ingredients and nutrition facts within the div with the class "onerow" are extending below the div with the class "modal-body".
Here is the plunker: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
Furthermore, I have some javascript to print just the modal pane. It seems to work except for the fact that for some reason the thick solid black borders in the nutrition facts become borders with rounded corners. Again, refer to the plunker to better see what I am talking about.
Here is the html that makes up the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
<div class="modal-body" id="modalBody">
<div ng-show="!pluValid" style="text-align:center;">
PLU {{productData.PLU}} not found in Database
</div>
<div class="onerow" ng-show="pluValid">
<div class="col6">
<div style="text-align: center;">{{productData.Desc1}} {{productData.Desc2}}</div>
<br />
<br />
Ingredients:
<br />
{{productData.Ingredients}}
<br />
<br />
<br />
<div style="text-align: center;">
<b>UPC NUMBER</b>
<br />
{{productData.UPC}}
</div>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="!areFacts">
<table style="width:100%;" cellspacing:0 cellpadding:0>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts</td>
</tr>
<tr>
<td style="text-align: center;">N/A</td>
</tr>
</tbody>
</table>
</div>
<div class="col6 last" id="nutritionfacts" ng-show="areFacts">
<table style="width:100%;" cellspacing:0; cellpadding:0;>
<tbody>
<tr>
<td style="text-align: center;" class="header">Nutrition Facts<br /><br /></td>
</tr>
<tr>
<td>
Serving Size {{productData.ServSize}}
<br />
Servings Per Container {{productData.ServPer}}
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<div class="line">Amount Per Serving</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Calories
<div class="weight">{{productData.Calories}}</div>
</div>
<div style="padding-top: 1px; float: right;" class="labellight">Calories from Fat
<div class="weight">{{productData.CaloriesFat}}</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<br />
<div class="dvlabel" style="text-align: right;">% Daily Value<sup>*</sup></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Fat
<div class="weight">{{productData.TotalFat}}g</div>
</div>
<div class="dv">{{productData.PerFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Saturated Fat
<div class="weight">{{productData.SatFat}}g</div>
</div>
<div class="dv">{{productData.PerSatFat}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Trans Fat
<div class="weight">{{productData.TransFat}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Cholesterol
<div class="weight">{{productData.Cholesterol}}mg</div>
</div>
<div class="dv">{{productData.PerCholesterol}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Sodium
<div class="weight">{{productData.Sodium}}mg</div>
</div>
<div class="dv">{{productData.PerSodium}}%</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">Total Carbohydrates
<div class="weight">{{productData.Carbs}}g</div>
</div>
<div class="dv">{{productData.PerCarbs}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Dietary Fiber
<div class="weight">{{productData.Fiber}}g</div>
</div>
<div class="dv">{{productData.PerFiber}}%</div>
</div>
</td>
</tr>
<tr>
<td class="indent">
<div class="line">
<div class="labellight">Sugars
<div class="weight">{{productData.Sugars}}g</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="label">
Protein
<div class="weight">{{productData.Protein}}g</div>
</div>
</div>
</td>
</tr>
<tr style="height: 7px">
<td style="background-color: #000000;"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" class="vitamins">
<tbody>
<tr>
<td>Vitamin A {{productData.VitA}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin C {{productData.VitC}}%</td>
</tr>
<tr>
<td>Calcium {{productData.Calc}}%</td>
<td style="text-align: center;">•</td>
<td>Iron {{productData.Iron}}%</td>
</tr>
<tr>
<td>Vitamin D {{productData.VitD}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin E {{productData.VitE}}%</td>
</tr>
<tr>
<td>Thiamine {{productData.Thia}}%</td>
<td style="text-align: center;">•</td>
<td>Riboflavin {{productData.Ribo}}%</td>
</tr>
<tr>
<td>Niacin {{productData.Niac}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B6 {{productData.VitB6}}%</td>
</tr>
<tr>
<td>Folate {{productData.Folate}}%</td>
<td style="text-align: center;">•</td>
<td>Vitamin B12 {{productData.VitB12}}%</td>
</tr>
<tr>
<td>Biotin {{productData.Biotin}}%</td>
<td style="text-align: center;">•</td>
<td>Phosphorus {{productData.Phos}}%</td>
</tr>
<tr>
<td>Zinc {{productData.Zinc}}%</td>
<td style="text-align: center;">•</td>
<td>Magnesium {{productData.Mag}}%</td>
</tr>
<tr>
<td>Iodine {{productData.Iodine}}%</td>
<td style="text-align: center;">•</td>
<td>Copper {{productData.Copper}}%</td>
</tr>
<tr>
<td>Pantothenic Acid {{productData.Acid}}%</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<div class="line">
<div class="labellight">
*Percent Daily Values are based on a 2000 calories diet. Your daily values may be higher or lower depending on your calories needs.
<table border=0 width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="30%"> </td>
<td width="30%">Calories:</td>
<td width="20%" style="text-align:left">2000</td>
<td width="20%" style="text-align:left">2000</td>
</tr>
</table>
</div>
</div>
<div class="line labellight" style="width: 100%;">
<table border=0 cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td width="30%">Total Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">65<i>g</i></td>
<td width="20%" style="text-align:left">80<i>g</i></td>
</tr>
<tr>
<td width="30%">Sat Fat</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">20<i>g</i></td>
<td width="20%" style="text-align:left">25<i>g</i></td>
</tr>
<tr>
<td width="30%">Cholesterol</td>
<td width="30%">Less Than</td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
<td width="20%" style="text-align:left">300<i>mg</i></td>
</tr>
<tr>
<td>Sodium</td>
<td>Less Than</td>
<td style="text-align:left">2400<i>mg</i></td>
<td style="text-align:left">2400<i>mg</i></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2">Total Carbohydrates</td>
<td style="text-align:left">300<i>g</i></td>
<td style="text-align:left">375<i>g</i></td>
</tr>
<tr>
<td colspan="2"> Dietary Fiber</td>
<td style="text-align:left">25<i>g</i></td>
<td style="text-align:left">30<i>g</i></td>
</tr>
</table>
<div class="line">
Calories per gram:
<br />
Fat 9 - Carbohydrate 4 - Percent 4
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>

The problem is the table content requires more then the div width.
A very simple fix to start with is using the overflow CSS property in the #nutritionfacts div.
#nutritionfacts {
border: 1px solid black;
padding: 3px;
font-family: 'Arial Black', sans-serif;
overflow: scroll;
}
As for the modal border-radius problem, you need to override the default .modal-content class which in bootstrap styles has a border-raidius: 6px rule.

We Keep Coding

JavaScript is the programming language of the Web.

How to get page source using selenium RC - javascript

Related

Creating a horizontal scrolling table in shopify

How can I call function in HTML file for checkbox?

Keep style of <tr> while dragging

sorting doesn't work, datatable in bootstrap

Issues with ui bootstrap modal CSS and printing

Categories

Resources