Add bootstrap class to created element with JQuery - javascript

I'm trying to add a bootstrap class to an element using JQuery. This works fine when the element is loaded in the html (#table1), but it doesn' work when I create the element using JQuery and then try to assign a class to it. The table within the #news is not being styled and I really don't understand why. I've also tried with attr('class', 'myClass') but it didn't work either...
See my html here:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<link rel='shortcut icon' type="image/x-icon" href="./images/icons8-globe-africa-16.png">
<link href='./css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<table class='table' id='table1'>
<tr>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>hello</td>
<td>hello</td>
</tr>
</table>
<div id='news'></div>
<button id='butt'>click</button>
<script src='./js/jquery-3.6.3.min.js'></script>
<script src='./js/bootstrap.bundle.min.js'></script>
<script type='module' src='./js/main2.js'></script>
</body>
</html>
and my js here:
$('#butt').on('click', () => {
$('#table1').addClass('table-striped m-3'); //works
const table = $('<table></table>').addClass('table table-striped m-0'); //doesn't work
$('#news').append(table);
for (let i=0; i<4; i++) {
const row = $('<tr></tr>');
const titleData = $('<td></td>').text(`title ${i}`);
const linkData = $('<td></td>');
const link = $('<a></a>').text(`view ${i}`).attr('href', '#');
linkData.append(link);
row.append(titleData);
row.append(linkData);
table.append(row);
}
});

Related

How to Over-Ride same class names are present in two Css links

Hi Here I am using three external links on head section in that one css link has commented that css link I am trying to calling after document ready.
Here my question is I have some same class names in head CSS link and link which I am calling through Jquery also. But while running the code if its same common class name in head and Query link, then its applying head styles and it's not overriding the CSS class which I am calling through Query. If its unique class name then that styles applying.
I want to load CSS which is getting through Query with override head link common class name.
SAMPLE CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="..New folder\layout.css">
<link rel="stylesheet" type="text/css" href="..New folder\bootstrapfile.css">
<!--<link rel="stylesheet" type="text/css" href="..New folder\externalfile.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
var LoadCss = function(cssFile){
alert('Loading css file '+cssFile);
//console.log('Loading css file '+cssFile);
var cssLink = document.createElement('link');
cssLink.rel = 'stylesheet';
cssLink.href = '../'+cssFile;
var head = document.getElementsByTagName('head')[0];
head.parentNode.insertBefore(cssLink, head);
};
$(document).ready(function(){
LoadCss('New folder/externalfile.css');
});
</script>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Print a table tag with js

I'm trying to print a table but it captures the whole page and in mobile mode, I would like to just print the addr-table class as below:
HTML
<table class="addr-table">
... table content...
</table>
Print
JS
<script>
$('.js-print-link').on('click', function() {
var printBlock = $(this).parents('.addr-table').siblings('.addr-table');
printBlock.hide();
window.print();
printBlock.show();
});
</script>
I tried many formats including suggestions on SO, this code performed the best, now the last huddle.
How can I capture just the table in normal pc mode not mobile mode
please try it ... it works correctly:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
#media print {
*{visibility:hidden}
.printable,.printable *{
visibility:visible
}
}
</style>
</head>
<body>
<div>
this content is not printable
</div>
<table class="printable">
<tr>
<td>
... table content...
</td>
</tr>
</table>
Print
</body>
</html>

How to transfer specific value from one page to another?

