We Keep Coding

<audio> tag not working with IBM Watson Text-to-Speech Node.js api

I'm building a chatbot using IBM Watson on Node.js and I'm having some trouble integrating the text-to-speech api. I've cloned an example on github that works when I run it, but when I try to implement it into my code, no audio plays.
app.js(server side):
/**
* Copyright 2015 IBM Corp. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
'use strict';
require( 'dotenv' ).config( {silent: true} );
const TextToSpeechV1 = require('watson-developer-cloud/text-to-speech/v1');
var express = require( 'express' ); // app server
var bodyParser = require( 'body-parser' ); // parser for post requests
var Watson = require( 'watson-developer-cloud/conversation/v1' ); // watson sdk
// The following requires are needed for logging purposes
var uuid = require( 'uuid' );
var vcapServices = require( 'vcap_services' );
var basicAuth = require( 'basic-auth-connect' );
// The app owner may optionally configure a cloudand db to track user input.
// This cloudand db is not required, the app will operate without it.
// If logging is enabled the app must also enable basic auth to secure logging
// endpoints
var cloudantCredentials = vcapServices.getCredentials( 'cloudantNoSQLDB' );
var cloudantUrl = null;
if ( cloudantCredentials ) {
cloudantUrl = cloudantCredentials.url;
}
cloudantUrl = cloudantUrl || process.env.CLOUDANT_URL; // || '<cloudant_url>';
var logs = null;
var app = express();
// set up routes
var token = require('./routes/token');
app.use('/token', token);
// Bootstrap application settings
app.use( express.static( './public' ) ); // load UI from public folder
app.use( bodyParser.json() );
// Create the service wrapper
var conversation = new Watson( {
// If unspecified here, the CONVERSATION_USERNAME and CONVERSATION_PASSWORD env properties will be checked
// After that, the SDK will fall back to the bluemix-provided VCAP_SERVICES environment property
// username: '<username>',
// password: '<password>',
username: process.env.ASSISTANT_USERNAME || '<username>',
password: process.env.ASSISTANT_PASSWORD || '<password>',
url: 'https://gateway.watsonplatform.net/conversation/api',
version_date: '2016-09-20',
version: 'v1'
} );
const textToSpeech = new TextToSpeechV1({
username: process.env.TEXT_TO_SPEECH_USERNAME,
password: process.env.TEXT_TO_SPEECH_PASSWORD,
version: 'v1'
// If unspecified here, the TEXT_TO_SPEECH_USERNAME and
// TEXT_TO_SPEECH_PASSWORD env properties will be checked
// After that, the SDK will fall back to the bluemix-provided VCAP_SERVICES environment property
// username: '<username>',
// password: '<password>',
});
/************************************************
* Conversation services
************************************************/
// Endpoint to be call from the client side
app.post( '/api/message', function(req, res) {
var workspace = process.env.WORKSPACE_ID || '<workspace-id>';
if ( !workspace || workspace === '<workspace-id>' ) {
return res.json( {
'output': {
'text': 'The app has not been configured with a <b>WORKSPACE_ID</b> environment variable. Please refer to the ' +
'README documentation on how to set this variable. <br>' +
'Once a workspace has been defined the intents may be imported from ' +
'here in order to get a working application.'
}
} );
}
var payload = {
workspace_id: workspace,
context: {},
input: {}
};
if ( req.body ) {
if ( req.body.input ) {
payload.input = req.body.input;
}
if ( req.body.context ) {
// The client must maintain context/state
payload.context = req.body.context;
}
}
// Send the input to the conversation service
conversation.message( payload, function(err, data) {
if ( err ) {
return res.status( err.code || 500 ).json( err );
}
return res.json( updateMessage( payload, data ) );
} );
} );
/**
* Updates the response text using the intent confidence
* #param {Object} input The request to the Conversation service
* #param {Object} response The response from the Conversation service
* #return {Object} The response with the updated message
*/
function updateMessage(input, response) {
var responseText = null;
var id = null;
if ( !response.output ) {
response.output = {};
} else {
if ( logs ) {
// If the logs db is set, then we want to record all input and responses
id = uuid.v4();
logs.insert( {'_id': id, 'request': input, 'response': response, 'time': new Date()});
}
return response;
}
if ( response.intents && response.intents[0] ) {
var intent = response.intents[0];
// Depending on the confidence of the response the app can return different messages.
// The confidence will vary depending on how well the system is trained. The service will always try to assign
// a class/intent to the input. If the confidence is low, then it suggests the service is unsure of the
// user's intent . In these cases it is usually best to return a disambiguation message
// ('I did not understand your intent, please rephrase your question', etc..)
if ( intent.confidence >= 0.75 ) {
responseText = 'I understood your intent was ' + intent.intent;
} else if ( intent.confidence >= 0.5 ) {
responseText = 'I think your intent was ' + intent.intent;
} else {
responseText = 'I did not understand your intent';
}
}
response.output.text = responseText;
if ( logs ) {
// If the logs db is set, then we want to record all input and responses
id = uuid.v4();
logs.insert( {'_id': id, 'request': input, 'response': response, 'time': new Date()});
}
return response;
}
if ( cloudantUrl ) {
// If logging has been enabled (as signalled by the presence of the cloudantUrl) then the
// app developer must also specify a LOG_USER and LOG_PASS env vars.
if ( !process.env.LOG_USER || !process.env.LOG_PASS ) {
throw new Error( 'LOG_USER OR LOG_PASS not defined, both required to enable logging!' );
}
// add basic auth to the endpoints to retrieve the logs!
var auth = basicAuth( process.env.LOG_USER, process.env.LOG_PASS );
// If the cloudantUrl has been configured then we will want to set up a nano client
var nano = require( 'nano' )( cloudantUrl );
// add a new API which allows us to retrieve the logs (note this is not secure)
nano.db.get( 'car_logs', function(err) {
if ( err ) {
console.error(err);
nano.db.create( 'car_logs', function(errCreate) {
console.error(errCreate);
logs = nano.db.use( 'car_logs' );
} );
} else {
logs = nano.db.use( 'car_logs' );
}
} );
// Endpoint which allows deletion of db
app.post( '/clearDb', auth, function(req, res) {
nano.db.destroy( 'car_logs', function() {
nano.db.create( 'car_logs', function() {
logs = nano.db.use( 'car_logs' );
} );
} );
return res.json( {'message': 'Clearing db'} );
} );
// Endpoint which allows conversation logs to be fetched
app.get( '/chats', auth, function(req, res) {
logs.list( {include_docs: true, 'descending': true}, function(err, body) {
console.error(err);
// download as CSV
var csv = [];
csv.push( ['Question', 'Intent', 'Confidence', 'Entity', 'Output', 'Time'] );
body.rows.sort( function(a, b) {
if ( a && b && a.doc && b.doc ) {
var date1 = new Date( a.doc.time );
var date2 = new Date( b.doc.time );
var t1 = date1.getTime();
var t2 = date2.getTime();
var aGreaterThanB = t1 > t2;
var equal = t1 === t2;
if (aGreaterThanB) {
return 1;
}
return equal ? 0 : -1;
}
} );
body.rows.forEach( function(row) {
var question = '';
var intent = '';
var confidence = 0;
var time = '';
var entity = '';
var outputText = '';
if ( row.doc ) {
var doc = row.doc;
if ( doc.request && doc.request.input ) {
question = doc.request.input.text;
}
if ( doc.response ) {
intent = '<no intent>';
if ( doc.response.intents && doc.response.intents.length > 0 ) {
intent = doc.response.intents[0].intent;
confidence = doc.response.intents[0].confidence;
}
entity = '<no entity>';
if ( doc.response.entities && doc.response.entities.length > 0 ) {
entity = doc.response.entities[0].entity + ' : ' + doc.response.entities[0].value;
}
outputText = '<no dialog>';
if ( doc.response.output && doc.response.output.text ) {
outputText = doc.response.output.text.join( ' ' );
}
}
time = new Date( doc.time ).toLocaleString();
}
csv.push( [question, intent, confidence, entity, outputText, time] );
} );
res.csv( csv );
} );
} );
}
/************************************************
* Text-to-Speech services
************************************************/
/**
* Pipe the synthesize method
*/
app.get('/api/synthesize', (req, res, next) => {
const transcript = textToSpeech.synthesize(req.query);
transcript.on('response', (response) => {
if (req.query.download) {
if (req.query.accept && req.query.accept === 'audio/wav') {
response.headers['content-disposition'] = 'attachment; filename=transcript.wav';
} else {
response.headers['content-disposition'] = 'attachment; filename=transcript.ogg';
}
}
});
transcript.on('error', next);
transcript.pipe(res);
});
// Return the list of voices
app.get('/api/voices', (req, res, next) => {
textToSpeech.voices(null, (error, voices) => {
if (error) {
return next(error);
}
res.json(voices);
});
});
require('./config/error-handler')(app);
module.exports = app;
tts-custom.js(client side):
function text_to_speech(text) {
console.log(text);
// text = '<express-as type="GoodNews">'+text+'</express-as>';
text = encodeURIComponent(text);
console.log(text);
$.ajax({
method: 'GET',
url: '/api/synthesize?voice=en-US_AllisonVoice&download=true&text='+text,
dataType: 'native',
xhrFields: {
responseType: 'blob'
},
success: function(blob) {
var url = (URL || webkitURL).createObjectURL(blob);
$('#audio').attr('src', url);
$('#audio').attr('type', 'audio/ogg;codecs=opus');
}
})
}
chat.html:
<html>
<head>
<title> Chat </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta property="og:image" content="conversation.svg" />
<meta property="og:title" content="Conversation Chat Simple" />
<meta property="og:description" content="Sample application that shows how to use the Watson Assistant API to identify user intents"
/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/app.css">
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css" /> -->
<link rel="stylesheet" href="css/speech-input.css">
<script src="js/conversation.js"></script>
<!-- <script src="js/bundle.js"></script>
-->
<style type="text/css">
#result{
height: 200px;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0 0 10px 0 #bbb;
margin-bottom: 30px;
font-size: 14px;
line-height: 25px;
font-family: verdana;
}
button{
font-size: 20px;
position: absolute;
bottom: 10%;
right: 10%;
}
</style>
<style>
.mystyle {
display:none;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="js/tts-custom.js"></script>
</head>
<body>
<!-- <div id="contentParent" class="responsive-columns-wrapper"> -->
<div id="view-change-button" class="button" onclick="hideChat(this)">
<img class="option full" src="../img/Chat Button.png">
<img class="option not-full" src="../img/Code Button.png">
</div>
<div id="chat-column-holder" class="responsive-column content-column">
<div class="chat-column">
<div id="scrollingChat"></div>
<label for="textInput" class="inputOutline">
<input id="textInput" class= "text" lang="es" placeholder="Type something" type="text" onkeydown="ConversationPanel.inputKeyDown(event, this, false)">
<!-- add this to class in textInput to put back google mic:, speech-input -->
</label>
<audio autoPlay="true" id="audio"
className="audio"
controls="controls">
Your browser does not support the audio element.
</audio>
<span id="microphone"></span>
</div>
</div>
<!-- PAYLOAD DON'T TOUCH/FOR TEXT->JSON -->
<div id="payload-column" class="fixed-column content-column">
<div id="payload-request" class="payload"></div>
<div id="payload-response" class="payload"></div>
</div>
<!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="js/jquery-ajax-native.js"></script>
<script type="text/javascript" src="js/Microphone.js"></script>
<script type="text/javascript" src="js/SpeechToText.js"></script>
<script type="text/javascript" src="js/speechsearch.js"></script>
<script src="js/hideChat.js"></script>
<script src="js/speech-input.js"></script>
<script src="js/common.js"></script>
<script src="js/api.js"></script>
<script src="js/payload.js"></script>
<script src="js/global.js"></script>
<script src="js/analytics.js"></script>
</body>
</html>
I'm not sure what to do but as the ajax is called and jquery is used in client side js, help is appreciated.

call a paypal javascript function from swift 4

This is the java script for paypal payment How to call this from swift 4 and how to pass the amount to this script, now the amount to pay is hard coded
paypal.Button.render({
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
production: '<insert production client id>'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: '0.01', currency: 'USD' }
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
The code which I tried is :
#IBAction func buttonActionPay(_ sender: UIButton) {
let htmlPath = Bundle.main.path(forResource: "sampleHTMLCode", ofType: "html")
let url = URL(fileURLWithPath: htmlPath!)
let request = URLRequest(url: url)
webView.load(request)
}
The javascript code above is from paypal developer website and is there any need to edit the code.

Just change the javascript like this.
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
</head>
<body>
<div id="paypal-button-container"></div>
<script>
// y = 12;
function bar(qq){
var y = qq
paypal.Button.render({
env: 'sandbox', // sandbox | production
// PayPal Client IDs - replace with your own
// Create a PayPal app: https://developer.paypal.com/developer/applications/create
client: {
sandbox: 'AZDxjDScFpQtjWTOUtWKbyN_bDt4OgqaF4eYXlewfBP4-8aqX3PiV8e1GWU6liB2CUXlkA59kJXE7M6R',
production: '<insert production client id>'
},
// Show the buyer a 'Pay Now' button in the checkout flow
commit: true,
// payment() is called when the button is clicked
payment: function(data, actions) {
// Make a call to the REST api to create the payment
return actions.payment.create({
payment: {
transactions: [
{
amount: { total: y, currency: 'USD' }
}
]
}
});
},
// onAuthorize() is called when the buyer approves the payment
onAuthorize: function(data, actions) {
// Make a call to the REST api to execute the payment
return actions.payment.execute().then(function() {
window.alert('Payment Complete!');
});
}
}, '#paypal-button-container');
}
</script>
</body>
The Swift code is:
import UIKit
import WebKit
import JavaScriptCore
class ViewController:
UIViewController,WKUIDelegate,WKNavigationDelegate {
var cont = String()
var jsContext: JSContext!
var webView: WKWebView
required init(coder aDecoder: NSCoder) {
self.webView = WKWebView(frame: CGRect.zero)
super.init(coder: aDecoder)!
}
override func loadView() {
super.loadView()
let userContentController = WKUserContentController()
let source = "bar('12');"
let userScript = WKUserScript(source: source, injectionTime:
WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: true)
userContentController.addUserScript(userScript)
let configuration = WKWebViewConfiguration()
configuration.userContentController = userContentController
self.webView = WKWebView(frame: self.view.frame, configuration:
configuration)
}
override func viewDidLoad() {
super.viewDidLoad()
///
view.addSubview(webView)
webView.translatesAutoresizingMaskIntoConstraints = false
let height = NSLayoutConstraint(item: webView, attribute: .height,
relatedBy: .equal, toItem: view, attribute: .height, multiplier: 1,
constant: 0)
let width = NSLayoutConstraint(item: webView, attribute: .width,
relatedBy: .equal, toItem: view, attribute: .width, multiplier: 1,
constant: 0)
view.addConstraints([height, width])
let path = Bundle.main.path(forResource: "sampleHTMLCode", ofType:
"html")!
let url = URL(fileURLWithPath: path)
webView.load(URLRequest(url: url))
webView.allowsBackForwardNavigationGestures = true
///
webView.navigationDelegate = self
}
#IBAction func buttonActionPay(_ sender: UIButton) {
let htmlPath = Bundle.main.path(forResource: "sampleHTMLCode",
ofType: "html")
let url = URL(fileURLWithPath: htmlPath!)
let request = URLRequest(url: url)
webView.load(request)
}
}

