In my Google Application Script web I am loading dynamically Google Doc as HTML. If I insert second HTML exactly the same way then it crashes the layout.
You can test it here
Test scenario 1
Load page
wait till see the text (file 1 is loaded)
go to the other tab and load file2
go back to the first tab and the layout is different (the error is not consistent in terms when and how it performs)
Test scenario 2
Load page
wait till see the text (file 1 is loaded)
load file 3
check the bottom of the page. New test appears and everything is ok
Test scenario 3
Load page
wait till see the text (file 1 is loaded)
load file 3
check the bottom of the page. New test appears and everything is ok
go to the other tab and load file2
go back to the first tab and the layout is different (the error is not consistent in terms when and how it performs)
Server side code looks like. NOTE that from file3 are removed <head> tags.
Could someone explain and hopefully suggest a solution to this issue?
function doGet() {
return HtmlService.createHtmlOutputFromFile("index");
}
function getGoogleDocumentAsHTML(file){
console.log(file)
if (file == 1){
var docID ="1vRMY6bIkUc_J6qDOUJszIYAtIWH-aHTdYYgCmlL4"
}
if (file == 2 || file == 3){
var docID ="1VBpazC3SO2hx4PA7r3A2jud5O9-teNu0nvvnIDac"
}
var forDriveScope = DriveApp.getStorageUsed(); //needed to get Drive Scope requested
var url = "https://docs.google.com/feeds/download/documents/export/Export?id="+docID+"&exportFormat=html&format=html";
var param = {
method : "get",
headers : {"Authorization": "Bearer " + ScriptApp.getOAuthToken()},
muteHttpExceptions:true,
};
var html = UrlFetchApp.fetch(url,param).getContentText()
// return cleanHTML(html)
if (file == 3 ){
return cleanHTML(html)
}
return html
//return HtmlService.createHtmlOutput(html).getContent()
}
function cleanHTML(html){
// nuke the whole head section, including the stylesheet and meta tag
html = html.replace(/<head>.*<\/head>/, '');
// remove almost all html attributes
// html = html.replace(/ (id|style|start|colspan|rowspan)="[^"]*"/g, '');
// html = html.replace(/ (id|class|style|start|colspan|rowspan)="[^"]*"/g, '');
// remove all of the spans, as well as the outer html and body
// html = html.replace(/<(span|\/span|body|\/body|html|\/html)>/g, '');
// clearly the superior way of denoting line breaks
// html = html.replace(/<br>/g, '<br />');
return html
}
and html part is here
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" media="screen,projection" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/js/tabulator.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.9.3/css/materialize/tabulator_materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
<div class="row">
<div class="col s12">
<ul class="tabs" id="tabsTest">
<li class="tab col s3">HTML from file - loaded</li>
<li class="tab col s3">Second to be loaded</li>
</ul>
</div>
<div id="test1" class="col s12">
<button id ="testingAdmin" class="waves-effect btn" onClick="getHTML(2)">Load second HTML</button>
<div id="test" class="container col s12"> </div>
</div>
<div id="test2" class="col s12">
<button id ="testingAdmin" class="waves-effect btn" onClick="getHTML(3)">Load third HTML</button>
<div id="testovani" class="container col s12"></div>
<div id="test3" class="container col s12"> </div>
</div>
<script>
function getHTML(file){
google.script.run.withSuccessHandler(
function(output){
if (file == 1){
document.getElementById("testovani").innerHTML = output
}
if (file == 2){
document.getElementById("test").innerHTML = output
}
if (file == 3){
document.getElementById("test3").innerHTML = output
}
}
).getGoogleDocumentAsHTML(file);
}
document.addEventListener("DOMContentLoaded", function(event) {
var options ={}
var tabs = document.querySelectorAll('.tabs')
var tabsOptions = {
onShow : function(e) {
console.log(e.id)
switch (e.id){
case "test2":
console.log("testing")
break;
default:
}
}
}
var instance = M.Tabs.init(tabs, options);
getHTML(1)
});
</script>
</body>
</html>
Related
I hope you are having a nice day.
I am trying to use this CSV input API -- https://github.com/MounirMesselmeni/html-fileapi -- to populate the data array in this zoomable sunburst API:https://plotly.com/javascript/plotlyjs-function-reference/.
Currently, I am able to load in the CSV to the API, and the contents will show on the screen. However, the data is not connecting to the Data Visualization API Script. I am very confused as to why it is not.
See the picture here -- [1]: https://i.stack.imgur.com/oQeY2.png
Currently, the computer is saying there is a "Unexpected end of input" at the final which the Data visualization API is contained within.
It won't even reach the console.log("hello") statement within the script :,(
The code looks like this:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CSV to Zoomable Sunburs</title>
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div>
<form class="form-horizontal well">
<legend>
<h3>
<div id="title">HTML5 File API</div>
</h3>
</legend>
<fieldset>
<label for="csvFileInput"> <strong>CSV File:</strong>
</label>
<input type="file" id="csvFileInput" onchange="handleFiles(this.files)" accept=".csv">
</div>
</fieldset>
</form>
<div id="output">
</div>
</div>
<div id='myDiv'>
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script type="text/javascript" src="read-csv.js"></script>
</body>
<script>
lines = FileReader.readAsText(Blob|File, opt_encoding);
console.log("hello");
pieces = [];
tempData = [];
(also just to note tempData should hold all of the pieces of the data and then pieces will be used to populate the data array later more easily)
while (typeof lines[0] !== "undefined") {
var line = lines.shift();
var split = line.split(',');
console.log("this is the line: " + line);
console.log("this is the split: " + split);
tempData.push(split);
document.querySelector("#content").innerHTML += split[0] + "<br/>";
}
// iterate through the temp data file
for (let i = 0; i < tempData.length; i += 1) {
const currentKey = tempData[i];
const currItem = calendarE[currentKey];
if (i == 0) { // type
pieces[0] = tempData[0];
}
which then populates the data array as such:
var data = [{
type: pieces[0],
labels: pieces[1],
parents: pieces[2],
outsidetextfont: { size: pieces[3], color: pieces[4], },
leaf: { opacity: pieces[5], },
marker: { line: { width: pieces[6], } },
}];
and then ends as such:
Plotly.newPlot('myDiv', data, layout);
</script>
</html>
Any help as to why I am not getting any console.log statements from inside the data visualization script would be AWESOME thank you so so much!!
I'm working on a project, where the user will use side-bar html page, as a form to update a sheet (very basic operation).
I'm having issue with the autocomplete part.
I'm a beginner to code html with google apps script, so please let me know if you don't have enough information.
The script is supposed to get names from a google sheets, and populate it to the autocomplete item.
I followed a tutorial doing practically the same operation, but based on a web app using a google spreadsheet ==> this one worked perfectly for me.
The challenge is now into adapting it to a sidebar page on google sheet ==> does not work at the moment.
I've been struggling for hours and trying different options, so here is :
- What I made on gs page :
var ss = SpreadsheetApp.getActiveSpreadsheet();
var shEmployees = ss.getSheetByName("Employes");
var colEmploye_nomPrenom=1;
var colEmploye_barcode=colEmploye_nomPrenom+1;
var colEmploye_mail=colEmploye_barcode+1;
var colEmploye_metier=colEmploye_mail+1;
function loadBasicForm(){
var tmp=HtmlService.createTemplateFromFile("basicHtmlForm");
var html = tmp.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
html.setTitle("Test");
SpreadsheetApp.getUi().showSidebar(html);
}//function loadBasicForm(){
function getUnactiveEmployees(){
var ws=shEmployees;
var values= ws.getRange(1,1,ws.getLastRow(),colEmploye_metier).getValues();
var options={};
for (var i=0;i<values.length;i++){
var name=values[i][colEmploye_nomPrenom-1];
var job=values[i][colEmploye_metier-1];
var testUnactive_OK=job=="Désactivé";
if (testUnactive_OK){
options[name]=null;
}//if (testUnactive_OK){
}//for (var i=0;i<values.length;i++){
Logger.log (options);//returns {employee1=null, employee8=null, employee3=null, employee9=null, employee5=null, employee10=null, employee7=null, employee6=null, employee11=null, employee4=null, employee2=null}
return options;
}
What I made on html page :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><!--Import Google Icon Font-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"><!-- Compiled and minified CSS -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!--Let browser know website is optimized for mobile-->
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i>
<input type="text" id="searchedEmployee" class="autocomplete" required><!-- ISSUE AT FILLING IT -->
<label for="searchedEmployee">Spell a Name</label>
</div>
</div><!-- END ROW -->
</div ><!-- END CONTAINER -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <!-- Compiled and minified JavaScript -->
<script>
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(populateEmployees).getUnactiveEmployees();
});
function populateEmployees(employees){
var autocomplete = document.getElementById('searchedEmployee');
var instances = M.Autocomplete.init(autocomplete, { data:employees });
}
</script>
</body>
</html>
At this point, the side-page is displayed, but nothing is suggested at typing, for example : "emp" for "employeeX" expected with the "getUnactiveEmployees" list.
EDIT :
My issue is not about displaying - that does displaying.
What I cannot do, is to allow the script to autocomplete the item "searchedEmployee". I guess there is an error on this part :
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(populateEmployees).getUnactiveEmployees();
});
Do you have any idea of what I did wrong ?
Many thanks !
Try this:
function loadBasicForm(){
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('basicHtmlForm').setTitle('Test'));
}
I have a spreadsheet at work that contains information on various different devices we use.
The spreadsheet contains information like the Original Equipment Manufacturer, Storage capacity, format, Etc. There are a total of 10 Columns, and up to 359 rows currently; but the spreadsheet will expand from general use.
I have created a sidebar application in google sheets using Aps script and HTML, in order to make requesting support for these objects simpler. I am running in to an issue with capturing the data typed into an input field. Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class = "Container"><!-- Begin CONTAINER div -->
<div class="row"><!-- Begin ROW div -->
<div class="col s24 "><!-- Beginning of Header div -->
<h5 class="col s24"offset-s3> Edit a Kit </h5>
<div><!-- Text input field for Kit search -->
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Enter Kit Name</label>
</div>
</div><!-- end of Text Input for Kit search -->
<!-- Start of Submit btn div -->
<div class="input-field col s12">
<button class="btn waves-effect waves-light" id="search" onclick ="submitData()">Search
<i class="material-icons right">search</i>
</button>
</div><!-- End of Submit btn div -->
<div class="divider"></div>
<div><!-- beginning of kit contents div -->
<!-- Users need to enter kit names into a text input field, similar to the create kit page -->
<h5 id = "kit" class = "section"></h5>
</div><!-- end of kit contents div -->
<div class="divider"></div>
<!-- Start of the HOME PAGE button Div -->
<div class="input-field col s12">
<button class="btn waves-effect waves-light" onclick="google.script.run.withSuccessHandler(changePage).newPage('Card Request Form')">Home
<i class="material-icons right">home</i>
</button>
</div><!-- end of the HOME PAGE button div -->
</div><!-- End of Header div --->
</div><!-- End of ROW Div -->
</div><!-- End of CONTAINER Div -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
function changePage(page) {
document.write(page);
}
// function alertA() {
// alert("Your code Failed to Run");
// };
function alertB() {
alert("Success! Click 'OK' to see your results");
};
function submitData() {
var data = document.getElementById('search').value;
var outPut = document.getElementById('kit');
var display = outPut.innerHtml = "THIS IS WORKING AS EXPECTED";
// alert(display);
};
function outputCard(submitData) {
};
</script>
</body>
</html>
I am trying to access the input data from the "Submit btn div" using the function "submitData()", but have been unsuccessful in doing so. In the version i've uploaded, I am simply trying to capture that information, and print it back out to the "kit contents div" but have been unsuccessful.
For clarity, I am doing this in a Google Apps scripts, as a sidebar extension to a google sheets spreadsheet. The goal is to take that input, and parse over the information for all of the informaton referenced in the first Full paragraph; and then return any items relevantr to the users search terms in the "kit contents div". I am not able to capture the input in Google Apps script though. Here is a copy of my gs code:
//This function searches for cards by the value typed into the text input field
function cardSearch(data) {
var app = SpreadsheetApp;
var log = app.openById("My Spreadsheet's ID");
var kitContents = app.openById("My Spreadsheet's ID");
var cards = log.getRange("A3:J").getValues();
var kitType = kitContents.getRange("A3:J359").getValues();
for (i=0; i<kitType[data]; i++){
return kitType[data];
}
Logger.log(kitType[356])
// for some reason, the array literal ends at index #356, where as the spreadsheet is up to 359 rows, but stops at ID#354
};
function alert(data) {
return "received input " +data.display;
};
//This function loads the webpage content of the HTML file "Card Request Form" as a sidebar in the main spreadsheet
function showRequestForm() {
var form = HtmlService.createTemplateFromFile("Card Request Form");
var html = form.evaluate();
SpreadsheetApp.getUi().showSidebar(html);
};
//This function allows us to navigate pages that exists in the document
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
};
I need help understanding how to cpature the input, and pass it back to the GS (I believe it's the same as passing it to the server) in order to run the cardSearch Function with that capturted data.
Here's an example form that I've used to collect receipt information. You can display it as a sidebar, a dialog or run it as a webapp. It has a numerical input, a text input and a textarea. It also allows you to upload a file.
thehtml.hmtl:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function(){
google.script.run
.withSuccessHandler(function(rObj){
$('#dt').val(rObj.date);
})
.initForm();
});
function fileUploadJs(frmData) {
var amt=$('#amt').val();
var vndr=$('#vndr').val();
var img=$('#img').val();
if(!amt){
window.alert('No amount provided');
$('#amt').focus();
return;
}
if(!vndr) {
window.alert('No vendor provided');
$('#vndr').focus();
return;
}
if(!img) {
window.alert('No image chosen');
$('#img').focus();
}
document.getElementById('status').style.display ='inline';
google.script.run
.withSuccessHandler(function(hl){
document.getElementById('status').innerHTML=hl;
})
.uploadTheForm(frmData)
}
console.log('My Code');
</script>
<style>
input,textarea{margin:5px 5px 5px 0;}
</style>
</head>
<body>
<h3 id="main-heading">Receipt Information</h3>
<div id="formDiv">
<form id="myForm">
<br /><input type="date" name="date" id="dt"/>
<br /><input type="number" name="amount" placeholder="Amount" id="amt" />
<br /><input type="text" name="vendor" placeholder="Vendor" id="vndr"/>
<br /><textarea name="notes" cols="40" rows="2" placeholder="NOTES"></textarea>
<br/>Receipt Image
<br /><input type="file" name="receipt" id="img" />
<br /><input type="button" value="Submit" onclick="fileUploadJs(this.parentNode)" />
</form>
</div>
<div id="status" style="display: none">
<!-- div will be filled with innerHTML after form submission. -->
Uploading. Please wait...
</div>
</body>
</html>
Codge.gs:
function onOpen() {
SpreadsheetApp.getUi().createMenu('Receipt Collection')
.addItem('Run as Dialog', 'showAsDialog')
.addItem('Run as Sidebar', 'showAsSidebar')
.addToUi();
var sh=SpreadsheetApp.getActive().getSheetByName("Sheet1");
sh.getRange(sh.getLastRow()+1,1).activate();
}
function uploadTheForm(theForm) {
var rObj={};
rObj['vendor']=theForm.vendor;
rObj['amount']=theForm.amount;
rObj['date']=theForm.date;
rObj['notes']=theForm.notes
var fileBlob=theForm.receipt;
var fldr = DriveApp.getFolderById(receiptImageFolderId);
rObj['file']=fldr.createFile(fileBlob);
rObj['filetype']=fileBlob.getContentType();
Logger.log(JSON.stringify(rObj));
var cObj=formatFileName(rObj);
Logger.log(JSON.stringify(cObj));
var ss=SpreadsheetApp.openById(SSID);
ss.getSheetByName('Sheet1').appendRow([cObj.date,cObj.vendor,cObj.amount,cObj.notes,cObj.file.getUrl()]);
var html=Utilities.formatString('<br />FileName: %s',cObj.file.getName());
return html;
}
function formatFileName(rObj) {
if(rObj) {
Logger.log(JSON.stringify(rObj));
var mA=rObj.date.split('-');
var name=Utilities.formatString('%s_%s_%s.%s',Utilities.formatDate(new Date(mA[0],mA[1]-1,mA[2]),Session.getScriptTimeZone(),"yyyyMMdd"),rObj.vendor,rObj.amount,rObj.filetype.split('/')[1]);
rObj.file.setName(name);
}else{
throw('Invalid or No File in formatFileName() upload.gs');
}
return rObj;
}
function doGet() {
var output=HtmlService.createHtmlOutputFromFile('receipts').setTitle('thehtml');
return output.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).addMetaTag('viewport', 'width=360, initial-scale=1');
}
function showAsDialog() {
var ui=HtmlService.createHtmlOutputFromFile('thehtml');
SpreadsheetApp.getUi().showModelessDialog(ui, 'Receipts')
}
function showAsSidebar() {
var ui=HtmlService.createHtmlOutputFromFile('thehtml');
SpreadsheetApp.getUi().showSidebar(ui);
}
function initForm() {
var datestring=Utilities.formatDate(new Date(),Session.getScriptTimeZone(), "yyyy-MM-dd")
return {date:datestring};
}
globals.gs:
var receiptImageFolderId='upload file folder id';
var SSID='spreadsheet id';
I was curious if using input type = "file" will store the actual file that was selected? If so, how would I display that file, preferably a photo, inside of a div or span? I'm working on a project where people can sell their stuff. I'm looking for a way to display the picture that a user submits, somewhat like the way Facebook does.
How would you display that file
You would have a server recieve the form data, and then do one of the following
Serve the posted file from the server itself.
Upload the file to another server or cloud which serves the file.
You can then send this hosted URL to the client as an image source to show it.
You'll want to check the file to make sure it is not mallicious, and probably randomise the name to make attacking the system harder, to prevent someone from uploading a PHP shell and taking over the server.
I have figured out a way using javascript to display the picture after it's been selected for upload. The code is as follows (Entire document).
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script>
function displayProduct(){
var product = document.getElementById("productTitle").value;
var productDesc = document.getElementById("productDescription").value;
var files = document.getElementById("blah").src;
document.getElementById("showProduct").style.display = "block";
document.getElementById("productHead").innerHTML = product;
document.getElementById("productD").innerHTML = productDesc;
document.getElementById("photo").innerHTML = files;
}
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#photo')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
<title>XXXXXXXXX dot Com</title>
</head>
<body>
<header>
<img src = "brownBag.jpg" width = "8%" style = "float: left;">
<h3>Deal Finder dot Com</h3>
<nav class="cd-stretchy-nav">
<a class="cd-nav-trigger" href="#0">
Menu
<span aria-hidden="true"></span>
</a>
<ul>
<li><span>The Homepage of Nephilim42 Coding</span></li>
<li><span>CSS Portfolio Project</span></li>
<li><span>Javascript Portfolio Project</span></li>
<li><span>Play a game of Darts! Powered by Javascript</span></li>
<li><span>My First Business Website</span></li>
</ul>
<span aria-hidden="true" class="stretchy-nav-bg"></span>
</nav>
</header>
<main class="cd-main-content">
<label for = "form">
<form name = "postForm" id = "postForm" method = "POST" action = "">
<p>What are you selling?
<input type = "text" name = "productTitle" id = "productTitle">
</p><br>
<p>Please describe your product.
<textarea name = "productDescription" id = "productDescription" cols = "50" rows = "6"></textarea>
</p><br>
<p>Upload Picture:
<input type='file' onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
</p>
<input type = "button" name = "post" id = "post" value = "POST" onClick = "displayProduct()"><br>
</form>
<div id = "showProduct">
<p>Product Title:
<span id = "productHead"></span>
</p><br>
<p>Product Description:
<span id = "productD"></span>
</p><br>
<p>Uploaded Photo:
<span id = "photo"></span>
</p>
</div>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>
Below are some attached images. Unfortunately because I have low reputation here on stackOverflow, only the link will attach. Which do work when copied and pasted into the URL search bar. These images show the steps with what happens when uploading a file. unfortunately I have ran into a problem, but I will work on fixing it. The problem is on image #2. The second chunk of javascript in the readURL function is a failed attempt to rectify that.
Image 1) Upload button clicked, selecting image
Image 2) After image is selected and posted, the value of the file is sent via innerHTML to a span. The value seems to be a super long character string rather than the image in the span. I will try to work on this and fix it, and post on this thread the solution.
1 https://i.stack.imgur.com/2Ev4b.png
2 https://i.stack.imgur.com/L0ymG.png
I'm trying to link to the following html page using
$.mobile.changePage( "myPage.html", { transition: "slide"} );
However, it's not working. The page will load however the alert box with the spinning cirlce and "loading" message never disappears and the page never fully loads in its css content. Can anybody see why based on the above call and the html below? Thanks
HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Sign up</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<link rel="stylesheet" href="./signup.css">
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
<script>
// Global declarations - assignments made in $(document).ready() below
var hdrMainvar = null;
var contentMainVar = null;
var ftrMainVar = null;
var contentTransitionVar = null;
</script>
</head>
<body>
<!-- Page starts here -->
<div data-role="page" data-theme="b" id="page1">
<div data-role="header" id="hdrMain" name="hdrMain" data-nobackbtn="true">
<h1>Classroom Tempo</h1>
</div>
<div data-role="navbar">
<ul>
<li>Sign-In</li>
<li>Sign-Up</li>
</ul>
</div>
<div data-role="content" id="contentMain" name="contentMain">
<form id="form1">
<div id="optionSliderDiv" data-role="fieldcontain">
<label for="optionSlider">How Many Options?</label>
<input type="range" name="optionSlider" id="optionSlider" value="2" min="2" max="25" data-highlight="true" />
</div>
<fieldset data-role="controlgroup">
<legend>Numbers or Letters?:</legend>
<input type="radio" name="numbersOrLetters" id="Numbers" value="Numbers" checked="checked" />
<label for="Numbers">Numbers</label>
<input type="radio" name="numbersOrLetters" id="Letters" value="Letters" />
<label for="Letters">Letters</label>
</fieldset>
<script>
$(document).ready(function() {
// Assign global variables
hdrMainVar = $('#hdrMain');
contentMainVar = $('#contentMain');
ftrMainVar = $('#ftrMain');
contentTransitionVar = $('#contentTransition');
sliderValue = $('#optionSlider');
surveyDescriptionVar = $('#SurveyDescription')
form1Var = $('#form1');
confirmationVar = $('#confirmation');
contentDialogVar = $('#contentDialog');
hdrConfirmationVar = $('#hdrConfirmation');
contentConfirmationVar = $('#contentConfirmation');
ftrConfirmationVar = $('#ftrConfirmation');
inputMapVar = $('input[name*="_r"]');
hideContentDialog();
hideContentTransition();
hideConfirmation();
});
$('#buttonOK').click(function() {
hideContentDialog();
//hidePasswordMisMatch();
showMain();
return false;
});
$('#form1').submit(function() {
var err = false;
var passwordError = false;
// Hide the Main content
hideMain();
console.log(sliderValue.val());
// If validation fails, show Dialog content
if(err == true){
console.log("we've got an issue");
showContentDialog();
return false;
}
$('input[name=OnOff]').each(function() {
onOffValue = $('input[name=OnOff]:checked').val();
})
$('input[name=numbersOrLetters]').each(function() {
numbersOrLetters = $('input[name=numbersOrLetters]:checked').val();
})
console.log(onOffValue);
console.log(numbersOrLetters);
// If validation passes, show Transition content
showContentTransition();
// Submit the form
$.post("http://url", form1Var.serialize(), function(data){
console.log(data);
hideContentTransition();
showConfirmation();
});
return false;
});
</script>
</div> <!-- page1 -->
<!-- Page ends here -->
</body>
</html>
The $.mobile.changePage API has undergone some changes from version 1.0 alpha 4 and 1.0.1 of jQuery Mobile. The syntax you are using with option object is of the newer version of jQuery Mobile (at least from 1.0.1).