Read/Query Google Spreadsheet in JavaScript in HTML page - javascript

I am almost ashamed of asking this question since it must be super simple but I have looked everywhere on the web and I can't find it. The fact that Google recently changed the URL of its spreadsheets does not help.
Essentially, I am trying to read one value in a Google Spreadsheet and display it on my website. For instance, if I take this spreadsheet: https://docs.google.com/spreadsheets/d/1pzu6_-1rctgr_Zzr73Q1ZhJJrE0Ar8OH-uCaK50_V4w/edit#gid=0. How do I show in my html page some like < p > Current Temperature is < script .... > ... < /script >< /p > ?
I already know how to use google.visualization and I am showing historical trends on my website, but I simply want to include the current temperature on a separate page. I figure we can do this in two ways, first by directly querying with a specific URL or by using an API. But I have no idea how to do this.
Any help would be greatly appreciated.
Thank you!

I'm sorry to see that this post gets little attention. I ended up using google.visualization to read the last value of the spreadsheet. I think it's a little overkill, but it works.

I think your best bet would be to use Google Apps Script. You embed this script within the spreadsheet and it runs automatically, even if you don't have it open. (Documentation: https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet). From what you've said above, I guess you want to do something like this:
When the Date Changes (You can set triggers in apps script)
Find the date in column A and grab the row number
Find the cell on that row in column B (Temp)
Get the value of that cell and pass it to your website.
Unfortunately I'm not sure how to solve your exact problem. Perhaps this will be a starting block or somebody else can take it from here. There is lots of documentation for apps script and there are plenty of Stack Overflow posts!

Related

How to repeat text from one page to another to reduce time in updating every month

I've been looking everywhere and I can't seem to find exactly what I'm looking for, I'm starting to think I should be looking at some kind of Javascript?
Basically, I have an amount £1,000,000 displayed over an image button and I need this repeated on a different page (The page the button leads to).
As I've never done this before I'm not sure where to look or what I need to be looking at as I'm a novice in this area.
Any help would be appreciated.
If the value is static so you can use content css property :
https://developer.mozilla.org/fr/docs/Web/CSS/content
If the amount is dynamic you should pass variable through Url or via form.
As I don't have a clue as to what you're setup is, i'll make some assumptions:
a static HTML site
no javascript frameworks (so no jQuery or jqLite etc)
with these assumptions you should start by looking up url attributes as a way to communicate basic information between pages.
As an example, the button href should look something like this:
/link-to-page?amount=1000000
then you grab the amount on the new page - with javascript - looking in the window.location object
This is a good resource

Mottie jQuery Tablesorter filters not loading on the page

