I have a form that takes in two text inputs and one image input (PictureBox). I can get the text inputs to show from local storage but I can't get the image to show. I have read the official docs but to no avail.
Form 1
NSBPage.appendChild(HeaderGlobal)
Button1.onclick=function(){
var myDetails1 = Input1.value;
var myDetails2 = Input1Copy.value;
localStorage.myDetails1 = PictureBox1.toDataURL();
console.log(localStorage);
$("#Toast1").toast("show");
Form1.reset();
ChangeForm(Form2)
}
Form 2
Form2.onshow=function(){
if(localStorage.myDetails1){
localStorage.setItem("myDetails1",localStorage.myDetails1);
const recentImageDataUrl = localStorage.getItem("myDetails1");
if(recentImageDataUrl){
PictureBox2.setAttribute("src",recentImageDataUrl);
}
}
Button1Copy.onclick=function(){
ChangeForm(Form1);
}
Local/Session Storage - JavaScript Tutorial
With help from this video and a few modification I finally got it to work.
Post 2
Form2.onshow=function(){
if(localStorage.myDetails1){
localStorage.setItem("myDetails1",localStorage.myDetails1);
const recentImageDataUrl = localStorage.getItem("myDetails1");
if(recentImageDataUrl){
Image1.src = recentImageDataUrl;
}
}
}
Related
I'm showing a chart using AmCharts4 with the URL option to load the data from a PHP file in JSON format. The problem is that sometimes I have an error. In the javascript console, I see the message: net::ERR_NETWORK_IO_SUSPENDED and in the chart the message: Unable to load file. I need to reload the page to load the chart again. I'm not able to find a similar problem on the web, therefore I would be very grateful for help.
const chartTotales = am4core.create('chart-disponibilidad-pastel', am4charts.PieChart);
chartTotales.dataSource.url = 'backend/production.php?opc=4';
chartTotales.dataSource.reloadFrequency = 6000;
const pieSeries = chartTotales.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = 'horas';
pieSeries.dataFields.category = 'tipo';
pieSeries.dataFields.test = '0 min';
pieSeries.slices.template.stroke = am4core.color('#fff');
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.labels.template.text = '{category} {test} {value.formatDuration(\'hh:mm:ss\')} Hrs';
pieSeries.slices.template.tooltipText = '{category} {value.formatDuration(\'hh:mm:ss\')}';
const colorSetTotal = new am4core.ColorSet();
//D72906
colorSetTotal.list = ['#F6F623', '#498561', '#D72906'].map( function(color) {
// #ts-ignore
return new am4core.color(color);
});
You can try setting updateCurrentData to true, this shouldn't remove current data.
chartTotales.dataSource.updateCurrentData= true;
https://www.amcharts.com/docs/v4/reference/datasource/#updateCurrentData_property
Also check Network tab in browser tools to see what is in response from API.
Maybe you are hitting rate limiter.
I'm a complete beginner and just started teaching myself code a couple days ago, so if this is not the right way to do it, feel free to let me know how you would do it instead.
I am trying to upload multiple images onto a webpage using javascript. So far, I have been able to save the data URL to local storage, but every time I select a new file, the saved URL get overwritten. Then, when I click "Choose File," all of the images become the same. Is there a way to save the data URL with unique names without having to change it in javascript every time?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<body>
<div id="div1">The text above has been created dynamically.</div>
<div>
<label for="name"></label>
<input type="file" id="name">
</div>
</body>
<script src="test.js">
</script>
</html>
JS:
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if(this.files && this.files[0]) {
const x = document.querySelector('img');
x.src = URL.createObjectURL(this.files[0]);
}
});
});
document.querySelector("#name").addEventListener("change", function() {
const reader = new FileReader();
reader.addEventListener("load", () => {
sessionStorage.setItem("recent-image", reader.result);
});
reader.readAsDataURL(this.files[0]);
});
document.body.onclick = addElement;
function addElement () {
// create a new div element
const newDiv = document.createElement('img');
const nameInput = document.querySelector('#name');
document.addEventListener("click", () => {
const recentImageDataURL = sessionStorage.getItem("recent-image");
if (recentImageDataURL) {
newDiv.setAttribute("src", recentImageDataURL);
}
});
const currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}
The key of your session-store-entry is always the same: recent-image.
You need to use a different, unique key for each image.
Then you need a way to choose which of these keys you want to show.
(Alternatively you could store a list or collection with all the images, instead of only one image per key.)
There are many different ways to create a unique key, because there are many different ways to define what unique means. There is lots of information about creating unique keys, but the topic is more complex than one might think. Be prepared to read a lot, or just choose a simple way that is good enough for now. E.g.
use a counter
use the current date-time in milliseconds
use a random number
a combination of the above
A simple solution would be like this:
let recentImageId = '';
// ...
//-- a very simple 'unique key' function
const getUniqueImageId = function(){
return 'image_' + Date.now();
}
// ...
recentImageId = getUniqueImageId();
sessionStorage.setItem(recentImageId, reader.result);
// ...
const recentImageDataURL = sessionStorage.getItem(recentImageId);
I am making a PDF Viewer. I am using ADOBE View SDK. I have a File input but the problem is that I want to show the file in different views - Full Screen, Half Screen and In-Line. But when the user selects a file and selects a different view the whole page reloads and then the user has to select the file again. I don't want the user to select the file again.
File Input:
<input type='file' onchange="listenForFileUpload(this);" id="file-picker" accept="application/pdf">
listenForFileUpload function:
var fileToRead = document.getElementById("file-picker");
fileToRead.addEventListener("change", function (event) {
var files = fileToRead.files;
var input = document.getElementById('file-data').value
input = files
console.log(files)
document.getElementById('file-form').submit()
if (files.length > 0 && isValidPDF(files[0])) {
var fileName = files[0].name;
var reader = new FileReader();
reader.onloadend = function (e) {
var filePromise = Promise.resolve(e.target.result);
previewFile(filePromise, fileName);
};
reader.readAsArrayBuffer(files[0]);
}
}, false);
}
Please help me to change the view without reloading.
It's this line here:
document.getElementById('file-form').submit()
You are submitting the form there. I'd just remove it.
I am trying to dynamically load data into the body of my modal but cannot seem to get it to work.
function legend(mb) {
var url = mb;
var location = document.getElementById("choice2");
var gwc = location.options[location.selectedIndex].value;
if (gwc == 15)
{
title = ['<strong>Geomorphology</strong>'];
var url = 'http://localhost/geoserver/apib/wms?REQUEST=GetLegendGraphic&VERSION=1.1.0&FORMAT=image/png&WIDTH=20&HEIGHT=25&LAYER=apib:chamapwathi_block_gm&legend_options=fontSize:14';
}
}
Considering you have only the javascript tag there, I am adding a basic javascript solution. In my example, content changes on button click, which you would have to do when you get the data from your API call.
I have also added an id attribute to the modal body.
document.getElementById('left-modal-body').innerHTML = 'Hello';
Updated Example
On one of our pages the user has the option to print a selected list of html pages. This is how it is at the moment
var rowcount = FrmMain.RowCount;
var frame = FrmMain.Frame;
for(i=1;i<=rowcount;i++)
{
var obj = FrmMain.elements("chk_" + i);
if(obj.checked)
{
frame.src = FrmMain.elements("hpath" + i).value;
window.frames[frame.id].focus();
window.frames[frame.id].print();
}
}
Now this works fine. The problem is that on each loop the print dialog box is displayed and the user has to click print.
Basically, what I'm asking is whether that is a way to supress this dialog. It must appear at the first time but hide thereafter. Some thing like below
var show = true;
...
{
...
{
...
if(show)
{
window.frames[frame.id].focus();
window.frames[frame.id].print();
show = false;
}
else
{
window.frames[frame.id].focus();
window.frames[frame.id].printwithoutdialog();
}
}
}
I hope I've been clear. Thanks in advance.
For security / privacy reasons, this is impossible.
Otherwise, ads would automatically print their brochures.
Instead, you can combine all of the pages into a single frame.
Some browsers have an option bypass the dialog, but it can't be done in javascript.