Before I linked bootstrap to html file, the buttons were working. I got "uncaught typeerror cannot read property addeventlistener" error. after linking to bootstrap. I fixed the error after reviewing previous suggestions by linking jQuery and using $(document).ready() method. There are three buttons. First one to change color. The second one is to switch the list. The last one is to do a multiplication. Both first one and the third buttons are working except the second one. The style.css is saved in a separate file.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<div class="container">
<div class="row">
<body>
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var btnSwitch = document.body.children[1].children[2];
var colorlist = document.body.children[1].children[0];
var animallist = document.body.children[1].children[1];
$(document).ready(function () {
btnSwitch.addEventListener("click", function (e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
});
$(document).ready(function () {
var btnChange = document.getElementById("change-color");
btnChange.addEventListener("click", function (e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
});
var btnMultiply = document.getElementById("multiply");
var inputValue1 = document.getElementById("value1");
var inputValue2 = document.getElementById("value2");
btnMultiply.addEventListener('click', function (e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
</script>
</body>
</html>
I appreciate your feedback.
Thanks
I used $(documnent).ready() to fix 2 errors out of three. I couldn't solve the third error by using the same method.
In your code snippet you only loaded the CSS of Bootstrap and this should not interfere with your JQuery. I don't know what did cause your issue, but my guess is you made some changes in your HTML structure and this interfered with how you have set up the manner in which to return page elements:
var btnSwitch = document.body.children[1].children[2];
The danger of selecting your elements this way is that a small change in your HTML can break it. Unless you specifically want to target a child or parent of a given element, the better way would be to use:
var btnSwitch = document.getElementById('switch-list')
It's also much easier to read code! Since you already use getElementById() in other parts of your code, I assume you know how it works.
Moving on.
You use $(document).ready(function () { ... }) twice in your code. Shouldn't be an issue, but if the first ready() method throws an error, the second block will not be executed. So if there is no specific need for it, just declare it once. And define your vars inside the (nameless) function, if you're using it.
You also have a mistake in your HTML, having div elements before the open <body> tag, but this might happened when you copied your code in your question.
Fixed example
$(document).ready(function() {
var btnSwitch = document.getElementById('switch-list')
var colorlist = document.getElementById('colorlist')
var animallist = document.getElementById('animalist')
var btnChange = document.getElementById("change-color")
var btnMultiply = document.getElementById("multiply")
var inputValue1 = document.getElementById("value1")
var inputValue2 = document.getElementById("value2")
btnSwitch.addEventListener("click", function(e) {
if (colorlist.style.display != "none") { // If #colorlist is displayed
colorlist.style.display = "none"; // Hide #colorlist
animallist.style.display = "block"; // Show #animallist
} else { // Else
animallist.style.display = "none"; // Hide #animallist
colorlist.style.display = "block"; // Show #colorlist
}
});
btnChange.addEventListener("click", function(e) {
var col1 = document.getElementById("col1");
switch (col1.style.color) {
case "red":
col1.style.color = "green";
break;
case "green":
col1.style.color = "blue";
break;
case "blue":
col1.style.color = "black";
break;
case "black":
col1.style.color = "purple";
break;
default:
col1.style.color = "red";
break;
}
});
btnMultiply.addEventListener('click', function(e) {
var val1 = inputValue1.value;
var val2 = inputValue2.value;
if (isNaN(val1) || isNaN(val2)) {
//replace alert box with DOM manipulation
//alert("At least one of the values is not a number");
result.innerHTML = "one or both of the input values is invalid";
result.style.color = "red";
} else {
//alert(val1+" X "+val2+" = "+(val1*val2).toFixed(2));
result.innerHTML = val1 + " X " + val2 + " = " + (val1 * val2).toFixed(2);
result.style.color = "green";
}
});
function validateNumber() {
if (isNaN(this.value)) {
this.style.border = "2px solid red";
} else {
this.style.border = "";
}
}
inputValue1.addEventListener("keyup", validateNumber)
inputValue2.addEventListener("keyup", validateNumber)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Page</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384 rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div id="col1" class="col-md-4">
<p>Lorem Ipsum</p>
<button id="change-color">Change Color</button>
</div>
<div id="col2" class="col-md-4">
<ul id="colorlist">
<li>Red</li>
<li>Green</li>
</ul>
<ul id="animalist">
<li>dog</li>
<li>cat</li>
</ul>
<button type="button" id="switch-list">Switch</button>
</div>
<div class="col-md-4">
<input id="value1" type="text" value="5">
<input id="value2" type="text" value="6">
<button id="multiply">Multiply</button>
<hr>
<!--empty paragraph-->
<p id="result"></p>
</div>
<hr>
<div class="col-md-12">
<table>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
Related
Can not fix the "Nan" issue.I wish to display real "$12" format for example, instead of to be displaying isNan.Any hint how to get this working?
I am not really sure which direction should I go.
Already tried changing strings like "$8.00" to "8" as a textContent property.
Any suggestion is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<title>Frontend Mentor | Interactive pricing component</title>
</head>
<body>
<section class="main-section">
<div class="title-section">
<h1 class="main-title">Simple, traffic-based pricing</h1>
<span class="title-span-1">Sign up for our 30-day trial. No credit card required.</span>
</span>
<img src="./images/pattern-circles.svg" alt="background image pattern" class="img-pattern">
</div>
<div class="card-section">
<h2 class="views-title"><span>100K</span> Pageviews</h2>
<div class="slider-container">
<input type="range" min="1" max="5" step="1" value="3" class="slider-range">
</div>
<div class="amount-container">
<span class="price">$16.00</span>
<span class="month"> /month</span>
</div>
<div class="billing-container">
<div class="billing-month">
<span class="monthly-billing-text">Monthly Billing</span>
<label class="switch">
<input type="checkbox" class="input-range">
<span class="slider round"></span>
</label>
</div>
<div class="billing-year">
<span class="yearly-billing-text">Yearly Billing</span>
<span class="yearly-discount">-25%</span>
</div>
</div>
<hr>
<div class="billing-benefits">
<ul>
<li>Unlimited websites</li>
<li>100% data ownership</li>
<li>Email reports</li>
</ul>
<button class="button-trial">
Start my trial
</button>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
JS code:
const range = document.querySelector('.slider-range');
const pageViews = document.querySelector('.views-title span');
const price = document.querySelector('.price');
const switcher = document.querySelector('.switch');
const checkbox = document.querySelector('.switch input');
const period = document.querySelector('.month');
switcher.addEventListener('click', () => {
if (checkbox.checked == true) {
let priceInt = parseInt(price.textContent);
price.textContent = `${(priceInt - (priceInt * 0.25)) * 12}`;
period.textContent = `/year`;
} else {
period.textContent = `/month`;
}
})
range.addEventListener("input", updatePrice);
function updatePrice() {
if (range.value == 1) {
if (checkbox.checked == true) {
price.textContent = `${(8 - (8 * 0.25)) * 12}`;
} else {
price.textContent = "$8.00";
}
pageViews.textContent = "10K";
}
if (range.value == 2) {
if (checkbox.checked == true) {
price.textContent = "$108.00";
} else {
price.textContent = "$12.00";
}
pageViews.textContent = "50K";
}
if (range.value == 3) {
if (checkbox.checked == true) {
price.textContent = "$144.00";
} else {
price.textContent = "$16.00";
}
pageViews.textContent = "100K";
}
if (range.value == 4) {
if (checkbox.checked == true) {
price.textContent = "$216.00";
} else {
price.textContent = "$24.00";
}
pageViews.textContent = "500K";
}
if (range.value == 5) {
if (checkbox.checked == true) {
price.textContent = "$324.00";
} else {
price.textContent = "$36.00";
}
pageViews.textContent = "1M";
}
}
is there anyone that can just write down the basics for database knowledge? i want to link a database to my html page but have no knowledge about it
this is my html page and i want the div background linked to a databse value that when the value is true the background is green if false background is red, now it works with a button input that if pressed it change to the opposite color
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/style.default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Grafiek</title>
</head>
<body>
<h1>Server Stats</h1>
<div id="maindiv">
<div id="server1" class="serverstatus">
<div id="cardheader">
(servername1)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server2" class="serverstatus">
<div id="cardheader">
(servername2)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
<div id="server3" class="serverstatus">
<div id="cardheader">
(servername3)
</div>
<div>
Status:
</div>
<br>
<div>
Last Checked:
</div>
<div>
Last Online:
</div>
<div>
<button onclick="toggleStatus(this)">yes</button>
</div>
</div>
</div>
</body>
</html>
<script>
function toggleStatus(e) {
var parentDiv = e.parentNode.parentNode;
var bgColor = parentDiv.style.backgroundColor;
if (bgColor == "darkred") {
parentDiv.style.backgroundColor = "green";
} else {
parentDiv.style.backgroundColor = "darkred";
}
}
// var green = false
// function toggleStatus()
// {
// if (green = !green)
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "red");
// });
// }
// else
// {
// $("#maindiv .serverstatus").each(function ()
// {
// $(this).css("background-color", "#639919");
// });
// }
// };
// function updateStatus(){
// $("#maindiv .serverstatus").each(function(){
// $(this).css("background-color", "red");
// });
// }
//
// $( document ).ready(function() {
// updateStatus();
// });
</script>
</body>
</html>
I created a page with a form. When I tried it in chrome the scaling in works just fine. After I created a google app script page the scaling is not working properly when I try mobile size. it works when I put the mobile in landscape mode. In Firefox it works.
My first page was made with materializecss. First time I tried so I thought there was a problem with that. I recreated the page with bootstrap, same result. I can't find the problem. Hope you can help me.
I create the select with data from a spreadsheet.
<!DOCTYPE html>
<html lang="fr">
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="">
<meta name="author" content="Armin Neumann">
<link rel="icon" href="#">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"/>-->
<!-- custom css -->
<?!= include('stylesheet'); ?>
<title>GoodId Intervention</title>
</head>
<body>
<div class="container center">
<div class="py-5 text-center">
<img class="d-block mx-auto mb-4" src="http://www.goodid-fr.com/wp-content/uploads/2018/04/logo_goodid.jpg" alt="" max-height="100px" width="auto">
<h2>Intervention</h2>
</div>
<!-- Default form contact -->
<div class="row justify-content-center">
<form class="text-center border border-light col-md-6" id="form" onsubmit="handleFormSubmit(this)" name="form">
<p class="h4 mb-4">Temps passé pour le client</p>
<!-- Name -->
<input type="date" id="date" name="date" class="form-control mb-4 col-sm-12" required>
<!-- Subject -->
<label>Acteur</label>
<select class=" custom-select mb-4 col-sm-12" id="acteur" name="acteur" required>
<option value="" disabled selected>Sélectionner...</option>
</select>
<label>Client</label>
<select class="custom-select mb-4 col-sm-12" id="client" name="client" required>
<option value="" disabled selected>Sélectionner...</option>
</select>
<label>Contract</label>
<select class=" custom-select mb-4 col-sm-12" id="contract" name="contract" required>
<option value="" disabled selected>Sélectionner...</option>
</select>
<input type="number" name="time" id="time" class="form-control mb-4 col-sm-12" placeholder="Temps passeé(in min)" required>
<!-- Message -->
<div class="form-group">
<textarea class="form-control rounded-0" id="notes" name="notes" rows="10" placeholder="Message"></textarea>
</div>
<!-- Send button -->
<button class="btn btn-info btn-block" type="submit">Send</button>
</form>
</div>
<div class="row justify-content-center">
<button id="reset-button" class="btn btn-warning btn-lg " style="width:40%; margin-top:10px">Reset
</button>
</div>
</div>
<!-- Default form contact -->
<footer class="row justify-content-center">
<div class="footer-copyright ">
<div class=" container center">
Made by
<a class="orange-text text-lighten-3" href="http://www.goodid-fr.com/">GoodId </a> Version:
<?!= version ?>
</div>
</div>
</footer>
<div class="modal loading">
<!-- Place at bottom of page -->
</div>
<!-- Compiled and minified JavaScript -->
<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>
var acteurs = <?!= acteurs ?> ;
var clients = <?!= clients ?> ;
/*
function to get contracts
*/
document.getElementById("client").addEventListener("change", function () {
let val = document.getElementById("client").value;
console.log("val :"+val);
var body = document.querySelector('body');
body.classList.add("load");
if (val != "") {
google.script.run.withSuccessHandler(setContracts).getContracts(val);
}
});
document.addEventListener('DOMContentLoaded', function () {
var selActeur = document.getElementById("acteur");
var selClients = document.getElementById("client");
var optActeur;
var optClients;
var resetBtn = document.getElementById("reset-button");
// NOTE: showAlert(); ou showAlert(param); NE fonctionne PAS ici.
// Il faut fournir une valeur de type function (nom de fonction déclaré ailleurs ou declaration en ligne de fonction).
resetBtn.onclick = reset;
for (x in acteurs) {
optActeur = document.createElement('option');
optActeur.appendChild( document.createTextNode(acteurs[x]) );
// set value property of opt
optActeur.value = acteurs[x];
// add opt to end of select box (sel)
selActeur.appendChild(optActeur);
}
for (c in clients) {
optClients = document.createElement('option');
optClients.appendChild( document.createTextNode(clients[c]) );
// set value property of opt
optClients.value = clients[c];
// add opt to end of select box (sel)
selClients.appendChild(optClients);
}
// var elems = document.querySelectorAll('select');
var elema = document.getElementById("acteur");
var elemc = document.getElementById("client");
var elemco = document.getElementById("contract");
//var instances = M.FormSelect.init(elems);
var elemt = document.querySelectorAll('.datepicker');
});
/**
* function to set acteurs
*
* #param {string or json} titles
* return html select for titles
*/
function setContracts(contracts) {
var elems = document.getElementById("contract");
removeAllOptions(elems, false);
var optContract;
console.log(contracts);
for (v in contracts) {
optContract = document.createElement('option');
optContract.appendChild( document.createTextNode(contracts[v]) );
// set value property of opt
optContract.value = contracts[v];
// add opt to end of select box (sel)
elems.appendChild(optContract);
}
var body = document.querySelector('body');
body.classList.remove("load");
}
function reset(){
document.getElementById("form").reset();
var body = document.querySelector('body');
var elems = document.getElementById("contract");
var optContract;
var elems = document.getElementById("contract");
removeAllOptions(elems, false);
optContract = document.createElement('option');
optContract.appendChild( document.createTextNode('Sélectionner...') );
// set value property of opt
optContract.value = "";
// add opt to end of select box (sel)
elems.appendChild(optContract);
elems.options[0].disabled = true;
elems.options[0].selected = true;
body.classList.remove("load");
}
function formulaireEnvoye() {
var body = document.querySelector('body');
var elems = document.getElementById("contract");
var optContract;
reset();
removeAllOptions(elems, false);
optContract = document.createElement('option');
optContract.appendChild( document.createTextNode('Sélectionner...') );
// set value property of opt
optContract.value = '';
// add opt to end of select box (sel)
elems.appendChild(optContract);
elems.options[0].disabled = true;
elems.options[0].selected = true;
body.classList.remove("load");
}
function handleFormSubmit(formObject) {
var body = document.querySelector('body');
body.classList.add("load");
event.preventDefault();
google.script.run.withSuccessHandler(formulaireEnvoye).processForm(formObject);
}
function removeAllOptions(sel, removeGrp) {
var len, groups, par;
if (removeGrp) {
groups = sel.getElementsByTagName('optgroup');
len = groups.length;
for (var i=len; i; i--) {
sel.removeChild( groups[i-1] );
}
}
len = sel.options.length;
for (var i=len; i; i--) {
par = sel.options[i-1].parentNode;
par.removeChild( sel.options[i-1] );
}
}
</script>
</body>
</html>
function doGet(e) {
if (e.parameter.page == 'test') {
template = HtmlService.createTemplateFromFile('test');
}else{
var template = HtmlService.createTemplateFromFile('index');
}
template.version = version;
template.acteurs = getActeurs();
template.clients = getClients();
return template
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
<style>
.loading {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8) url('https://i.stack.imgur.com/FhHRx.gif') 50% 50% no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.load .loading {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.load .loading {
display: block;
}
</style>
The expected result is the page fit on a mobile screen.
No errors messages
You should add the viewport meta tag to your HtmlOutput for rendering properly on mobile screens.
template = HtmlService.createTemplateFromFile('test');
template.addMetaTag('viewport', 'width=device-width, initial-scale=1');
Please try this code below
function doGet(request) {
var template = HtmlService.createTemplateFromFile('Index');
var html = template.evaluate()
.setTitle('Title');
var htmlOutput = HtmlService.createHtmlOutput(html);
htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
return htmlOutput
}
I have some code (as below) that allows me to open and display a csv file in Firefox from a location on my hard drive. I'd like to add a search box so it will filter the list when text is entered. I've seen some other working examples that had the table data stored between tags, but I can't get this to work when it's pulling the data from an external file location. I'm really new to JavaScript and this is a bit over my head so if anyone has any pointers i'd appreciate it..
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Try this solution :
<!DOCTYPE html>
<html>
<head>
<title>CSV File to HTML Table Using AJAX jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
table {
border-collapse: collapse;
width: 75%;
border: 1px solid #ddd;
font-size: 12px;
}
tr:hover {background-color:#87CEEB;}
</style>
</head>
<body>
<div class="container">
<div class="table-responsive">
<h1 align="center">Adult Nursing - Absences Informed</h1>
<input type="text" id="myInput" onkeyup="myFunction(this)" placeholder="Search for names..">
<table id="table">
<tr class="tr">
<br />
<div align="center">
<button type="button" name="load_data" id="load_data" class="btn btn-info">Load Data</button>
</div>
<br />
<div id="employee_table">
</div>
</div>
</div>
</body>
</html>
<script>
var searchKey = "";
function myFunction(e){
searchKey = e.value;
}
$(document).ready(function(){
$('#load_data').click(function(){
$.ajax({
url:"all_absences.csv",
dataType:"text",
success:function(data)
{
var employee_data = data.split(/\r?\n|\r/);
var table_data = '<table class="table table-bordered table-striped">';
for(var count = 0; count<employee_data.length; count++)
{
var cell_data = employee_data[count].split(",");
table_data += '<tr>';
for(var cell_count=0; cell_count<cell_data.length; cell_count++)
{
if(count === 0)
{
table_data += '<th>'+cell_data[cell_count]+'</th>';
}
else
{
if(!cell_data[cell_count].includes(searchKey) && cell_count == 0){
break;
}
table_data += '<td>'+cell_data[cell_count]+'</td>';
}
}
table_data += '</tr>';
}
table_data += '</table>';
$('#employee_table').html(table_data);
}
});
});
});
</script>
Keep in mind that this solution only works if you're going to search within the first column only
I have 2 divs and I am trying to swap them around automatically every Sunday at 11:59. My divs:
Could anyone help please?
<html>
<head>
<title>HTML Title</title>
<script>
function changeDiv(){
var d = new Date();
if (d.getDay == 0 && d.getHours == 11 && d.getMinutes == 59) {
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
}
</script>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>
This brother will be the right answer. The first code I have given you will only change the name of the div container but do not swap two divs to which one will display.
Give it a try by running this snippet (in this example it changes the div to display and indicate which div is displayed.
function changeDiv(){
if (document.getElementById("cDisp").innerHTML == "Div2") {
document.getElementById("cDisp").innerHTML = "Div1";
document.getElementById("Div1").style.display = null;
document.getElementById("Div2").style.display = "none";
} else {
document.getElementById("cDisp").innerHTML = "Div2";
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = null;
}
}
<html>
<head>
<title>HTML Title</title>
</head>
<body>
<code id="cDisp">Div1</code>
<br />
<button name="changeDiV" onclick="changeDiv()">Change DIV</button>
<div style="color: rgb(244,100,100);" id="Div1">
<p>asdasdasdasda (Div1)</p>
</div>
<div style="display: none; color: rgb(22,232,123);" id="Div2">
<p>1231231231313132 (Div2)</p>
</div>
</body>
</html>