I have two pages the first is called store.php and the other cart.php. I try to transfer the total rows number from a table from the page cart.php on the store.php page that I have the cart icon and i put the number of products above it. My idea was through javascript count all rows in the table and place it on the cart icon. The problem is as much as try I can not get the value of all rows from the page cart.php inside to store.php.
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>store</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="Cart">
<a href="cart.php">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<span class="Cart_Number" id="Cart_Number"></span>
</a>
</div>
<script type="text/javascript" src="Counter_Cart.js"></script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>cart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<table style="width:100%" id="Product_Map">
<tr>
<th>Product name</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Product 1</td>
<td>Product 1</td>
<td>Product 1</td>
</tr>
<tr>
<td>Product 2</td>
<td>Product 2</td>
<td>Product 2</td>
</tr>
<tr>
<td>Nothing</td>
<td>Nothing</td>
<td>Total</td>
</tr>
</table>
<script type="text/javascript" src="Counter_Cart.js"></script>
</body>
</html>
function CountRowsUsingJavascript() {
var totalRowCount = 0;
var table = document.getElementById("Product_Map");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
if (i > 0) {
totalRowCount++;
} else {
totalRowCount = 0;
}
}
if (totalRowCount > 0) {
totalRowCount = totalRowCount - 1;
return totalRowCount;
} else {
return totalRowCount;
}
}
var Value_For_The_Cart = CountRowsUsingJavascript();
To answer your question, I can think of two ways this can be done:
Window.name
window.name is sort of a special variable that will keep its value across page reloads and navigation, as long as the user stays on the same tab. This variable only takes strings so you could convert your number to a string.
window.name = Value_For_The_Cart.toString();
Local storage
Local storage is used for storing data that persists in the user's browser, and thus is kept across pages. To save something to local storage you would do
localStorage.setItem('whateverNameYouWant', Value_For_The_Cart.ToString());
And to get it
localStorage.getItem('whateverNameYouWant');
But I advise you to consider if handling this client side is the best way to go about this.

DataTables not displaying content for a simple example

Here's the JSON, returned by the web service call, which is successful.
{"items":[{"version_no":"7.6.5.4"}]}
And here's my javascript / HTML. When I load the page, it displays the header and footer properly, and makes the call out to the web service. But it doesn't display the version number contained in the JSON.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Page 1</title>
<link rel="stylesheet" type="text/css" href="lib/bootstrap.css">
<link rel="stylesheet" type="text/css" href="lib/dataTables.bootstrap4.min.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="lib/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="lib/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"ajax": {
cache: true,
url: "https://<hostname>/get_version/",
type: "GET"
},
"columns": [
{ "data" : "items.version_no" }
]
} );
} );
</script>
</head>
<body>
<p>
<table id="example" class="table table-striped table-bordered" style="width:"75%">
<thead>
<tr>
<th>Version</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Version</th>
</tr>
</tfoot>
</table>
</body>
</html>
Here's what the browser displays
By default, DataTables expects data returned from AJAX-call formatted in a certain way (array of arrays or array of objects, where each entry corresponds to table row, enclosed, by default, within property data/aaData).
However, if you need to override this behavior, you may use dataSrc property of ajax option to point to your items property:
ajax: {
...
dataSrc: 'items'
}
After that, you may simply refer to version_no within column definition:
columns: [{data:'version_no', title:'Version'}]

Click Div make another Div Appear

I am trying to make a prompt box of sorts in which you click one div and another transitions from visibility = hidden to visibility = visible. This is my code so far and I don't know why it doesn't work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
<script type="text/js">
document.getElementById("addpanel").onclick = document.getElementById("selector").style.visibility = "visble";
</script>
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
</body>
</html>
Check this out:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="C.K.">
<title></title>
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="selector">
SELECTOR
</div>
<div id="addpanel">
<table id="add">
<tr>
<td id="plus">+</td>
</tr>
<tr>
<td>Add New Item</td>
</tr>
</table>
</div>
<script type="text/javascript">
document.getElementById("selector").style.visibility = "hidden";
document.getElementById("addpanel").onclick = function(){document.getElementById("selector").style.visibility = "visible";};
</script>
</body>
HTML is parsed top to bottom. Your script will be run immediately just in case it produces any more HTML for the parser to handle (e.g. with document.write). At the point of document.getElementById("addpanel").onclick, addpanel does not exist because the HTML parser hasn't reached it yet.
Move your <script> block to after your apppanel element's closing tag.
Also, onclick needs to be a function. So it would be:
document.getElementById("addpanel").onclick = function() {
document.getElementById("selector").style.visibility = "visible"
}
Quick working example: https://jsfiddle.net/m2q6ubuv/
Try this
function show(){
document.getElmenetById('selector').style.visibility = 'visible'; }
Then just put onclick='show()' as an attribute in the tag you want to be the button.
Plus, you should put JavaScript at the end of the page, just first of the </body> tag.

Categories