Develop Reference

Selecting iFrame Table to export as CSV

I am trying to make a table generated in an iFrame downloadable in a CSV. I have made a JSFiddle (https://jsfiddle.net/22u6o6wu/3/) that can load the iFrame from Fusion Tables, however, I cannot get it to work. Here is the code that I am using:
This part deals with loading the url in an iFrame
function myFunction(myInput) {
var userInput = document.getElementById("myInput").value;
var Input = document.getElementById("demo").innerHTML = userInput;
if (userInput){
var startUrl = "https://fusiontables.google.com/embedviz?viz=GVIZ&t=TABLE&q=select+col0%2C+col1%2C+col2%2C+col3+from+1XIDlbUpAJLcUtDf-cYoOZzpLi2KSN0ZH93sHJxVq+where+col3+%3D+'";
var endUrl = "'&containerId=googft-gviz-canvas";
var URL = startUrl+Input+endUrl;
document.getElementById("frame").innerHTML = '<iframe src="' + URL +
'" width="1000" height="720" scrolling="yes" border="0" sandbox="allow-same-origin allow-scripts" id="iframeId"></iframe>';
}
}
This is the CSV part
function download_csv(csv, filename) {
var csvFile;
var downloadLink;
// CSV FILE
csvFile = new Blob([csv], {type: "text/csv"});
// Download link
downloadLink = document.createElement("a");
// File name
downloadLink.download = filename;
// We have to create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);
// Make sure that the link is not displayed
downloadLink.style.display = "none";
// Add the link to your DOM
document.body.appendChild(downloadLink);
// Lanzamos
downloadLink.click();
}
function export_table_to_csv(html, filename) {
var csv = [];
//var iframe = document.getElementById('googft-gviz-canvas').contentWindow.document.body.innerHTML;
//var iframeDoc;
// if (window.frames && window.frames.iframeId &&
// (iframeDoc = window.frames.iframeId.document)) {
// var iframeBody = iframeDoc.body;
// var ifromContent = iframeBody.innerHTML;
// }
var rows = document.querySelectorAll("table tr");
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
// Download CSV
download_csv(csv.join("\n"), filename);
}
document.querySelector("button").addEventListener("click", function () {
var html = document.querySelector("table").outerHTML;
export_table_to_csv(html, "table.csv");
});
The CSV part was taken from: https://jsfiddle.net/gengns/j1jm2tjx/
So far I have tried the following methods:
document.getElementById('googft-gviz-canvas').contentWindow.document.body.innerHTML
And the top answer from: How to get the body's content of an iframe in Javascript?
However, I have been unable to implement these solutions.
In the inspector, I have been able to find the HTML for the table that is loaded, and the associated id's, I then tried to use these id's with the above methods, however, that still did not work.
I would preferably like to stick with Javascript, as I do not have any experience with jQuery, and hence would not be able to modify, explain or fix the code.
Thanks.

How to load image from directory, then show onclick

I am trying to have a function which has functions that do the following.
One function to store the files i get with input into the parent functions loadedimages array(loadimages).
One function to show those files in the correct component(showLoadedImages).
And one function to make the correct img file appear on the correct component.
The last function is what i want it to be like(it does not work).
The other two seem ok.
The problem i have is how to make the last function work while using the loadedimages array. You can change what i store in the array , i wouldnt mind.
Here is the JS code:
function imgviewer() {
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
break;
}
loadedimages.push(file);
}
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
var chosenFile = loadedimages[index];
document.getElementById(elem).src = chosenFile;
}
document.getElementById('images').addEventListener('change', function(){
showLoadedImages("main");
}, false);
}
And some HTML
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
<div id="main"></div>
When i call showLoadedImages("main") the images are shown in main div. I want to be able to click those images so that they appear on "willchange" .

This does what you asked for. There are a number of other issues with your code that you might want to address, starting with the images are not thumbnails at all (and shrunken images take just as long to load as the original), but perhaps I'm missing something.
"use strict";
var loadedimages = [];
var lidivs = [];
function loadimages() {
var files = document.getElementById("images").files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.name.match(/\.(jpg|jpeg|png|gif)$/)) {
continue;
}
loadedimages.push(file);
}
loadedimages.length || alert('THERE IS NO IMAGE IN THIS DIRECTORY.');
}
function showLoadedImages(elem) {
loadimages();
var ld = loadedimages;
//var files = getLoadedImages(); //filelist obj
for (var i = 0; i < ld.length; i++) {
var file = ld[i];
var reader = new FileReader();
reader.onload = (function(file) {
return function(e) {
// Render thumbnail.
var span = document.createElement(
'span');
span.innerHTML = [
'<img data-index="',
lidivs.length,
'" class="tile" src="',
e.target.result,
'" title="', encodeURI(
file.name), '">'
].join('');
span.addEventListener("click", foo );
document.getElementById(elem).insertBefore(
span, null);
lidivs.push(span);
};
})(file);
// Read in the image file as a data URL.
reader.readAsDataURL(file);
}
}
function showImage(index, elem) {
document.getElementById(elem).src = lidivs[index].children[0].src;
}
function foo(event) {
showImage(event.target.dataset.index, "willchange");
}
function show() {
showLoadedImages("list");
}
function init() {
document.getElementById("images").addEventListener("change", show, false);
}
document.addEventListener( "DOMContentLoaded", init, false );
<body>
<form name="uploadForm">
<input id="images" type="file" webkitdirectory mozdirectory directory name="myFiles"
multiple/>
<span id="list"></span>
</form>
<div id="sidebar1"><img id="willchange" src="images/railaythailand.jpg" width="1200" height="832" alt=""/></div>
</body>

Dynamically generated javascript img tag firefox issue

