We Keep Coding

Post JSON data in a page, from an URL (dynamic data)

I'm trying to post some mailing campaign statistics in a webpage on a website I'm building with Wordpress. I need the statistics to update on their own as data changes, so instead of parsing a JSON string directly I want to use an URL so the data is continually being fetched from the Mailify (mailing service I'm using) server.
I have some Pascal programming experience but I'm new to javascript and I've been struggling a lot with this particular problem. Because I'm getting desperate, I figured I'd try asking for help.
I've figured out how to request the data from the URL (although I forgot how I did it last time and rn I'm not able to get past the pop-up that requests the credentials), and also how to post on the page using JS, which would be something basic. But I can't figure out how to fetch the data from JSON in real time. I've seen so many different examples but they're all a little different and not really similar to this situation.
Some useful data:
API Key: 8RdZ1SkxTeWGlk2T049KOw
Account ID: 5c7650c911ce626a6371c1b5
Mailing campaign ID: TZi4oEiSRDCqciu-vGV98A
JSON URL: https://mailifyapis.com/v1/reports/TZi4oEiSRDCqciu-vGV98A
JSON URL I'm using to try and include the key and ID: https://mailifyapis.com/v1/reports/TZi4oEiSRDCqciu-vGV98A&accountId=5c7650c911ce626a6371c1b5&apiKey=8RdZ1SkxTeWGlk2T049KOw (It's still giving me a pop-up)
This is the Mailify documentation page: http://developers.sarbacane.com/#statistiques (have to translate with Google, they have no translation of their own)
I've tried understanding how curl works but I have to install some stuff and I thought I could get around the problem without it.
Here's what I have tried (I've just been probing the syntax, mostly):
<script>
<p id="demo"></p>
var text = 'https://mailifyapis.com/v1/reports/TZi4oEiSRDCqciu-vGV98A&accountId=%225c7650c911ce626a6371c1b5%22&apiKey=%22w_S31uj2RIGHVENnRbD4xw%22';
var obj = JSON.parse(text);
obj.opens = eval("(" + obj.clicks + ")");
document.getElementById("demo").innerHTML = obj.opens + ", " + obj.clicks();
</script>
I realize it doesn't work like this but that was my last attempt. I can't figure out what I should be doing.

Simple web GUI to capture user data

I need to develop a simple web page that accepts user information( name, age, birthdate, etc) and saves the data to a CSV or a text file to the server. I currently use Google sheets, but I need something that's more customizable and something that does some simple error checking. Are there any open source frameworks out there that I can use to put something together in a couple hours? I have a mechanical engineering background, and I'm not too familiar with web technologies. Any pointers will be greatly appreciated.

jQuery
JavaScript:
function saveUserData(url, data) {
var csv = [], // the array of values
del = "="; // the "delimiter" or "separator"
function handle(string) {
return encodeURI(string)
.replace(/,/g, "%2c");
}
for(var property in data)
csv.push(property + del + handle(data[property]));
// "name=John Doe,dob=Jan 1%2c 2000"
$.post(url, {data: csv.toString()})
.done(function(returned_data) {
// if you need this later
}, "json");
// "url" the the url to send the data to
// "data:" will likely be determined by the server you're using
// "json" will make "returned_data" a JSON object (if the server supports it)
}

Tesla88,
In your case, you need to write a server-side script. Below are 3 links that will show you how to
open, write, and close a file.
That's how far as I would elaborate on my answer, you need to show us that you actually did the work, and if you ran into issues, you can ask here again.
I hope the above helps.
-Anthony

How do I Autolink or add links to Facebook API posts

I'm using the Facebook SDK for .Net http://facebooksdk.net/.
The query I am running against the Facebook API returns a list of posts that a public user has made.
The results for the query return are in plain text.
How do I update the URLs and Hashtags so that they are automatically wrapped in links (a href) so that they can be clicked?
For twitter I've used https://github.com/twitter/twitter-text/tree/master/js
This is my code:
var client = new FacebookClient(ConfigurationManager.AppSettings["appToken"]);
dynamic response = client.Get("somePublicUser?fields=posts.limit(1){message}");
var post = response.posts.data[0].message;
The message content is: "Happy #WorldTheatreDay! \n\nWhat's the best show you've ever seen?"
I'd love to see it be something like: ""Happy #WorldTheatreDay! \n\nWhat's the best show you've ever seen?"

I ended up using the Twitter JavaScript tool: https://github.com/twitter/twitter-text/tree/master/js
And just replacing Twitter's URLs for Facebooks alternate versions.
twttr.txt.autoLink("Click this link http://www.google.com", {
hashtagUrlBase: "https://www.facebook.com/hashtag/",
usernameUrlBase: "https://www.facebook.com/",
listUrlBase: "https://www.facebook.com/"
});

