quick question, i'm almost there.
I have an express server that send a random string (for testing purpose) each time I make a GET on /value :
.get('/value', function(req, res){
res.send(un());
})
And I have a Polymer element that make ajax request through (v1.4.4) it works really well when I do the call once, but I dont understand how to make the call automatically.
Here is the element :
<!DOCTYPE html>
<link rel="import" href="./../bower_components/polymer/polymer.html">
<link rel="import" href="./../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="neito-photoresistor">
<template>
<style>
</style>
<span>Ambient luminosity = <span>{{lum_pct}}</span> %</span>
<iron-ajax id="ajaxValueUpdater" url="http://localhost:3000/value" on-response="_updateValue" handle-as="text" debounce-duration="500">
</iron-ajax>
</template>
<script>
Polymer({
is: 'neito-photoresistor',
properties: {
lum_pct: {
type: String,
value: 'uniqid waiting to change...',
reflectToAttribute: true
}
},
ready: function() {
this.$.ajaxValueUpdater.generateRequest();//Launch the request once and it is working
},
_updateValue: function(event){
this.lum_pct = event.detail.response;//It work
}
});
</script>
</dom-module>
So I tried with setInterval(), with async() and with while(true)(really a bad idea)
Here are my tries and the error given :
ready: function() {
this.async(this.$.ajaxValueUpdater.generateRequest(), 2000);
},
Error : Uncaught TypeError: callback.call is not a function
at polymer.html:1315
Other try :
ready: function() {
setInterval(this.$.ajaxValueUpdater.generateRequest(), 2000);
},
Error : VM93:1 Uncaught SyntaxError: Unexpected identifier
And the last one, I was sure it was going to work :
ready: function() {
var ajax = this.$.ajaxValueUpdater;
setInterval(function(ajax){
ajax.generateRequest();
}, 2000);
},
Error : Uncaught TypeError: Cannot read property 'generateRequest' of undefined
at neito-photoresistor.html:26
(Same error if replace the last example with this.async)
I know I'm at one line of the solution. Could someone help me ?
Change your ready function as follow:
ready: function() {
var ajax = this.$.ajaxValueUpdater;
setInterval(() => {
ajax.generateRequest();
}, 2000);
},
Related
Im trying to refresh a clients webpage (using a router) and everywhere I look I see something along the lines of using res.redirect(same page link of some sort), however for some reason this isnt working for me, do you know of any alternatives?
my code looks something like this
router.post('/sendSnippet', function (req, res) {
req.on('data', function(data) {
User.findOne({email: req.user.email}).then((userToEdit) =>{
if(userToEdit){
var newSnippet = {
"types":[],
"code": data.toString()
}
userToEdit.snippets.push(newSnippet)
userToEdit.save().then(()=>{
//refresh here
res.redirect('/profile/');
})
}
})
})
});
thanks for any help in advance
Assuming you are trying to force-reload a client's browser tab for your website, I don't think you can do that server-side.
You can use meta http-equiv or the Refresh HTTP header to tell the client's browser to refresh the page after some time or use client javascript to refresh the page:
Router:
router.post("/example", (req, res) => {
res.header("Refresh", "10"); // tells the browser to refresh the page after 10 seconds
res.send("your data");
});
Meta:
<head>
<!-- Refresh after 10 seconds -->
<meta http-equiv="refresh" content="10">
</head>
Javascript + html:
<html>
<body>
<script>
// reloads after 10 seconds
setTimeout(() => {
location.reload();
}, 10000);
// or you could have some kind of API to tell when to refresh the page
function check() {
const x = new XMLHttpRequest();
x.open("GET", "some path");
x.send();
x.onload = function() {
if (x.response === "done") {
location.reload();
} else {
setTimeout(check, 1000);
}
}
}
check();
</script>
</body>
</html>
so I am using electron to build an app.
I need to use "fs", but since I can't require it, because require doesn't work in electron, I'm stuck.
I already tried settings "nodeItegration: true" but it still won't work, also have I tried using a preload script but it still doesn't work. Maybe I have done something wrong with the preload script?
Code is below.
main.js
const electron = require("electron");
const url = require("url");
const path = require("path");
const {app, BrowserWindow} = electron;
let MainWindow;
app.on("ready", function(){
MainWindow = new BrowserWindow({
webPreferences: {
nodeIntergration: true,
preload: path.join(app.getAppPath(), 'preload.js')
}
});
MainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index.html"),
protocol:"file:",
slashes: true
}));
});
console.log(require.resolve('electron'))
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CommendBot UI</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<button class="safeData-button" onclick="safeData()">Safe</button>
</div>
</div>
<script>
// You can also require other files to run in this process
</script>
<script src="main.js"></script>
<script src="preload.js"></script>
</body>
</html>
preload.js
function safeData() {
var fs = require("fs");
var sampleObject = {
.......(some JSON data)
}
fs.writeFile("./object.json", JSON.stringify(sampleObject, null, 4), (err) => {
if (err) {
console.error(err);
return;
};
console.log("File has been created");
});
}
So whats basically not working, is my function call from my "Safe" button, which is calling the function to fs.writeFile and write a JSON file.
I am sorry for posting the whole code, not sure if it is more helpful or not.
Thanks for answers, in advance!
The problem is most likely a simple typo:
MainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true, // Note spelling!
preload: path.join(app.getAppPath(), 'preload.js')
}
});
In an Express-based app, I'm running an async function to fetch image source from a database and render them into a Nunjucks view engine
Nunjucks is rendering the following in the DOM
<img src="[object Promise]">
I have already enabled Nunjucks's async rendering with web: { async: true } and enabled the nunjucks async api with a callback like so
// controller.js (KeystoneJS app)
view.render('index', function (err, res) {
console.log('err at index render', err); // undefined
return res;
});
How can i get the resolved value of my async function?
As I understand it, Nunjucks doesn't support asynchronous render directly. You can use asynchronous filters to get it. Maybe I'm wrong.
Imho, use feature with Be Careful! mark is a not good idea.
// template.njk
Hello {{user_id | find | attr('name') }}!
// app.js
var nunjucks = require('nunjucks');
var env = nunjucks.configure();
// Async filter
env.addFilter('find', function(a, cb) {
setTimeout(function () {
cb(null, {
name: 'Smith'
});
}, 10);
}, true)
// Sync filter
env.addFilter('attr', function(obj, attr) {
return obj && attr && obj[attr];
});
env.render('template.njk',
{user_id: 1}, // pass sync vars
function(err, res) {
if (err)
return;
console.log(res);
return res
}
);
I don't know about nunjucks, but you can implement async functionality regardless of the view engine being used. To show the idea, I tried to reproduce your situation. I created an HTML file named index.html with an img tag without any src attribute:
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Reproduce</title>
</head>
<body>
<img id='bg'></img>
<script src='./so.js'></script>
</body>
</html>
I have a <script> tag in my HTML which links to my so.js file shown below by which an image is requested by sending a HTTP request to NodeJS/Express server:
getImage();
function getImage(){
// Get an image by its name as URL parameter
fetch('/bg/background.jpg',{
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
}).then(result=>{
return result.blob()
}).then(result=>{
console.log('result -> ', result)
document.querySelector('#bg').src=URL.createObjectURL(result)
document.querySelector('#bg').style.width='200px'
}).catch(err=>{
console.log('err -> ', err)
})
}
Here is my NodeJS/ExpressJS code inside a file name server.js:
express=require('express')
bodyParser=require('body-parser')
path=require('path')
fetch=require('node-fetch')
server=express()
//Body-parser middleware
server.use(bodyParser.json())
server.use(bodyParser.urlencoded({extended:false}))
server.use(bodyParser.raw())
//Set static path
server.use(express.static(path.join(__dirname,'public')))
server.get('/',(req,res)=>{
res.render('index.html')
})
// Pick a file on hard disk
// and send it as "Blob" to the browser
server.get('/bg/:name',(req,res)=>{
var options = {
root: __dirname + '/public/',
dotfiles: 'deny',
headers: {
'x-timestamp': Date.now(),
'x-sent': true
}
};
var fileName = req.params.name;
res.sendFile(fileName, options, function (err) {
if (err) {
next(err);
} else {
console.log('Sent:', fileName);
}
});
})
server.listen('8000',()=>{
console.log('Server listening on port 8000...')
})
As can be seen, I'm doing my async communication between browser and server by implementing fetch API and without even touching the view engine.
I just wanted to provide an alternative idea to use fetch API and do the async HTTP communications with it regardless of any view rendering engine that is being used.
My browser will ring, but Im unable to accept or reject the call. The accept and reject buttons do not show when I receive an incoming call. Am I missing something in my code? Need help!
my snippet is:
<!DOCTYPE html>
<html>
<head>
<title> Screenpop </title>
<script type="text/javascript"
src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<head>
<link href="/images/stylesheets/favicon.ico"
type="image/x-icon" rel="icon" />
<link href="/stylesheets/playusclient.css"
type="text/css" rel="stylesheet" />
<script type="text/javascript">
var socket = io.connect();
$(function() {
$(".call").on("click", function() {
// The properties of this object will be sent as POST
// Parameters to URL which generates TwiML.
Twilio.Device.connect({
CallerId:'<%= phone_number %>' ,
// Replace this value with a verified Twilio number:
// https://www.twilio.com/user/account/phone-numbers/verified
PhoneNumber:$("#number").val() //pass in the value of the text field
});
});
$(".hangup").on("click", function() {
Twilio.Device.disconnectAll();
});
/* Create the Client with a Capability Token */
Twilio.Device.setup('<%= token %>', {debug: true});
/* Let us know when the client is ready. */
Twilio.Device.ready(function (device) {
$("#log").text("Ready");
});
Twilio.Device.incoming(function(connection) {
$( "#dialog-confirm" ).dialog({
resizable: false,
modal: true,
autoOpen: false,
buttons: {
"Accept": function() {
connection.accept();
$("#log").html("Call answered!");
$( this ).dialog( "close" );
},
"Reject": function() {
connection.reject();
$("#log").html("Call rejected! Awaiting next call.");
$( this ).dialog( "close" );
}
}
});
$("#log").html("Incoming call from " + connection.parameters.From);
socket.emit("incoming",connection.parameters.From);
});
Twilio.Device.disconnect(function(connection) {
$("#log").html("Ready");
});
/* Report any errors on the screen */
Twilio.Device.error(function (error) {
$("#log").text("Error: " + error.message);
});
Twilio.Device.connect(function (conn) {
$("#log").text("Successfully established call");
});
socket.on('foundPerson', function(data) {
$("#dialog-confirm").html("<i>" + data.number + "
</i><br /><b>" + data.name + "</b><img src='" +
data.photo + "' />");
$( "#dialog-confirm" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog-confirm" title="Receive Call?" style="display: none">
</div>
<button class="call">
Call
</button>
<button class="hangup">
Hangup
</button>
<input id="number" type="text" placeholder="Enter a number like
+16519998888"/>
<div id="log">Loading pigeons...</div>
</body>
</html>
Twilio developer evangelist here.
I think you may be opening your JQuery UI dialog incorrectly here.
What you want to do is set up the dialog outside of the incoming call event and then, when you get the call event, open the dialog.
So, it should be a bit more like this:
<script type="text/javascript">
var socket = io.connect();
// set up the dialog
$(function() {
var dialog = $("#dialog-confirm").dialog({
resizable: false,
modal: true,
autoOpen: false,
buttons: {
"Accept": function() {
Twilio.Device.activeConnection().accept();
$("#log").html("Call answered!");
$( this ).dialog( "close" );
},
"Reject": function() {
Twilio.Device.activeConnection().reject();
$("#log").html("Call rejected! Awaiting next call.");
$( this ).dialog( "close" );
}
}
});
// do other Twilio.Device setup here
Twilio.Device.incoming(function(connection) {
// open the dialog
dialog.dialog("open");
$("#log").html("Incoming call from " + connection.parameters.From);
socket.emit("incoming",connection.parameters.From);
});
// do other Twilio.Device setup here
</script>
Let me know if that helps at all!
Trying to make sure that request has completed before rendering page
Overview of app - submit for with code, make request, populate results page
//Index.js
var response = require('./requestMapping')
// home search page
exports.index = function(req, res){
res.render('index', { stationDisplay: response.station_id, test: 'rob' });
};
**//post from form to call METAR service
exports.post =('/', function(req, res, next) {
response.getMETAR(req.body.query,function(){
res.render('results', {
stationDisplay: response.station_id,
test: 'rob'
});
});
})**
//Index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= stationDisplay %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>Enter ICAO code to get the latest METAR</h1>
<form method="post" action="/">
<input type="text" name="query">
<input type="submit">
</form>
</body>
</html>
Module to call webservice - requestMapping.js
/**
* #author robertbrock
*/
//Webservice XML
function getMETAR(ICAO){
var request = require('request');
request('http://weather.aero/dataserver_current/httpparam?datasource=metars&requestType=retrieve&format=xml&mostRecentForEachStation=constraint&hoursBeforeNow=24&stationString='+ICAO, function(error, response, body){
if (!error && response.statusCode == 200) {
var XmlDocument = require('xmldoc').XmlDocument;
var results = new XmlDocument(body);
console.log(body)
console.log(ICAO)
exports.station_id = results.valueWithPath("data.METAR.station_id");
//etc.
}
})
}
exports.getMETAR =getMETAR;
I can't see that your getMETAR function actually takes a callback function? I would expect it to be:
function getMETAR(ICAO, callback) {
// Do your work
var station_id = results.valueWithPath("data.METAR.station_id");
callback(null, station_id); // It's common to use the first arg of the callback if an error has occurred
}
Then the code calling this function could use it like this:
app.post('/', function(req, res) {
response.getMETAR(req.body.query, function(err, station_id) {
res.render('results', {stationDisplay: station_id, test: 'rob'};
});
});
It takes some time getting used to async programming and how the callbacks work, but once you've done it a few times, you'll get the hang of it.
Without seeing the rest of your code it hard to guess, but your code should look more like:
app.post('/', function(req, res, next) {
response.getMETAR(req.body.query,function(){
res.render('results', {
stationDisplay: response.station_id,
test: 'rob'
});
});
});