I'm having trouble with a screen containing dynamically generated images, when viewed in Chrome it functions as expected, images get generated no problem. However in Firefox none of the images end up being generated and the user is shown a set of image not loaded boxes.
function popupPermanentOverlay_Walking(locationName) {
var title = "Walking to "+locationName;
var content = "Content_Text<div class='walkimg-container'><img class='walkimg' src='images/anim/walkimg.gif'/>";
for(var i = 0; i<50; i++)
{
var filename = "";
var type=random(0,5);
if (type==0)
filename = "tree";
else if (type==1)
filename = "tree";
else if (type==2)
filename = "shrub";
else if (type==3)
filename = "shrub";
else if (type==4)
filename = "shrub";
else if (type==5)
filename = "baretree";
if (filename == "tree")
filename+=random(1,6);
else if (filename == "shrub")
filename+=random(1,3);
else if (filename == "baretree")
filename+=random(1,7);
var y = random(-60, 60);
content+="<img class='walking-prop' src='images/anim/props/"+filename+".gif' style='bottom:"+(y-7)+"px; left:"+random(-50,720)+"px;z-index:"+(15000-y)+";' />";
}
for(var i = 0; i<100; i++)
{
var filename = "grass";
if (random(1,2)==1)
filename+=random(1,6);
else
filename+=random(3,6);
var y = random(-100, 100);
content+="<img class='walking-prop' src='images/anim/props/"+filename+".gif' style='bottom:"+(y)+"px; left:"+random(-180,720)+"px;z-index:"+(10000-y)+";' />";
}
content+="</div>";
popupPermanentOverlay(title, content, "walking-popup");
$(".walkimg").animate({left: "+=600px"}, 20000, "linear");
}
I know Firefox sometimes has an issue of loading the page before images are ready, but I have tried adding a check to ensure it has loaded to no effect.
Ideally I would like to avoid preloading the images which I know is a potential fix for this.

Javascript image slideshow works locally, but not when hosted

Looks like you guys are my go to help for javascript. I have a slideshow that works perfectly when I load the local copy of my webpage. However it does not work when I load the actual page, hosted on GoDaddy. The first image shows, but is just static. Console shows no errors. Once again, any and all help is greatly appreciated.
<div class="auto-style1" style="width: 226px; height: 179px">
<script language="javascript" type="text/javascript">
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "images/image_1.png";
path[1] = "images/image_2.png";
path[2] = "images/image_3.png";
path[3] = "images/image_4.png";
path[4] = "images/image_5.png";
path[5] = "images/image_6.png";
function swapImage()
{
document.slide.src = path[i];
if(i < path.length - 1) i++;
else i = 0;
setTimeout("swapImage()",3000);
}
window.onload=swapImage;
</script>
<img alt="" name="slide" height="140" src="images/image_1.png" width="224" class="auto-style2" />
</div>

You need to have "/" in front of your folder name.
Give path as
path[0] = "/images/image_1.png";
path[1] = "/images/image_2.png";
path[2] = "/images/image_3.png";
path[3] = "/images/image_4.png";
path[4] = "/images/image_5.png";
path[5] = "/images/image_6.png";

2 things.
check your folder Case. In Unix image != Image
check the folder permission, folder should be access-able by all.

I couldn't get your code working. Try this instead:
Working demo
var i = 0; var path = new Array();
// LIST OF IMAGES
path[0] = "images/image_1.png";
path[1] = "images/image_2.png";
path[2] = "images/image_3.png";
path[3] = "images/image_4.png";
path[4] = "images/image_5.png";
path[5] = "images/image_6.png";
function swapImage()
{
var img = document.getElementById("slide");
img.src = path[i];
i++;
if(i >= path.length){
i = 0;
}
setTimeout(function() { swapImage() }, 3000);
}
window.onload=swapImage();

How to display the images in phonegap from server response

I have a signature pad in my server when posted the values from server to my phonegap application i get the response like below how to use that response to store into DB and display in my phonegap.
My response after parsing JSON:
[{"searchStr":"signature.png:sStrEnd","type":"image\/png","usrName":"signature.png","size":5686,"name":"files\/x5cviyfvqelfbra.png"}]
in that response how can i get the image path or direct images.
my script for display the image in canvas
var arbeidcanvas = $('#mArbeid')[0];
arbeidcanvas.width = arbeidcanvas.width;
var arbeidsign = arbeidcanvas.getContext("2d");
var arbeidimg = new Image();
arbeidimg.src = **MYDATABASE VALUE**;
arbeidimg.onload = function() {
arbeidsign.drawImage(arbeidimg, 0,0);
}

<div id="result_data"></div>
<canvas id="myCanvas" ></canvas>
<script>
$(document).ready(function(){
var obj = [{"searchStr":"signature.png:sStrEnd","type":"image\/png","usrName":"signature.png","size":5686,"name":"files\/x5cviyfvqelfbra.png"}] ;
if(obj.length >0){
var list = '<ul data-role="listview" >'
$.each(obj, function(key, value){
if(value.searchStr){
list += '<li>searchStr :'+value.searchStr+'</li>';
}
if(value.type)
list += '<li>type :'+value.type+'</li>';
if(value.size)
list += '<li>size :'+value.size+'</li>';
if(value.name)
list += '<li>name :'+value.name+'</li>';
}) ;
list += '</ul>' ;
$("#result_data").append(list).trigger('create');
$("#result_data").listview('refresh');
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = your_img_src;
}
});
</script>
Store data in db see this link
1) http://docs.phonegap.com/en/3.0.0/cordova_storage_storage.md.html

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
var counter = jsonData.counters[i];
console.log(counter.counter_name);
}