How do I get dynamic content from multiple google sheets (within one google sheet) into the same html form?
In the code below, I dynamically create the html form from a main sheet. I want to add a form select, from a supplemental sheet. I cannot get the form.select to be part of one html form.
EDIT: (1) updated var html to include div's for each row. (2) moved form and table html into the html page directly. Form values are still not lining up correctly. Should I be using HTML Template instead?
<head>
<script type="text/javascript">
function setPageValues () {
//this is working as intended
google.script.run.withSuccessHandler(displayForm).getValuesFromSS();
}
function displayForm (values) {
var colsUsed = [4,5,0,13,15,16,17,18]; //sheet cols for form
var html = "<form><table border=0 width=90%>"; //start the form
//HERE IS THE ISSUE: gets range no problem, but html form is wrong.
//setting return value "html +=" doesn't work!
google.script.run.withSuccessHandler(displayPick).getValuesForRngName('CategoryRole');
//make the rest of the table (this all works fine)
for (var j = 0; j < colsUsed.length; j++){
colUsed = colsUsed[j]
html += "<div id=row><tr><th align=right>" + values[0][colUsed] + ":* </th>";
html += "<td><input></input type=text></td></tr></div>";
}
//close out the table and set the value (this all works fine)
html += "<tr><td></td><td><input type=submit></td></tr></form></table>";
html += "<i>* required form data.</i>";
document.getElementById("forminfo").innerHTML = html;
}
//building the pick list works just fine. results not correct in html
//tried to "return html;" but this didn't work!
function displayPick (values) {
var rows = 10000;
var catUsed = "34-31 21: Supplier";
//find limit of column values
for (var i = 0; i < rows; i++) {
if (values[i] == '') {
var rows = i;
break;
}
}
//build the select field description, and set selected option
html = "<div id=row><tr><th align=right>" + values[0] + ":* </th><td><select>";
for (var i = 1; i < rows; i++) {
if (values[i] == catUsed) {
html += "<option selected>" + values[i] + "<option>";
} else {
html += "<option>" + values[i] + "<option>";
}
}
html += "</select></td></tr></div>";
document.getElementById("formpick").innerHTML = html;
}
</script>
</head>
<body onload="setPageValues()">
<form><table border=0 width=90%>
<div id="formpick"></div>
<div id="forminfo"></div>
</table></form>
</body>
Put a function in your project that opens up other Spreadsheets with "openById"; Then return the data to your form with google.script.run.withSuccessHandler(functionName);
The users on my review type of platform highlight titles (of movies, books etc) in <em class="title"> tags. So for example, it could be:
<em class="title">Pacific Rim</em>
Using jQuery, I want to grab the content within this em class and add it inside a hyperlink. To clarify, with jQuery, I want to get this result:
<em class="title">Pacific Rim</em>
How can I do this?
Try this:
var ems = document.querySelectorAll("em.title");
for (var i = 0; i < ems.length; ++i) {
if (ems[i].querySelector("a") === null) {
var em = ems[i],
text = jQuery(em).text();
var before = text[0] == " ";
var after = text[text.length-1] == " ";
text = text.trim();
while (em.nextSibling && em.nextSibling.className && em.nextSibling.className.indexOf("title") != -1) {
var tmp = em;
em = em.nextSibling;
tmp.parentNode.removeChild(tmp);
text += jQuery(em).text().trim();
++i;
}
var link = text.replace(/[^a-z \-\d']+/gi, "").replace(/\s+/g, "+");
var innerHTML = "<a target=\"_blank\" href=\"http://domain.com/?=" + link + "\">" + text + "</a>";
innerHTML = before ? " " + innerHTML: innerHTML;
innerHTML = after ? innerHTML + " " : innerHTML;
ems[i].innerHTML = innerHTML;
}
}
Here's a fiddle
Update: http://jsfiddle.net/1t5efadk/14/
Final: http://jsfiddle.net/186hwg04/8/
$("em.title").each(function() {
var content = $(this).text();
var parameter_string = content.replace(/ /g, "+").trim();
parameter_string = encodeURIComponent(parameter_string);
var new_content = '' + content + '';
$(this).html(new_content);
});
If you want to remove any kind of punctuation, refer to this other question.
$('em.title').html(function(i,html) {
return $('<a/>',{href:'http://domain.com/?='+html.trim().replace(/\s/g,'+'),text:html});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<em class="title">Pacific Rim</em>
UPDATE 1
The following updated version will perform the following:
Grab the contents of the em element
Combine with the contents of the next element, if em and remove that element
Create a query string parameter from this with the following properties
Remove the characters ,.&
Remove html
Append the query parameter to a predetermined URL and wrap the unmodified contents in an e element with the new URL.
DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'');
return $('<a/>',{href:'http://domain.com/?par='+encodeURIComponent(text),html:$(this).html()});
});
Or DEMO
$('em.title:not(:has(a))').html(function() {
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
UPDATE 2
Per the comments, the above versions have two issues:
Merge two elements that may be separated by a text node.
Process an em element that's wrapped in an a element.
The following version resolves those two issues:
DEMO
$('em.title:not(:has(a))').filter(function() {
return !$(this).parent().is('a');
}).html(function() {
var nextNode = this.nextSibling;
nextNode && nextNode.nodeType != 3 &&
$(this).append( $(this).next('em').html() ).next('em').remove();
var text = $(this).text().trim().replace(/[\.,&]/g,'').replace(/\s/g,'+');
return $('<a/>',{href:'http://domain.com/?par='+text,html:$(this).html()});
});
Actually,if you just want to add a click event on em.title,I suggest you use like this:
$("em.title").click(function(){
q = $(this).text()
window.location.href = "http://www.domain.com/?="+q.replace(/ /g,"+")
}
you will use less html code on browser and this seems simply.
In addition you may need to add some css on em.title,like:
em.title{
cursor:pointer;
}
Something like this?
$(document).ready(function(){
var link = $('em').text(); //or $('em.title') if you want
var link2 = link.replace(/\s/g,"+");
$('em').html('' + link + '');
});
Ofcourse you can replace the document ready with any type of handler
$('.title').each(function() {
var $this = $(this),
text = $this.text(),
textEnc = encodeURIComponent(text);
$this.empty().html('' + text + '');
});
DEMO
I am attempting to display recent blog posts from a wordpress blog on my non-wordpress HTML site with Google Feed API.
I managed to display the feed but now I am stuck getting the featured images to display as well. Currently it only displayes the list of the 10 recent "headlines" if you will.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"> </script>
<script type="text/javascript">
google.load("feeds", "1")
</script>
<script type="text/javascript">
var feedUrl = "http://www.harbordev.com/blog/feed/";
var feedContainer=document.getElementById("feedContainer");
$(document).ready(function() {
var feed = new google.feeds.Feed(feedUrl);
feed.setNumEntries(10);
feed.load( function(result) {
list = "<ul>";
if (!result.error){
var posts=result.feed.entries;
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" + posts[i].title + "</a></li>";
}
list+="</ul>";
feedContainer.innerHTML = list;
}
else {
feedContainer.innerHTML = "Unable to fetch feed from " + feedUrl;
}
});
});
</script>
</head>
<body>
<section class="section swatch-white">
<div class="container">
<div class="row">
<div class="col-md-12" id="feedContainer">
</div>
</div>
</div>
</section>
</body
How do I show the images as well? On a different entry on here I saw a suggestion like this:
var bmfx = entry.mediaGroups[0].contents[0].thumbnails[0].url;
Should this work, where would I insert it? My Javascript skill is mediocre unfortunately, therefore if someone can point me in the right direction or assist with some code I would greatly appreciate it.
You can see the documentation of the resulting JSON here. The images are in the content field (posts[i].content):
for (var i = 0; i < posts.length; i++) {
list+="<li><a href='" + posts[i].link + "'target=_blank'" + "'>" +
posts[i].title + "</a><p>" + posts[i].content + "</p></li>";
}
If you want to show only the images, you could do that with jQuery
var images = "";
$(posts[i].content).find('img').each(function() {
images += this.outerHTML;
});
And then instead of posts[i].content, append images variable to the list
This is all so confusing, I've seen so many examples of how to do different things and cannot seem to find a valid example for what I am trying to do.
I'm using the YQL for the stock quotes only to get just the major indexes, DOW S&P 500 and NASDAQ.
The project is getting the data and working, but I need to determine if the stock value is returning + or - (up or down).
if the market is up or flat, I want to add a CSS class to set it to green, if it is down, I want to set a CSS to red.
One other issue, this only seems to work when I place the function between the head and body, not in the head, not in the body.
<script type="text/javascript">
function stock_quotes(obj)
{
var items = obj.query.results.quote;
var output = '';
var num_quotes = items.length;
items[0].symbol = "DOW ";
items[1].symbol = "NASDAQ ";
items[2].symbol = "S&P 500 ";
//var posquote = {"\d\.?\d{0,9}\.\d{0,9}\s\+"};
//var negquote = {"\d\.?\d{0,9}\.\d{0,9}\s\-"};
for (var i = 0; i < num_quotes; i++) {
var link = items[i].url;
var symbl = items[i].symbol;
var Change_PercentChange = items[i].Change_PercentChange;
var LastTradePriceOnly = items[i].LastTradePriceOnly;
output += "<table><tr><td>" + "<a href='" + link + "'>" + symbl + "</a>" + LastTradePriceOnly + " " + Change_PercentChange + "</td></tr></table>";
}
// Place news stories in div tag
document.getElementById('results').innerHTML = output;
}
This is the HTML with the query
<div id='results'></div>
<script type="text/javascript" src='http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22DOW%22%2C%22%5EIXIC%22%2C%22%5EGSPC%22)%0A%09%09&format=json&diagnostics=true&env=http%3A%2F%2Fdatatables.org%2Falltables.env&callback=stock_quotes'></script>
Ideally I'd like to predefine the html elements which would make it easier to set the css class but one headache at a time.
In the end, this seemed to work just fine
var match_nas_neg = nas_result.match(/\-/);
I'm having trouble on putting Razor inside the HTML5.
I can't get the value of id.
I placed the Razor inside the body tag.
This is what it looked like:
#using ThisIsNamespace
#{
VBEncrypt enc = new VBEncrypt();
if(IsPost)
{
if(Request["txtUserID"] != null || Request["txtPassword"] != null)
{
Session["USER"] = Request["txtUserID"];
Session["PASSWORD"] = Request["txtPassword"];
Session["ID"] = enc.Encrypt("" + Session["USER"] + "]#USERID#[" + Session["Password"] + "");
}
}
}
and then assign the Session["ID"] to a variable: this is located in the head tag.
<script type="text/javascript">
var id = #Session["ID"];
</script>
I'm not getting any error but it seems that it fails to assign the session to the variable.
Please let me know if my question is not clear.
Everyones help would be very much appreciated.
Thank you in advance ;)
Simple test:
#{
Session["ID"] = 1;
}
Then:
<script type="text/javascript">
var id = #Session["ID"];
var id2 = #Session["ID2"];
</script>
Renders as:
<script type="text/javascript">
var id = 1;
var id2 = ;
</script>
One of the checks fails. IsPost is false OR Request["txtUserID"] and Request["txtPassword"] are null