VueJS doesn't work on mobile

I have a problem with running VueJS on mobile devices. I created a weather prediction app on copepen.io
Here is the link for the project:
http://codepen.io/techcater/pen/xOZmgv
HTML code:
<div class="container-fluid text-center">
<h1>Your Local Weather</h1>
<p>
{{location}}
</p>
<p>
{{temperature}}
<a #click="changeDegree">{{degree}}</a>
</p>
<p>
{{weather | capitalize}}
</p>
<img :src="iconURL" alt="" />
<br>
by Dale Nguyen
<!-- <pre>{{$data | json}}</pre> -->
</div>
JS code:
new Vue({
el: '.container-fluid',
data: {
location: "",
temperature: "",
degree: "C",
weather: "",
iconURL: ""
},
created: function(){
this.getWeather();
},
methods: {
getWeather: function(){
var that = this;
this.$http.get("http://ipinfo.io").then((response) => {
console.log(response.data);
that.location = response.data.city + ", " + response.data.country;
// Get weather informaiton
var api = 'ebd4d312f85a230d5dc1db91e20c2ace';
var city = response.data.city;
var url = "http://api.openweathermap.org/data/2.5/weather?q={CITY}&APPID={APIKEY}&units=metric";
url = url.replace("{CITY}",city);
url = url.replace("{APIKEY}", api);
that.$http.post(url,{dataType: 'jsonp'},{
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}}).then((response) => {
console.log(response.data);
that.temperature = response.data.main.temp;
that.weather = response.data.weather[0]['description'];
that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";
}, (response) => {
// error callback
});
}, (response) => {
console.log(response.data);
});
},
changeDegree: function() {
if(this.degree == "C"){
this.degree = "F";
this.temperature = Math.round((this.temperature*9/5 + 32)*100)/100;
}else {
this.degree = "C";
this.temperature = Math.round(((this.temperature - 32)*5 /9)* 100)/100;
}
}
}
})
It works well on my laptop but not on mobile. At first, I thought that it is because of Codepen. It may cause something when running through the site. However, when I created a project on my website, it also doesn't work.
Can you help to find the issue? Thanks,