Altering the DOM with the Play! Framework

Hello again StackOverflow.
I've been tasked with modifying a website that runs on Scala's Play! framework and Twitter Bootstrap. I've hit a roadblock concerning altering the DOM. I need to accomplish the following:
(The page being talked about takes user input and passes the server a Form, which if
valid writes the mapped Data in the Form to a database.)
Have the user choose a category from a drop-down. This particular drop-down has nothing to do with the Form.
Based on their choice, query the database for all objects of a certain type that relate to the chosen category via a foreign key.
Alter the DOM (that is, show without reloading the page) to display those objects for the user to select them. Their selections are added to the Form.
Submit the Form, write to the database, etc.
Questions:
Is this a good way to go about what I'm trying to accomplish?
If so, is there a way to alter the DOM via Scala/Play HTML templates without reloading the page?
If that's not possible, what ilk of manually written Javascript is necessary?
Admissions:
I have very little experience with web development other than Play.
I have very little experience with Javascript.
Resources I've been looking at:
This SO post
Play docs on Javascript routing
Scala.js
Thank you!

For anyone who might come upon this in future, the short answer is Javascript.
Long answer:
To do any AJAX work, you'll need a method like the following in your top-level Controller to set up Javascript routing:
def javascriptRoutes = Action { implicit request =>
Ok(
Routes.javascriptRouter("jsRoutes")(
SomeOtherController.someMethod // Returns a JsValue!
)
).as("text/javascript")
}
Then in the HTML template (*.scala.html) which will contain some AJAXy Javascript:
<script type="text/javascript" src="#routes.ApplicationController.javascriptRoutes"></script>
And finally in your actual JS file (assuming you're using jQuery):
$("someSelector").click(function() {
// Notice that this matches the method name that exists in Scala!
// Make sure to pass `someMethod` what it needs.
var req = jsRoutes.controllers.SomeOtherController.someMethod(...)
$.ajax({
url: req.url,
type: req.type,
success: function(json) {
// DOM manipulation, etc., here.
},
error: function(xhr, status, errorThrown) {
console.log( "Error: " + errorThrown );
console.log( "Status: " + status );
console.dir( xhr );
}
}); // ajax
}); // handler

How to Call Google Apps Script from Web Page

Have searched high and low for this. I have a web page of basic HTML/CSS/JS. I want users to be able to visit the page and upon opening page, a call is made to a google script I made which takes information from a spreadsheet and displays some of it on the page. I am hoping I don't have to do any fancy set up like in Google's tutorials because none of them were helpful to me.
My Webpage ----> Google Script ----> Google Spreadsheet
My Webpage <---- Google Script <---- Google Spreadsheet
Users should be able to select an item shown on the webpage (item populated from spreadsheet) and click a button which will allow users to enter a new page with a URL derived from the selected item.
This is essentially a chat room program where the chat rooms are stored on a spreadsheet. I want users to be able to create a new chat room as well which should update the google spreadsheet.

Look into using the GET parameters. https://stackoverflow.com/a/14736926/2048063.
Here's a previous question on the topic.
You can access the parameters passed by GET in your doGet(e) function using e.parameter. If you call http://script.google......./exec?method=doSomething, then
function doGet(e) {
Logger.log(e.parameter.method);
}
doSomething will be written to the log, in this case.
Returning data from the script can be done using the ContentService, which allows you to serve JSON (I recommend). JSON is easiest (in my opinion) to make on the GAS end, as well as use on the client end.
The initial "populate list" call would look something like this. I will write it in jQuery because I feel that is very clean.
var SCRIPT_URL = "http://script.google.com/[....PUT YOUR SCRIPT URL HERE....]/exec";
$(document).ready(function() {
$.getJSON(SCRIPT_URL+"?callback=?",
{method:"populate_list"},
function (data) {
alert(JSON.stringify(data));
});
});
And the corresponding GAS that produces this.
function doGet(e) {
if (e.parameter.method=="populate_list") {
var v = {cat:true,dog:false,meow:[1,2,3,4,5,6,4]}; //could be any value that you want to return
return ContentService.createTextOutput(e.parameter.callback + "(" + JSON.stringify(v) + ")")
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
}
This method is called JSONP, and it is supported by jQuery. jQuery recognizes it when you put the ?callback=? after your URL. It wraps your output in a callback function, which allows that function to be run on your site with the data as an argument. In this case, the callback function is the one defined in the line that reads function (data) {.