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.
Related
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);
}
});
I need a logic that handles color gamut for any color.
I started by trying to work with the color red. I have a date column and the older the date, the redder the color needs to be.
So that's basically it, the date of a day ago for example would have a lighter red and as the time passes it gets darker.
This was my attempt:
<!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.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="id">
<div class="table-responsive">
<table class="table table-striped w-auto">
<thead>
<tr>
<th>Due Data</th>
</tr>
</thead>
<tbody>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-08')+',0,0)'">2022-07-08</td>
</tr>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-09')+',0,0)'">2022-07-09</td>
</tr>
<tr>
<td v-bind:style="'background-color: rgb('+255/3*getLateDays('2022-07-10')+',0,0)'">2022-07-10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var myApp = new Vue({
el: '#id',
data() {
return {
}
},
methods: {
getLateDays(date) {
return Math.ceil((new Date().setHours(0, 0, 0, 0) - new Date(date + ' 00:00:00').setHours(0, 0, 0, 0)) / (1000 * 60 * 60 * 24));
}
},
});
</script>
</html>
I am trying to fetch all the details of each track of album from controller(servlet) to jsp page using forEach tag.The values are getting fetched perfectly.For combining play/pause button and audio tag I have written the following code. But, using this only the first track is played.Even while playing remaining tracks the first song is getting played.
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%# page isELIgnored="false" %>
<%#taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- APlayer CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://localhost:8080/Music_Streamer/resources/css/homeTrackDisplay.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table class="center">
<tr>
<th style="text-align: left;">SONG</th>
<th>TITLE</th>
<th>ARTIST</th>
<th><span class="glyphicon glyphicon-time" style="color:grey;"></span></th>
</tr>
<tr></tr>
<tr></tr>
<c:forEach items="${tracklist}" var="track" >
<tr>
<td>
<audio id="sound${track.track_no}">
<source src="./TrackRetrieve?track_no=${track.track_no}" type="audio/mpeg">
</audio>
<h2>Sound ${track.track_no}</h2>
<div class="play" id="btn${track.track_no}">play</div>
</td>
<td>${track.track_name}</td>
<td>${track.track_performer}</td>
<td>${track.track_duration}</td>
<td></td>
</tr>
</c:forEach>
</table>
<script>
$('.play').click(function(){
var $this = $(this);
let id = $this.attr('id');
id = id.split("btn")[1];
$this.toggleClass('active');
if($this.hasClass('active')){
$this.text('pause');
$('audio[id^="sound"]')[id-1].play();
} else {
$this.text('play');
$('audio[id^="sound"]')[id-1].pause();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- APlayer JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Can you please suggest ways to access values from jsp in script tag..??
As onclick of your play button you are getting id i.e :${track.track_no} you can use same to play required audio file .Because in your current code you have <audio id="sound${track.track_no}"> so just use this in selector to play required audio .
Demo Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- APlayer CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://localhost:8080/Music_Streamer/resources/css/homeTrackDisplay.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table class="center">
<tr>
<th style="text-align: left;">SONG</th>
<th>TITLE</th>
<th>ARTIST</th>
<th><span class="glyphicon glyphicon-time" style="color:grey;"></span></th>
</tr>
<tr></tr>
<tr></tr>
<tr>
<td>
<audio id="sound1">
<source src="http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3" type="audio/mpeg">
</audio>
<h2>Sound ${track.track_no}</h2>
<div class="play" id="btn1">play</div>
</td>
<td>${track.track_name}</td>
<td>${track.track_performer}</td>
<td>${track.track_duration}</td>
<td></td>
</tr>
<tr>
<td>
<audio id="sound2">
<source src="http://www.soundjay.com/button/beep-07.wav" type="audio/mpeg">
</audio>
<h2>Sound ${track.track_no}</h2>
<div class="play" id="btn2">play</div>
</td>
<td>${track.track_name}</td>
<td>${track.track_performer}</td>
<td>${track.track_duration}</td>
<td></td>
</tr>
</table>
<script>
$('.play').click(function() {
var $this = $(this);
let id = $this.attr('id');
id = id.split("btn")[1];
console.log(id)
console.log("sound" + id);
$this.toggleClass('active');
if ($this.hasClass('active')) {
$this.text('pause');
//play audio of given id
$("audio[id=sound" + id + "]")[0].play();
} else {
$this.text('play');
//pause audio of given id
$("audio[id=sound" + id + "]")[0].pause();
}
});
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<!-- APlayer JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aplayer/1.10.1/APlayer.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
$('.play').click(function(){
var $this = $(this);
let id = $this.attr('id');
id = id.split("btn")[1];
$this.toggleClass('active');
if($this.hasClass('active')){
$this.text('pause');
$('audio[id^="sound"]')[id-1].play();
} else {
$this.text('play');
$('audio[id^="sound"]')[id-1].pause();
}
});
in this script you are accessing the audio values which are not there and also you should dynamically push the audio files to the list and then access them
use the count as below on iterating the foreach loop and set that count in the audio tag
<c:set var="count" value="0" scope="page" />
<c:set var="count" value="${count + 1}" scope="page"/>
after pushing the audio files to the list then access the the audio list through this index (count) so that it will call the exact audio file to play
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'}]
I have a tale that works fine in a standalone html file. I want to have a scrolling list of links to the left that will load the table with data relative to the selected link (I want it to work something like the W3Schools site). To do this I created a page with two Iframes: One for the list the other with my datatable. The problem is that the datatable stopped working when I loaded it to the Iframe. What am I missing?
Below is my code:
Main page (index):
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<title>Failed Fax Monitor></title>
</head>
<body>
<iframe id="weeks" src="WeekList.html"></iframe>
<iframe id="requests" src = "Requests.html" name="Requests" ></iframe>
</body>
</html>
List frame (weeks)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<script src="jQuery/datatables.min.js"></script>
<script>
$(document).ready(function() {
}
</script>
</head>
<body>
<!--- hard-coded for now will eventually be populated dynamically -->
<ul>
01/23/2017
01/16/2017
01/09/2017
01/02/2017
12/26/2016
12/19/2016
12/12/2016
12/05/2016
11/28/2016
11/21/2016
11/14/2016
11/07/2016
</ul>
</body>
</html>
Frame with datatable (requests)
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
<script src="jQuery/datatables.min.js"></script>
<script>
$(document).ready(function() {
$('#faxList').dataTable( {
"pageLength" : 50,
fixedHeader: true,
paging: false,
//"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"ajax": {
"url": "php/data.php",
"dataType": "json",
"cache": false,
"contentType": "application/json; charset=utf-8",
"dataSrc": "transactions"
},
columns: [
{ data: 'PROCESS_DATE' },
{ data: 'PROCESS_STATUS' },
{ data: 'PDF_FILE_NAME' },
{ data: 'REF_ID' },
{ data: 'ADDITIONAL_INFO' }
]
});
});
</script>
</head>
<body>
<h2>NCompass Failed Fax Monitor</h2>
<br>
<table width="100%" class="display" cellspacing="0" id="faxList">
<thead>
<tr>
<th>Process Date</th>
<th>Status</th>
<th>PDF File</th>
<th>Reference ID</th>
<th>Error Description</th>
</tr>
</thead>
</table>
</body>
</html>
It works for me. Do you think it might be the typo:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
...in the requests frame should be...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
I figured it out. I had the javascript on the wrong page. Moving it to the main page (instead of in the iframe) solved the problem.