Your code seems to be working well, except that on codepen it gives me error XMLHttpRequest cannot load http://ipinfo.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access..
You can put your domain name on headers options to enable cross-origin, here is example:
this.$http.get('http://ipinfo.io', {
'headers': {
'Origin': 'http://yourdomain.com'
}
})
See example: http://bozue.com/weather.html
I also noticed you put vue.min.js and vue-resource.js scripts in wrong order that might trigger some error, vue.min.js should be on the first place.

I found a solution for this. I works on my mobile now. I believe that I will work on other browses too. The problem is that some browsers doesn't recognize the operation ">", so I changed it.
Here is the new code:
getWeather: function(){
var that = this;
this.$http.get('http://ipinfo.io', {'headers': {
'Origin': 'http://yourdomain.com'}
}).then(function(response) {
console.log(response.data);
that.location = response.data.city + ", " + response.data.country;
// Get weather informaiton
var api = 'ebd4d312f85a230d5dc1db91e20c2ace';
var city = response.data.city;
var url = "https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q={CITY}&APPID={APIKEY}&units=metric";
url = url.replace("{CITY}",city);
url = url.replace("{APIKEY}", api);
that.$http.post(url,{dataType: 'jsonp'},{
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}}).then(function(response) {
console.log(response.data);
that.temperature = response.data.main.temp;
that.weather = response.data.weather[0]['description'];
that.iconURL = "http://openweathermap.org/img/w/" + response.data.weather[0]['icon'] + ".png";
}).then(function(){
// error callback
});
}).then(function(){
console.log(response.data);
});
},

