this javascript is working on desktop but not on mobile browsers. Is there an edit which could resolve this?
The script send the results to a questionnaire to a google document to pull out the results. It works ok on a desktop browser but no luck on mobiles.
<script>
var myForm = document.getElementById("questionnaire");
if (myForm) {
myForm.onsubmit = function(evt) {
evt.preventDefault();
var questionDiv = document.getElementById('question-div');
var busyDiv = document.getElementById('busy');
var resultDiv = document.getElementById('result-div');
var resultList = document.getElementById('result-list');
var xhr = new XMLHttpRequest();
var url = "https://script.google.com/macros/s/AKfycbzGx6a6eogfVTaKD_3a4kiLBZfcdD5GMoonNsSSY1-sCCJfPDI/exec";
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onload = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
var result = response.result;
for (var i in result) {
var e = result[i];
if (e) {
var li = document.createElement('li');
if (e.url) {
var a = document.createElement('a');
a.href = e.url;
a.textContent = e.name;
li.appendChild(a);
} else {
li.textContent = e.name;
}
resultList.appendChild(li);
}
}
busyDiv.hidden = true;
resultDiv.hidden = false;
}
}
var form = document.getElementById('questionnaire');
var formData = new FormData(form);
var fields = ['name','email','yob','gender','income','asset','q1','q2','q3','q4','q5','q6','q7','q8','q9','q10'];
var params = [];
for (var i in fields) {
var field = fields[i];
params.push(field + "=" + formData.get(field));
}
xhr.send(params.join('&'));
questionDiv.hidden=true;
busyDiv.hidden=false;
return false;
};
}
</script>
Related
I have this script that should execute at window.onload, populating the html elements from a parsed JSON through XMLHttpRequest. The console log doesn't throw any errors but the script does nothing.
Also I'm running this on a virtual server if it makes any difference.
var filename = document.getElementById('filename').innerHTML
var lang = localStorage.getItem('language')
var xml = new XMLHttpRequest();
var url ="../assets/lang/"+lang+"/"+filename+".json"
var common ="../assets/lang/"+lang+"/!area_common.json"
window.onload = check;
function check(){
if (lang === null){
window.location.href = "lang.html";
setTimeout(check, 300);
}else{
setTimeout(pop, 1);
setTimeout(comm, 10);
};
function comm(){ //this won't work
xml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var com = JSON.parse(this.responseText);
document.getElementById("colpick").firstElementChild.innerHTML=com.colpick;
document.getElementById("csquare").title=com.csquare;
document.getElementsByClassName("notes")[0].firstElementChild.innerHTML=com.notes;
document.getElementById("textArea").placeholder=com.textArea;
document.getElementById("save").innerHTML=com.save;
document.getElementById("wipe").innerHTML=com.wipe;
}
};
xml.open("GET", common, true);
xml.send();
};
function pop(){// also this won't work
xml.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var file = JSON.parse(this.responseText);
var dist_lore = document.getElementsByClassName("lore")[0]//tried also with class name;
var lore01 = document.getElementById("lore01")//all these are divs with an <h2> and a <p> inside;
var lore02 = document.getElementById("lore02");
var lore03 = document.getElementById("lore03");
var lore04 = document.getElementById("lore04");
var lore05 = document.getElementById("lore05");
var lore06 = document.getElementById("lore06");
var lore07 = document.getElementById("lore07");
var lore08 = document.getElementById("lore08");
var lore09 = document.getElementById("lore09");
var lore10 = document.getElementById("lore10");
var lore11 = document.getElementById("lore11");
var lore12 = document.getElementById("lore12");
var lore13 = document.getElementById("lore13");
var lore14 = document.getElementById("lore14");
var lore15 = document.getElementById("lore15");
var lore16 = document.getElementById("lore16");
var lore17 = document.getElementById("lore17");
var lore18 = document.getElementById("lore18");
var lore19 = document.getElementById("lore19");
var lore20 = document.getElementById("lore20");
var lore21 = document.getElementById("lore21");
var lore22 = document.getElementById("lore22");
var lore23 = document.getElementById("lore23");
var lore24 = document.getElementById("lore24");
var lore25 = document.getElementById("lore25");
var lore26 = document.getElementById("lore26");
var lore27 = document.getElementById("lore27");
var lore28 = document.getElementById("lore28");
var lore29 = document.getElementById("lore29");
var lore30 = document.getElementById("lore30");
dist_lore.getElementsByTagName("h2")[0].innerHTML=file.dist_lore[0];
lore01.getElementsByTagName("h2")[0].innerHTML=file.lore01[0];
lore02.getElementsByTagName("h2")[0].innerHTML=file.lore02[0];
lore03.getElementsByTagName("h2")[0].innerHTML=file.lore03[0];
lore04.getElementsByTagName("h2")[0].innerHTML=file.lore04[0];
lore05.getElementsByTagName("h2")[0].innerHTML=file.lore05[0];
lore06.getElementsByTagName("h2")[0].innerHTML=file.lore06[0];
lore07.getElementsByTagName("h2")[0].innerHTML=file.lore07[0];
lore08.getElementsByTagName("h2")[0].innerHTML=file.lore08[0];
lore09.getElementsByTagName("h2")[0].innerHTML=file.lore09[0];
lore10.getElementsByTagName("h2")[0].innerHTML=file.lore10[0];
lore11.getElementsByTagName("h2")[0].innerHTML=file.lore11[0];
lore12.getElementsByTagName("h2")[0].innerHTML=file.lore12[0];
lore13.getElementsByTagName("h2")[0].innerHTML=file.lore13[0];
lore14.getElementsByTagName("h2")[0].innerHTML=file.lore14[0];
lore15.getElementsByTagName("h2")[0].innerHTML=file.lore15[0];
lore16.getElementsByTagName("h2")[0].innerHTML=file.lore16[0];
lore17.getElementsByTagName("h2")[0].innerHTML=file.lore17[0];
lore18.getElementsByTagName("h2")[0].innerHTML=file.lore18[0];
lore19.getElementsByTagName("h2")[0].innerHTML=file.lore19[0];
lore20.getElementsByTagName("h2")[0].innerHTML=file.lore20[0];
lore21.getElementsByTagName("h2")[0].innerHTML=file.lore21[0];
lore22.getElementsByTagName("h2")[0].innerHTML=file.lore22[0];
lore23.getElementsByTagName("h2")[0].innerHTML=file.lore23[0];
lore24.getElementsByTagName("h2")[0].innerHTML=file.lore24[0];
lore25.getElementsByTagName("h2")[0].innerHTML=file.lore25[0];
lore26.getElementsByTagName("h2")[0].innerHTML=file.lore26[0];
lore27.getElementsByTagName("h2")[0].innerHTML=file.lore27[0];
lore28.getElementsByTagName("h2")[0].innerHTML=file.lore28[0];
lore29.getElementsByTagName("h2")[0].innerHTML=file.lore29[0];
lore30.getElementsByTagName("h2")[0].innerHTML=file.lore30[0];
dist_lore.getElementsByTagName("p")[0].innerHTML=file.dist_lore[1];
lore01.getElementsByTagName("p")[0].innerHTML=file.lore01[1];
lore02.getElementsByTagName("p")[0].innerHTML=file.lore02[1];
lore03.getElementsByTagName("p")[0].innerHTML=file.lore03[1];
lore04.getElementsByTagName("p")[0].innerHTML=file.lore04[1];
lore05.getElementsByTagName("p")[0].innerHTML=file.lore05[1];
lore06.getElementsByTagName("p")[0].innerHTML=file.lore06[1];
lore07.getElementsByTagName("p")[0].innerHTML=file.lore07[1];
lore08.getElementsByTagName("p")[0].innerHTML=file.lore08[1];
lore09.getElementsByTagName("p")[0].innerHTML=file.lore09[1];
lore10.getElementsByTagName("p")[0].innerHTML=file.lore10[1];
lore11.getElementsByTagName("p")[0].innerHTML=file.lore11[1];
lore12.getElementsByTagName("p")[0].innerHTML=file.lore12[1];
lore13.getElementsByTagName("p")[0].innerHTML=file.lore13[1];
lore14.getElementsByTagName("p")[0].innerHTML=file.lore14[1];
lore15.getElementsByTagName("p")[0].innerHTML=file.lore15[1];
lore16.getElementsByTagName("p")[0].innerHTML=file.lore16[1];
lore17.getElementsByTagName("p")[0].innerHTML=file.lore17[1];
lore18.getElementsByTagName("p")[0].innerHTML=file.lore18[1];
lore19.getElementsByTagName("p")[0].innerHTML=file.lore19[1];
lore20.getElementsByTagName("p")[0].innerHTML=file.lore20[1];
lore21.getElementsByTagName("p")[0].innerHTML=file.lore21[1];
lore22.getElementsByTagName("p")[0].innerHTML=file.lore22[1];
lore23.getElementsByTagName("p")[0].innerHTML=file.lore23[1];
lore24.getElementsByTagName("p")[0].innerHTML=file.lore24[1];
lore25.getElementsByTagName("p")[0].innerHTML=file.lore25[1];
lore26.getElementsByTagName("p")[0].innerHTML=file.lore26[1];
lore27.getElementsByTagName("p")[0].innerHTML=file.lore27[1];
lore28.getElementsByTagName("p")[0].innerHTML=file.lore28[1];
lore29.getElementsByTagName("p")[0].innerHTML=file.lore29[1];
lore30.getElementsByTagName("p")[0].innerHTML=file.lore30[1];
}
};
xml.open("GET", url, true);
xml.send();
}
}
Note that I have a similar script working fine:
var filename = document.getElementById('filename').innerHTML
var lang = localStorage.getItem('language')
var xmlhttp = new XMLHttpRequest();
var url ="assets/lang/"+lang+"/!"+filename+".json";
var loc = window.location.pathname;
window.onload = check;
function check(){
if (lang === null){
window.location.href = "lang.html";
setTimeout(check, 300);
}else{
setTimeout(pop, 1);
};
function pop(){
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var file = JSON.parse(this.responseText);
if (filename == "index"){
document.getElementsByTagName("title")[0].innerHTML=file.title;
document.getElementById("search").placeholder=file.search;
document.getElementById("settings").innerHTML=file.settings;
}else if (filename == "settings"){
document.getElementById("settings").innerHTML=file.settings;
var info = document.getElementsByClassName("info")[0];
info.getElementsByTagName("h2")[0].innerHTML=file.h2[0];
info.getElementsByTagName("p")[0].innerHTML=file.p[0];
info.getElementsByTagName("p")[1].innerHTML=file.p[1];
info.getElementsByTagName("p")[2].innerHTML=file.p[2];
//
info.getElementsByTagName("h2")[1].innerHTML=file.h2[1];
info.getElementsByTagName("p")[3].innerHTML=file.p[3];
info.getElementsByTagName("p")[4].innerHTML=file.p[4];
//
info.getElementsByTagName("h2")[2].innerHTML=file.h2[2];
info.getElementsByTagName("p")[5].innerHTML=file.p[5];
info.getElementsByTagName("p")[6].innerHTML=file.p[6];
document.getElementById("fileDownload").innerHTML=file.download;
//
info.getElementsByTagName("h2")[3].innerHTML=file.h2[3];
info.getElementsByTagName("h2")[4].innerHTML=file.h2[4];
}else if (filename == "about"){
var info = document.getElementsByClassName("info")[0];
info.getElementsByTagName("p")[0].innerHTML=file.p[0];
info.getElementsByTagName("p")[1].innerHTML=file.p[1];
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
}
Any suggestions?
I want to get a file from client side to parse it into json object and send it to the backend, i am able to parse the file thanks to Sheet-js.
My problem is i can not get files from client side
I am using js, SAPUI5
handleUploadPress: function(oEvent) {
var oFileUploader = this.getView().byId("fileUploader");
if (!oFileUploader.getValue().toString()) {
MessageToast.show("Choose a xlsx file first");
return;
}
var url = "/resources/test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
var data = new Uint8Array(arraybuffer);
var arr = [];
for (var i = 0; i !== data.length; ++i) {
arr[i] = String.fromCharCode(data[i]);
}
var bstr = arr.join("");
var workbook = XLSX.read(bstr, {
type: "binary"
});
var firstSheetName = workbook.SheetNames[0];
var worksheet = workbook.Sheets[firstSheetName];
var json = XLSX.utils.sheet_to_json(worksheet, {
raw: true
});
var jsonStr = JSON.stringify(json);
MessageBox.show("JSON String: " + jsonStr);
};
oReq.send();
},
The answer is:
UploadFile.view.xml
<VBox>
<u:FileUploader id="idfileUploader" typeMissmatch="handleTypeMissmatch" change="handleValueChange" maximumFileSize="10" fileSizeExceed="handleFileSize" maximumFilenameLength="50" filenameLengthExceed="handleFileNameLength" multiple="false" width="50%" sameFilenameAllowed="false" buttonText="Browse" fileType="CSV" style="Emphasized" placeholder="Choose a CSV file"/>
<Button text="Upload your file" press="onUpload" type="Emphasized"/>
</VBox>
UploadFile.controller.js
handleTypeMissmatch: function(oEvent) {
var aFileTypes = oEvent.getSource().getFileType();
jQuery.each(aFileTypes, function(key, value) {
aFileTypes[key] = "*." + value;
});
var sSupportedFileTypes = aFileTypes.join(", ");
MessageToast.show("The file type *." + oEvent.getParameter("fileType") +
" is not supported. Choose one of the following types: " +
sSupportedFileTypes);
},
handleValueChange: function(oEvent) {
MessageToast.show("Press 'Upload File' to upload file '" + oEvent.getParameter("newValue") + "'");
},
handleFileSize: function(oEvent) {
MessageToast.show("The file size should not exceed 10 MB.");
},
handleFileNameLength: function(oEvent) {
MessageToast.show("The file name should be less than that.");
},
onUpload: function(e) {
var oResourceBundle = this.getView().getModel("i18n").getResourceBundle();
var fU = this.getView().byId("idfileUploader");
var domRef = fU.getFocusDomRef();
var file = domRef.files[0];
var reader = new FileReader();
var params = "EmployeesJson=";
reader.onload = function(oEvent) {
var strCSV = oEvent.target.result;
var arrCSV = strCSV.match(/[\w .]+(?=,?)/g);
var noOfCols = 6;
var headerRow = arrCSV.splice(0, noOfCols);
var data = [];
while (arrCSV.length > 0) {
var obj = {};
var row = arrCSV.splice(0, noOfCols);
for (var i = 0; i < row.length; i++) {
obj[headerRow[i]] = row[i].trim();
}
data.push(obj);
}
var Len = data.length;
data.reverse();
params += "[";
for (var j = 0; j < Len; j++) {
params += JSON.stringify(data.pop()) + ", ";
}
params = params.substring(0, params.length - 2);
params += "]";
// MessageBox.show(params);
var http = new XMLHttpRequest();
var url = oResourceBundle.getText("UploadEmployeesFile").toString();
http.onreadystatechange = function() {
if (http.readyState === 4 && http.status === 200) {
var json = JSON.parse(http.responseText);
var status = json.status.toString();
switch (status) {
case "Success":
MessageToast.show("Data is uploaded succesfully.");
break;
default:
MessageToast.show("Data was not uploaded.");
}
}
};
http.open("POST", url, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.send(params);
};
reader.readAsBinaryString(file);
}
I am trying to append an image into a span, it works perfectly outputting the image path as text using:
homeTeamName_span.appendChild(homeTeamName_crest);
However, when trying to wrap image tags around it, it doesn't do anything and no data will load because of it.
What would be the reason for this?
homeTeamName_span.appendChild("<img src='homeTeamName_crest' />");
Function source
window.onload = function() {
var xmlhttp = new XMLHttpRequest();
var url = "http://bushell.net/football/site/includes/webservice.php?service=allfixtures&limit=10&competition=427";
var url2 = "http://bushell.net/football/site/includes/webservice.php?service=allfixtures&limit=10&competition=426"
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
getECL(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function getECL(response) {
var ECL_arr = JSON.parse(response);
var i;
//add 6hrs
var ecl_games = document.getElementById("ecl-games");
for(i = 0; i < ECL_arr.length; i++) {
var gameInfo_container = document.createElement("LI");
ecl_games.appendChild(gameInfo_container);
var homeTeamName_span = document.createElement("SPAN");
homeTeamName_span.className = "text-right";
var homeTeamName_text = document.createTextNode(ECL_arr[i].homeTeamName);
homeTeamName_span.appendChild(homeTeamName_text);
gameInfo_container.appendChild(homeTeamName_span);
var date_span = document.createElement("SPAN");
date_span.className = "d-g";
var date_span_text = document.createTextNode(ECL_arr[i].date);
date_span.appendChild(date_span_text);
gameInfo_container.appendChild(date_span);
var awayTeamName_span = document.createElement("SPAN");
awayTeamName_span.className = "text-left";
var awayTeamName_text = document.createTextNode(ECL_arr[i].awayTeamName);
awayTeamName_span.appendChild(awayTeamName_text);
gameInfo_container.appendChild(awayTeamName_span);
}
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
getPrem(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url2, true);
xmlhttp.send();
function getPrem(response){
var prem_arr = JSON.parse(response);
var prem_games = document.getElementById("prem-games");
for(var j = 0; j<prem_arr.length; j++) {
var gameInfo_container = document.createElement("LI");
prem_games.appendChild(gameInfo_container);
var homeTeamName_span = document.createElement("SPAN");
homeTeamName_span.className = "text-right";
var homeTeamName_text = document.createTextNode(prem_arr[j].homeTeamName);
var homeTeamName_crest = document.createTextNode(prem_arr[j].homeTeamCrest);
homeTeamName_span.appendChild("<img src='homeTeamName_crest' />");
homeTeamName_span.appendChild(homeTeamName_text);
gameInfo_container.appendChild(homeTeamName_span);
var date_span = document.createElement("SPAN");
date_span.className = "d-g";
var date_span_text = document.createTextNode(prem_arr[j].date);
date_span.appendChild(date_span_text);
gameInfo_container.appendChild(date_span);
var awayTeamName_span = document.createElement("SPAN");
awayTeamName_span.className = "text-left";
var awayTeamName_text = document.createTextNode(prem_arr[j].awayTeamName);
awayTeamName_span.appendChild(awayTeamName_text);
gameInfo_container.appendChild(awayTeamName_span);
}
console.log("loop finished");
}
}
this shoud work , if homeTeamName_crest is the path of the picture
$(homeTeamName_span).append("<img src='"+homeTeamName_crest+"' />")
What if you do this?
var homeTeamName_crest = prem_arr[j].homeTeamCrest; // <--- change this line, don't make it a textNode
homeTeamName_span.appendChild("<img src='" + homeTeamName_crest + '/>"); // <--- change this line, we want to interpolate the string as the path to the image
I would like to search a xhr.responseText for a div with an id like "something" and then remove all the content from the xhr.responseText contained within that div.
Here is my xhr code:
function getSource(source) {
var url = source[0];
var date = source[1];
/****DEALS WITH CORS****/
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = self.location.protocol + '//' + self.location.host;
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function () {
var args = slice.call(arguments);
var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
targetOrigin[1] !== cors_api_host) {
args[1] = cors_api_url + args[1];
}
return open.apply(this, args);
};
/****END DEALS WITH CORS****/
var xhr = new XMLHttpRequest();
xhr.open("GET", cors_api_url+url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var resp = xhr.responseText;
var respWithoutDiv = removeErroneousData(resp);
}
else{
return "Failed to remove data.";
}
}
xhr.send();
}
remove div here:
/*This must be in JS not JQUERY, its in a web worker*/
function removeErroneousData(resp) {
var removedDivResp = "";
/*pseudo code for removing div*/
if (resp.contains(div with id disclosures){
removedDivResp = resp.removeData(div, 'disclosures');
}
return removedDivResp;
}
You can dump the response in a div and then search for that div you want empty its content.
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var resp = xhr.responseText;
$('div').attr('id', 'resp').html(resp);
$('#resp').find('disclosures').html('');
//var respWithoutDiv = removeErroneousData(resp);
}
else{
return "Failed to remove data.";
}
}
<script type="text/javascript">
function getNews() {
var xmlhttp = new XMLHttpRequest();
var url = "http://192.168.2.100:7172/SchoolyServiceModel1004/rest/newsservice/news";
xmlhttp.open("GET", url, true);
xmlhttp.setRequestHeader("Content-type", "application/json");
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var news = JSON.parse(xmlhttp.responseText);
showNews(news);
}
}
}
};
function showNews(news) {
var i, ntitle, ncontent, ndate, nid;
for (i = 0; i < news.length; i++) {
ndate = news[i].PublishDate;
**ntitle = cur[i].title;** /// this object i want to use as
id attribute of anchor tag
or li
nid = news[i].id;
ncontent = news[i].content;
var cont = document.getElementById("cont");
var div1 = document.getElementById("div1");
var panelHead = document.getElementById("Heading");
var NewsHead = document.getElementById("NewsHead");
var head = document.getElementById("head");
div1.setAttribute("class", " col-md-3 panel panel-primary");
panelHead.setAttribute("class", "panel-heading");
NewsHead.setAttribute("class", "panel-title");
head.appendChild(document.createTextNode("News Title"));
panelHead.appendChild(head);
panelHead.appendChild(NewsHead);
div1.appendChild(panelHead);
div1.style.marginTop = "10px";
var div2 = document.getElementById("div2");
div2.style.marginTop = "10px";
div2.setAttribute("class", " col-md-9 col-md-offset-0 panel panel-primary");
var panelHead = document.getElementById("NewsDesc");
var Title = document.getElementById("Title");
panelHead.setAttribute("class", "panel panel-heading");
Title.appendChild(document.createTextNode("News"));
panelHead.appendChild(Title);
var ul = document.createElement("ul");
var li = document.createElement("li");
var a = document.createElement("a");
**a.setAttribute("id",ntitle);** /// here i want to use
ntitle object as id
attribute of li
a.setAttribute("href", "#");
a.appendChild(document.createTextNode(ntitle));
li.appendChild(a);
ul.appendChild(li);
div1.appendChild(ul);
cont.appendChild(div1);
cont.appendChild(div2);
$(document).ready(function () {
$("li").click(function () {
$("#cur[i].title").click(function () {
$("#h1").text(ntitle);
$("#p1").text(ncontent);
//p1.setAttribute("class", "jumbotron");
});
});
});
cont.appendChild(document.createElement("hr"));
}
}
</script>
In your for loop couldn't you just construct the li elements as strings and use jQuery's insert function?