I'm trying to automatically show stock results from an external page, using jquery and ajax. I changed my original file to make it simpler. Sadly, it is not working again.. Can anyone see what my problems are? Thank you so much!
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Stocks</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script src="projectstocks.js"></script>
</head>
<body>
<div>
<content id="content">
</content></div>
</body>
</html>
projectstocks.js:
window.onload = function() {
var stocks = [];
var content = document.getElementById("content");
update();
setInterval("getData()", 1000);
}
function getData(data) {
content.innerHTML = "";
var tbod = document.getElementById("stocks");
var myTable= "<table id='table' border='1'>";
for(var i = 0; i < data.length; i++) {
var tr = document.createElement('tr');
var obj = data[i];
for(key in obj){
console.log(key);
var value=(obj[key]);
console.log(value);
content.innerHTML += ("<tr><td>");
content.innerHTML += ((obj[key]));
content.innerHTML += ("<br><br></td></tr>");
}
}
myTable+="</table>";
}
function update() {
$.getJSON('http://shodor.org/~amalani/AjaxTutorial/stocks/stocks.php?symbols=GOOG+CAT+FB', getData);
}
Thanks again! This doesn't have to be very fancy, let me know if there's anything I don't need.
You are trying to write the results to these elements which do not exist in your html:
document.getElementById("stocktable").innerHTML = table;
var d = new Date();
document.getElementById("date").innerHTML = "Last Update: " + d.toLocaleString();
add
<div id="stocktable"></div>
<div id="date"></div>
to your html.
Related
I have an array of email drafts that I got in apps script. I want to show them in a html file in a select element, but it shows up blank when I run it. Code below
code.gs
function doGet(e) {
return HtmlService.createHtmlOutput("index");
}
function doSomething() {
var drafts = GmailApp.getDrafts();
var drafty = [];
for(var i = 0; i < drafts.length; i++){
drafty.push(drafts[i].getMessage().getSubject());
}
Logger.log(drafty);
return drafty;
var select = document.getElementById("select"),
arr = drafty;
for(var i = 0; i < arr.length; i++)
{
var option = document.createElement("OPTION"),
txt = document.createTextNode(arr[i]);
option.setAttribute("value", arr[i]);
option.appendChild(txt);
document.getElementById("select").appendChild(option);
}
index.html
<!DOCTYPE html>
<html>
<head>
<script>
google.script.run.doSomething();
</script>
</head>
<body>
<select id="select" class="addon-select addon-form-input"></select>
</body>
Something like this:
gs:
function doSomething() {
var drafts=GmailApp.getDrafts();
var drafty=[];
for(var i=0;i<drafts.length;i++){
drafty.push(drafts[i].getMessage().getSubject());
}
Logger.log(drafty);
return drafty;
}
html:
<!DOCTYPE html>
<html>
<head>
<script>
google.script.run
.withSuccessHandler(function(A){
var id='select';
var select = document.getElementById(id);
select.options.length = 0;
for(var i=0;i<A.length;i++) {
select.options[i] = new Option(A[i],A[i]);
}
})
.doSomething();
</script>
</head>
<body>
<select id="select"></select>
</body>
</html>
<script>
function makeid() {
var text = "";
var char_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < l; i++) {
text += char_list.charAt(Math.floor(Math.random() * char_list.length));
}
return text;
}
console.log(makeid(8));
makeid(8);
document.write(makeid());
</script>
Hey, guys. I have this code currently in my HTML, I'm wondering how I can have the output of this code printed on the page and then refreshed everytime I click an HTML button. If you have any questions I'll try to answer them best I can.
This worked for me
<div id="content"></div>
<button id="myBtn"></button>
<script>
var btn = document.getElementById('myBtn');
var content = document.getElementById('content');
btn.onclick = function(){
function makeid(l) {
var text = "";
var char_list = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < l; i++) {
text += char_list.charAt(Math.floor(Math.random() * char_list.length));
}
return text;
}
console.log(makeid(8));
var id = makeid(8);
content.innerHTML = id;
}
</script>
Everytime the button is clicked, your function will be triggered and the generated Id will be put inside the <div id="content"></div>
Here is the codepen for testing
Hello everyone !
I really need your help on this because I can't figure out why it doesn't work.
The error as I wrote is :
Uncaught TypeError: playlist1.toHTML is not a function
JS :
function test(){
var playlist1 = new Playlist();
var music1 = new Music('theurl');
var music2 = new Music('anotherUrl');
var container = document.getElementById('results');
container.innerHTML = playlist1.toHTML();
}
var id=0;
function Music(url){
this.id=id+1;
this.url=url;
this.name="unknown";
this.author="unknown";
this.album="unknown";
this.cover="unknown";
}
var nb=0;
function Playlist(){
nb=nb+1;
this.elements = [];
this.nom = 'playlist'+nb;
}
function toHTML(){
var text="";
for(var i=0; i<this.elements.length; i++){
text+= "<li>\n";
text+= "<div>\n";
text+= "<figure class='music' track='"+this.elements[i].getUrl()+"'></figure>";
text+= "<img src='"+this.elements[i].getCover()+"'>\n";
text+= "</div>\n";
text+= "<div>\n";
text+= "<h3>"+this.elements[i].getName()+"</H3>\n";
text+= "<h4>"+this.elements[i].getAuthor()+" - "+this.elements[i].getAlbum()+"</H4>\n";
text+= "</div>\n";
text+= "</li>\n";
}
return text;
}
HTML :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="arrays.js"></script>
</head>
<body>
<button onclick="test()">Make it</button>
<p id="results"></p>
</body>
</html>
I'd be really please if someone could help me solve this problem :)
A class method is not defined like yours. It should be written inside the definition of the prototype of that new class.
var SomeObject = function(data) {
this.data = data;
}
SomeObject.prototype = {
Output: function(dom) {
dom.innerHTML += this.data + "<br/>";
}
}
var a = new SomeObject("value");
a.Output(document.querySelector("#log"));
Take a look at how Mozilla Developer Network teaches OO and you'll be better coding OO in JS, perhaps. =)
You are trying to call toHTML on a playlist, but you have not defined that function on the playlist object.
So in order to use container.innerHTML = playlist1.toHTML();
You need to make that function part of the playlist object.
function Playlist(){
nb=nb+1;
this.elements = [];
this.nom = 'playlist'+nb;
this.toHTML = toHTML;
}
I'm a beginning programmer and I wondered if someone could help me.
I want to get a table with a row and 7 numbers in table data & making the function react. I tried this but it doesn't work, and I've been looking for some time at it now:
<html>
<head>
<script type="text/javascript">
function maaktable () {
alert("Hey!");
var tabdata
= tabrow.appendChild(document.createElement("td").innerText
= amount[i];
var tabrow = tablestart.appendChild(document.createElement("tr");
var tablestart = document.createElement("table");
tablestart;
tabrow;
for (i = 0; i < 6; i++) {
tabdata;
}
}
</script>
</head>
<body>
<button onclick="maaktable()">Begin</button>
</body>
</html>
The problem is it doesn't even alert. What can i do to make this work?
well not sure if this is the intended result but your code does look a little off
this should at least get the alert to show and hopefully get you on the right track
function maaktable () {
alert("Hey!");
var tablestart = document.createElement("table");
var tabrow = tablestart.appendChild(document.createElement("tr"));
for (i = 0; i < 6; i++) {
//tabdata;
tabrow.appendChild(document.createElement("td").innerText(amount[i]));
}
}
Good Evening,
I am having trouble setting up the onkeyup event. I am trying to get it to fire an objects method when a user enters text into the text field. It does not seem to find the object.
I have cut down on the code and have made the following sample:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var ReportModule = new function () {
function ReportObj(id, title) {
this.id = id;
this.title = title;
this.result = "";
this.empno = "";
this.UpdateEmpno = function (empNo, resultBoxID) {
this.empno = empNo;
$(resultBoxID).update("Result: " + empNo);
};
};
var ReportObjArray = new Array();
var test1 = new ReportObj("box1", "First object");
var test2 = new ReportObj("box2", "Second object");
ReportObjArray.push(test1);
ReportObjArray.push(test2);
this.Initialize = function () {
for (i = 0; i < ReportObjArray.length; i++) {
var container = document.createElement("div");
container.id = ReportObjArray[i].id;
container.textContent = ReportObjArray[i].title;
$('#Container').append(container);
var empnoInput = document.createElement("input");
empnoInput.type = "text";
empnoInput.id = ReportObjArray[i].id + "_Empno";
empnoInput.onkeyup = function (event) {
// Update Report Objects empno field
ReportObjArray[i].UpdateEmpno(empnoInput.value,empnoInput.id); // <-------- Undefined here
};
$('#' + ReportObjArray[i].id).append(empnoInput);
var container2 = document.createElement("div");
container2.id = ReportObjArray[i].id + "_result";
container2.style.border = "1px solid black";
container2.style.width = "100px";
container2.textContent = "Result:";
$('#' + container.id).append(container2);
};
};
}
</script>
</head>
<body onload="ReportModule.Initialize()">
<div id="Container"></div>
</body>
</html>
Update: It works when searching for the object in the ReportObjArray and matching the correct object. However, I was wondering if there was a more efficient way instead of having to look through the array each time.
empnoInput.onkeyup = function (event) {
// Update Report Objects empno field
var target_id = document.getElementById(event.target.id).id;
for (j = 0; j < ReportObjArray.length; j++) {
if (target_id = ReportObjArray[j].id) {
ReportObjArray[j].UpdateEmpno(document.getElementById(event.target.id).value,empnoInput.id);
break;
}
}
};
Wrap your for loop code in a closure:
for (i = 0; i < ReportObjArray.length; i++) {
(function(i) {
// code
})(i);
}
Working JS Fiddle:
http://jsfiddle.net/23vkS/