Issues with CORS. Flask <-> AngularJS

Starting a new project with a angularjs client app and a flask app providing the api. I'm using mongodb as the database. I had to immediately rule out jsonp since I would need the ability to POST across different ports. So we have localhost:9000 for the angular app and localhost:9001 for the flask app.
I went through and made the changed needed for CORS in my API as well as my angular files. See source below. First issue I ran in to was that there is a bug that CORS allow header does not recognize localhost in Chrome. I updated my hosts file so I could use moneybooks.dev and this worked for my GET requests without using JSONP.
Now, to the issues I'm facing. When submitting a POST request, its stating Origin http://moneybooks.dev:9000 is not allowed by Access-Control-Allow-Origin What? GET can go through but POST is declined. I see the request come through to flask but it returns HTTP 400. I need help making POST requests work.
Another issue, which may be related, is that on my GET requests, sometimes the GET request doesn't fire at all. Like in BudgetCtrl the loadBudget function. On #/budgets/budgetID the name of the budget will sometimes not load at all. I check the flask log and don't see a request coming through. Then I click refresh, I see the request, the budget name appears on the page however in the flask log I see an error. [Errno 10053] An established connection was aborted by the software in your host machine. Its a connection error that only appears in the flask log when the GET request succeeds.
Are these issues related? Can anyone see what I'm doing wrong?
app.js
'use strict';
angular.module('MoneybooksApp', ['ui.bootstrap', 'ngResource'])
.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
budgets.js
'use strict';
angular.module('MoneybooksApp')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/budgets', {
templateUrl: 'views/budgets-list.html',
controller: 'BudgetListCtrl'
})
.when('/budgets/:budgetID', {
templateUrl: 'views/budget.html',
controller: 'BudgetCtrl'
});
}])
.controller('BudgetListCtrl', function ($scope, $http, $resource) {
$scope.budgets = [];
var init = function () {
$scope.loadBudgets();
}
$scope.loadBudgets = function() {
$http.get('http://moneybooks.dev:9001/api/budgets')
.success(function (data) {
$scope.budgets = data;
})
.error(function (data) {
console.error(data);
});
};
init();
})
.controller('BudgetCtrl', function ($scope, $http, $routeParams, $resource) {
$scope.budget = {};
var init = function () {
$scope.loadBudget();
};
$scope.loadBudget = function() {
$http.get('http://moneybooks.dev:9001/api/budgets/'+$routeParams['budgetID'])
.success(function (data) {
$scope.budget = data;
})
.error(function (data) {
console.error(data);
});
};
init();
})
.controller('TransactionCtrl', function ($scope, $http, $routeParams, $resource) {
$scope.transactions = [];
$scope.editing = false;
$scope.editingID;
var init = function () {};
$scope.syncUp = function () {
$http.post('http://moneybooks.dev:9001/api/budgets/'+$routeParams['budgetID']+'/transactions', {transactions: $scope.transactions});
};
$scope.syncDown = function () {
$http.get('http://moneybooks.dev:9001/api/budgets/'+$$routeParams['budgetID']+'/transactions')
.success(function (transactions) {
$scope.transactions = transactions;
});
};
$scope.add = function() {
$scope.transactions.push({
amount: $scope.amount,
description: $scope.description,
datetime: $scope.datetime
});
reset();
$scope.defaultSort();
};
$scope.edit = function(index) {
var transaction = $scope.transactions[index];
$scope.amount = transaction.amount;
$scope.description = transaction.description;
$scope.datetime = transaction.datetime;
$scope.inserting = false;
$scope.editing = true;
$scope.editingID = index;
};
$scope.save = function() {
$scope.transactions[$scope.editingID].amount = $scope.amount;
$scope.transactions[$scope.editingID].description = $scope.description;
$scope.transactions[$scope.editingID].datetime = $scope.datetime;
reset();
$scope.defaultSort();
};
var reset = function() {
$scope.editing = false;
$scope.editingID = undefined;
$scope.amount = '';
$scope.description = '';
$scope.datetime = '';
};
$scope.cancel = function() {
reset();
};
$scope.remove = function(index) {
$scope.transactions.splice(index, 1);
if ($scope.editing) {
reset();
}
};
$scope.defaultSort = function() {
var sortFunction = function(a, b) {
var a_date = new Date(a['datetime']);
var b_date = new Date(b['datetime']);
if (a['datetime'] === b['datetime']) {
var x = a['amount'], y = b['amount'];
return x > y ? -1 : x < y ? 1 : 0;
} else {
return a_date - b_date
}
};
$scope.transactions.sort(sortFunction);
};
$scope.descriptionSuggestions = function() {
var suggestions = [];
return $.map($scope.transactions, function(transaction) {
if ($.inArray(transaction.description, suggestions) === -1){
suggestions.push(transaction.description);
return transaction.description;
}
});
};
$scope.dateSuggestions = function () {
var suggestions = [];
return $.map($scope.transactions, function(transaction) {
if ($.inArray(transaction.datetime, suggestions) === -1){
suggestions.push(transaction.datetime);
return transaction.datetime;
}
});
}
$scope.getRunningTotal = function(index) {
var runningTotal = 0;
var selectedTransactions = $scope.transactions.slice(0, index+1);
angular.forEach(selectedTransactions, function(transaction, index){
runningTotal += transaction.amount;
});
return runningTotal;
};
init();
$(function(){
(function($){
var header = $('#budget-header');
var budget = $('#budget');
var pos = header.offset();
$(window).scroll(function(){
if ($(this).scrollTop() > pos.top && header.css('position') == 'static') {
header.css({
position: 'fixed',
width: header.width(),
top: 0
}).addClass('pinned');
budget.css({
'margin-top': '+='+header.height()
});
} else if ($(this).scrollTop() < pos.top && header.css('position') == 'fixed') {
header.css({
position: 'static'
}).removeClass('pinned');
budget.css({
'margin-top': '-='+header.height()
});
}
});
})(jQuery);
});
});
API.py
from flask import Flask, Response, Blueprint, request
from pymongo import MongoClient
from bson.json_util import dumps
from decorators import crossdomain
from bson.objectid import ObjectId
try:
import json
except ImportError:
import simplejson as json
class APIEncoder(json.JSONEncoder):
def default(self, obj):
if isinstance(obj, objectid.ObjectID):
return str(obj)
app = Flask(__name__)
client = MongoClient()
db = client['moneybooks']
api = Blueprint('api', __name__, url_prefix="/api")
#api.route('/budgets', methods=['GET', 'POST', 'OPTIONS'])
#crossdomain(origin='*', methods=['GET', 'POST', 'OPTIONS'], headers=['X-Requested-With', 'Content-Type', 'Origin'])
def budgets():
if request.method == "POST":
budget_id = db.budgets.insert({
'name': request.form['name']
})
budget_json = dumps(db.budgets.find_one({'_id': budget_id}), cls=APIEncoder)
if request.method == "GET":
budget_json = dumps(db.budgets.find(), cls=APIEncoder)
return Response(budget_json, mimetype='application/json')
#api.route('/budgets/<budget_id>', methods=['GET', 'OPTIONS'])
#crossdomain(origin='*', methods=['GET', 'OPTIONS'], headers=['X-Requested-With', 'Content-Type', 'Origin'])
def budget(budget_id):
budget_json = dumps(db.budgets.find_one({'_id': ObjectId(budget_id)}), cls=APIEncoder)
return Response(budget_json, mimetype='application/json')
#api.route('/budgets/<budget_id>/transactions', methods=['GET', 'POST', 'OPTIONS'])
#crossdomain(origin='*', methods=['GET', 'POST', 'OPTIONS'], headers=['X-Requested-With', 'Content-Type', 'Origin'])
def transactions(budget_id):
if request.method == "POST":
db.budgets.update({
'_id': ObjectId(budget_id)
}, {
'$set': {
'transactions': request.form['transactions']
}
});
budget_json = dumps(db.budgets.find_one({'_id': ObjectId(budget_id)}), cls=APIEncoder)
if request.method == "GET":
budget_json = dumps(db.budgets.find_one({'_id': ObjectId(budget_id)}).transactions, cls=APIEncoder)
return Response(budget_json, mimetype='application/json')
app.register_blueprint(api)
if __name__ == '__main__':
app.config['debug'] = True
app.config['PROPAGATE_EXCEPTIONS'] = True
app.run()
decorators.py
from datetime import timedelta
from flask import make_response, request, current_app
from functools import update_wrapper
def crossdomain(origin=None, methods=None, headers=None, max_age=21600, attach_to_all=True, automatic_options=True):
if methods is not None:
methods = ', '.join(sorted(x.upper() for x in methods))
if headers is not None and not isinstance(headers, basestring):
headers = ', '.join(x.upper() for x in headers)
if isinstance(max_age, timedelta):
max_age = max_age.total_seconds()
def get_methods():
if methods is not None:
return methods
options_resp = current_app.make_default_options_response()
return options_resp.headers['allow']
def decorator(f):
def wrapped_function(*args, **kwargs):
if automatic_options and request.method == 'OPTIONS':
resp = current_app.make_default_options_response()
else:
resp = make_response(f(*args, **kwargs))
if not attach_to_all and request.method != 'OPTIONS':
return resp
h = resp.headers
h['Access-Control-Allow-Origin'] = origin
h['Access-Control-Allow-Methods'] = get_methods()
h['Access-Control-Max-Age'] = str(max_age)
if headers is not None:
h['Access-Control-Allow-Headers'] = headers
return resp
f.provide_automatic_options = False
f.required_methods = ['OPTIONS']
return update_wrapper(wrapped_function, f)
return decorator
Edit
Output from chrome dev console.
Console:
XMLHttpRequest cannot load http://moneybooks.dev:9001/api/budgets/5223e780f58e4d20509b4b8b/transactions. Origin http://moneybooks.dev:9000 is not allowed by Access-Control-Allow-Origin.
Network
Name: transactions /api/budgets/5223e780f58e4d20509b4b8b
Method: POST
Status: (canceled)
Type: Pending
Initiator: angular.js:9499
Size: 13 B / 0 B
Latency: 21 ms