I'm having a terrible hard time at trying to get the Mottie Tablesorter plugin to work properly on my HTML page.
I'm designing the front end of a website for someone, and I need the advanced filters provided with this plugin:
http://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-1.html#demo
I have downloaded the files in .zip format, extracted them and placed them in my project, and made sure all the links work properly and that the page can read them.
I have copy/pasted the stuff from the demo with the multiple types of filters across all the columns (in the code quotes) into my HTML page.
However, the second table header row inside the table header doesn't appear.
I can't figure out what it is that I'm doing wrong.
Here's a screenshot of what gets rendered on the page + the offending code inside the web inspector of Safari: http://puu.sh/dqzNX.png
As you can see, the second table header looks like it is trying to display, but it's empty?
And it seems like it generates a search for searching by text, but is set to hidden (I don't know why)
And it also generates the correct amount of TH's, but all of them (apart from the first one) are empty!!
I've been banging my head against a wall over this for 4 days now and have no clue!
Can anyone else get this demo to work properly?
Many thanks for taking the time to read all of this!
Looks like I must not have been pulling jQuery UI into my project properly, as when I started from scratch it all looks like it's working now! -- My bad, thanks for the help though, great table filtering!
In my haste I also seemed to have put a css CDN into a script src tag, causing some style errors where the date picker was below the table before it had been selected and had a transparent background. That had me stumped for a good 20 minutes until I realised my mistake!

Adding hyperlinks into xml file

I purchased a script online that's no longer supported and I just need one last functionality to finish off my project. One detail the client needs is to have a line of text link to another page in the site.
I do not know a whole lot about xml, but I understand it doesn't support html to include hyperlinks.
This is a quiz where users must answer specific questions in order to move on to the next step. It's fed into a div by a js file, I think, but I don't understand how it works. I'm not going to post any code just yet as I'm just reaching out for some advice right now and if what I want to do is even possible.
Is there some kind of a workaround? I've Googled plenty of sites with code chunks and have done a lot of experimenting, but I mostly just break the page the xml displays on.
Thanks.
Dont use the actual xml syntax of tags like <a></a>. Better replace these with other symbols like [a][/a]. When you output the code, simply replace [ and ] with < and >
You replace code before you put it into a div could look like this:
xmlAsString.replace(/\[/g,"<").replace(/\]/g,">");
edit:
I totally forgot about CDATA.
Forget my previous answer. Just add the <![CDATA[...]]> Tag around the anchor in your XML:
<![CDATA[link]]>

asp.net GetElementByid().value element/property not available

Here's another one that's got me ripping what's left of my hair out.
My latest asp.net page is something I just threw together for an in-house database tool. It uses the standard VS 2010 design template, which means it uses the site.master page. I mention this because it may be relevant to my problem.
I'm using asp:textbox controls instead of input type="text". When one textbox 'blurs,' I need to run a sub in code-behind that will do a database lookup based on the information typed in the textbox.
Everything I see about this is that I need to add a asp:hiddenfield to trigger the code-behind event to do the lookup. So I use document.GetElementById method in a JavaScript script to set the value in the hidden field. What it's supposed to do is: document.GetElementById('HiddenInfo').value = "yada-yada".
My problem is that the VS development environment doesn't recognize the .value property for GetElelmentById command. For example, as is its wont, VS will give code hints as you type. When I get to where I want to insert the .value parameter, it doesn't show up on the list of suggestions. See illustration:
As you can see, typing the v doesn't bring up the .value parameter.
I've tried getting it by ClientID and by using jquery, and nothing works. The crazy thing is that I have done this before with anther web page I developed, but the only difference is that one did not have a site.master page.
I've spent hours trying to find the answer online, and nothing is quite exactly the same as my problem.
Any ideas?
Thanks!
Well that's an asp .net element, so your going to have to get its clientid I believe. Here it is in jquery:
$('#<%=HiddenInfo.ClientID %>').val();
Hours and hours later, I finally found the answer. In the JavaScript function that changes the value of the HiddenInfo field, one line is added that (I guess) forces a postback, which then fires the _ValueChanged event in code behind:
<script language="javascript" type="text/javascript">
function CheckCC() {
document.getElementById('HiddenInfo').value="YES";
<%= ClientScript.GetPostBackEventReference(HiddenInfo, "") %>;
}
I dug up the answer here.
Seems like a pretty obscure solution.
The odd thing is that in a previous asp.net design of mine, this wasn't necessary. That's what was really confusing me, and I still don't understand it. But at least I can move forward now.
Thanks everyone for your suggestions.

Chrome extension for manipulating webpage by adding an icon next to matched links

Hello i want to write an extension myself and looking for guides/tutorials. I have never created one but i am good with js and html/php.
I need a tutorial/sample code, and here is what i want to do:
when an extension is loaded, i want to add icon next to the google search results (matched links). What it would do is, it will check all the link in a webpage by matching them with a database (php server mysql) and if a match of a domain is found, then it will simply add an icon next to that link (by ofcourse manipulating dom).
Seems like a fairly simple task to do. So if anybody can help me by showing me a correct path or if there is any similar extension already available to learn from, then please advice.
I would be very grateful, thanks!
http://developer.chrome.com/extensions/getstarted.html
Have a browse through this. You'll likely get the hand of it if you're proficient with JS.

Categories

Resources