As #TheSharpieOne pointed out, the CORS error is likely a red herring caused by a Chrome Dev Tools bug. If it was an actual CORS issue, the pre-flight OPTIONS call should have returned the same error.
I believe your 400 error may be coming from request.form['transactions'] in the handler for the POST request. request.form is a MultiDict datastructure and according to the documentation at http://werkzeug.pocoo.org/docs/datastructures/#werkzeug.datastructures.MultiDict:
From Werkzeug 0.3 onwards, the KeyError raised by this class is also a subclass of the BadRequest HTTP exception and will render a page for a 400 BAD REQUEST if caught in a catch-all for HTTP exceptions.
I believe that if you check for the 'transactions' key in request.forms.keys(), you'll find that it does not exist. Note that the content type for the POST is application/json not x-www-form-urlencoded. According to the documentation at http://flask.pocoo.org/docs/api/#flask.Request.get_json, you'll want to get the request data using the request.get_json() function when the request mimetype is application/json.

Is the POST sending content ? I had a similar issuee when the body was null. If it is, adding either an empty body ("") when the object is falsy, or adding the ContentLength header as 0 both seemed to work.
$scope.syncUp = function () {
var objToSend = $scope.transactions ? { transactions: $scope.transactions } : "";
$http.post('http://moneybooks.dev:9001/api/budgets/'+$routeParams['budgetID']+'/transactions', objToSend);
};

Ensure app.js is included before budget.js in your HTML page

POST 500 (Internal Server Error) when I use the JEditable plugin

I'm trying to use JEditable plugin in my Symfony2 application. PYS entity is a a films and TV shows entity; then I've got Usuario and Critica entities. I want to manage the user's critics with the plugin. I've analyzed more and more examples, but I can not get it to work. The value (in this case the title of critic) is update in the template but not in the db; when I refresh the browser the old value appears.
THE ERROR:
This is my JS:
$('.edit').editable(function(value, settings) {
var data = {};
data[this.id] = value;
console.log(path);
console.log(data);
$.post(path, data);
return(value);
}, {
indicator : 'Saving...',
tooltip : 'Click to edit...'
});
This is the route:
critica_ajax:
locales: { es: "/gestion-critica/{pysStr}/", en: "/manage-critic/{pysStr}/" }
defaults: { _controller: UsuarioBundle:Default:gestionarCritica }
This is the controller:
public function gestionarCriticaAction($pysStr)
{
$em = $this->getDoctrine()->getManager();
$pys = $em->getRepository('PYSBundle:Pys')->findPys($pysStr);
$usuario = $this->get('security.context')->getToken()->getUser();
$critica = $em->getRepository('UsuarioBundle:Usuario')->findCritica($usuario, $pys);
if(!$critica)
{
$critica = new Critica($usuario, $pys);
}
$criTitulo = $this->request->get('value');
$critica->setCriTitulo($criTitulo);
$critica->setCriContenido($criContenido);
$critica->setCriFecha(new \DateTime("now"));
$em->persist($critica);
$em->flush();
return new Response($criTitulo);
}
The Twig template:
<h2 class="edit">{{ critica.criTitulo }}</h2>
<script>
var path = "{{ path('critica_ajax', { 'pysStr': pelicula.pysStr}) }}";
</script>
EDIT (The Symfony's return)
Notice: Undefined property: Filmboot\UsuarioBundle\Controller\DefaultController::$request
in C:\Programming\xampp\htdocs\filmboot\src\Filmboot\UsuarioBundle\Controller\DefaultController.php line 236
THIS IS THE LINE 236: $criTitulo = $this->request->get('value');
at ErrorHandler ->handle ('8', 'Undefined property: Filmboot\UsuarioBundle\Controller\DefaultController::$request', 'C:\Programming\xampp\htdocs\filmboot\src\Filmboot\UsuarioBundle\Controller\DefaultController.php', '236', array('pysStr' => 'machete', 'em' => object(EntityManager), 'pys' => object(Pys), 'usuario' => object(Usuario), 'critica' => object(Critica)))
in C:\Programming\xampp\htdocs\filmboot\src\Filmboot\UsuarioBundle\Controller\DefaultController.php at line 236 +
at DefaultController ->gestionarCriticaAction ('machete')
at call_user_func_array (array(object(DefaultController), 'gestionarCriticaAction'), array('machete'))
in C:\Programming\xampp\htdocs\filmboot\app\bootstrap.php.cache at line 1003 +
at HttpKernel ->handleRaw (object(Request), '1')
in C:\Programming\xampp\htdocs\filmboot\app\bootstrap.php.cache at line 977 +
at HttpKernel ->handle (object(Request), '1', true)
in C:\Programming\xampp\htdocs\filmboot\app\bootstrap.php.cache at line 1103 +
at ContainerAwareHttpKernel ->handle (object(Request), '1', true)
in C:\Programming\xampp\htdocs\filmboot\app\bootstrap.php.cache at line 413 +
at Kernel ->handle (object(Request))
in C:\Programming\xampp\htdocs\filmboot\web\app_dev.php at line 26 +

You need to get the request like this :
$request = $this->getRequest();
instead of
$request = $this->request;
the request is returned using a method its not a class property