I have a website that uses Vuejs. And a forum in Discourse. I am trying to insert a javascript in the template file that will connect comments from the forum to a specific page on Vuejs site. But I get the error:
Templates should only be responsible for mapping the state to the UI.
Avoid placing tags with side-effects in your templates, such as <script>,
as they will not be parsed.
My Detail.vue code:
<div id='discourse-comments'></div>
<script type="text/javascript">
DiscourseEmbed = { discourseUrl: 'https://forum.epicseven.ru/',
discourseEmbedUrl: '{{url absolute="true"}}' };
(function() {
var d = document.createElement('script'); d.type = 'text/javascript';
d.async = true;
d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(d);
})();
</script>
I was try change text/javascript to application/javascript, but when i try render it, i receive error:
- invalid expression: missing ) after argument list in
" \n DiscourseEmbed = { discourseUrl: 'https://forum.epicseven.ru/',\n
discourseEmbedUrl: '"+_s(url absolute="true")+"' };\n\n (function() {\n
var d = document.createElement('script'); d.type =
'application/javascript'; d.async = true;\n d.src =
DiscourseEmbed.discourseUrl + 'javascripts/embed.js';\n
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(d);\n })();\n"
Raw expression: DiscourseEmbed = { discourseUrl:
'https://forum.epicseven.ru/',
discourseEmbedUrl: '{{url absolute="true"}}' };
(function() {
var d = document.createElement('script'); d.type =
'application/javascript'; d.async = true;
d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
(document.getElementsByTagName('head')[0] ||
document.getElementsByTagName('body')[0]).appendChild(d);
})();
How i can fix this error? Maybe try to use different part of code?
Related
i would like to use a js query code that I found on codepen in my vue project, but im not sure How to integrate it .
I simply pasted the file in my created() of my vue component but it doesn seem to work out.. the code is supposing to run a visual animation when typing chinese caractere in the input form.
this is the codepen : https://codepen.io/simeydotme/pen/CFcke
var $input = $('input');
$input.on({
"focus": function(e) {
$(".input-container").addClass("active");
},
"blur": function(e) {
$(".input-container").removeClass("active");
}
});
var previous = null;
setInterval( function() {
if( previous !== $input.val()
|| "" === $input.val()) {
getGoodCharacters( $input );
previous = $input.val();
}
}, 500);
function getGoodCharacters( $this ) {
var output = $this.val().trim();
var letters = output.split("");
var url = "https://service.goodcharacters.com/images/han/$$$.gif";
$(".error-container, .help").removeClass("show");
$(".output-container").empty();
for( letter in letters ) {
var img = letters[letter] + "";
var newurl = url.replace("$$$",img);
loadCharacter( newurl , img );
}
}
function loadCharacter( url , letter ) {
var img = new Image();
var $output = $(".output-container");
var $a = $("<a/>");
var l = $("input").val().length;
var cwidth = "120px";
if( l > 7 ) { cwidth = "70px"; }
else if( l > 6 ) { cwidth = "90px"; }
else if( l > 5 ) { cwidth = "100px"; }
$(img).load(function(){
$a.attr({
"href": url,
"title": "Good Character Chinese Symbol: "+ letter + ""
}).css("width", cwidth ).append( $(this) ).appendTo($output);
$(".help").addClass("show");
}).attr({
src: url
}).error(function(){
$(".error-container").addClass("show");
});
}
var $try = $(".tryme a").on("click", function(e) {
e.preventDefault();
$input.val( $(this).text() );
});
I also imported the jquery module in my componant
import $ from "jquery";
here is the html that i added in the template
<div class="container input-container">
<input type="text" id="input" placeholder="中文" value="中文"/>
</div>
Thanks!
hallo following this tutorial
https://developers.google.com/+/web/signin/#customizing_the_sign-in_button
when i implement the localization script to show the button in korean, german or whatever the g+ button dissapear
<script type="text/javascript">
// Specify the language code prior to loading the JavaScript API
window.___gcfg = {
lang: 'ko'
}
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Maybe im doing something wrong but the code looks so easy...
thank you for your time and sorry for my english.
You're in luck, Ian Barber just wrote a blog post about localizing Google+:
http://www.riskcompletefailure.com/2013/08/google-sign-in-localisation.html
That should answer your question.
The issue in the code is that you are missing a semicolon after the global window config markup:
<script type="text/javascript">
// Specify the language code prior to loading the JavaScript API
window.___gcfg = {
lang: 'ko'
};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Should work.
I'm displaying a Bing Map (v7) in my Webmatrix2 website with a series of pushpins & infoboxes drawn from a SQL Express database using a JSON enquiry.
While the maps appears in all 3 browsers I'm testing (IE, FF & Chrome) the pushpins are sometimes not showing in FF & Chrome, particularly if I refresh with Cntrl+F5
This is my first JSON and Bing Maps app so expect there's a few mistakes.
Any suggestions on how to improve the code and get display consistency?
#{
Layout = "~/_MapLayout.cshtml";
}
<script type="text/javascript" src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<link rel="StyleSheet" href="infoboxStyles.css" type="text/css">
<script type="text/javascript">
var map = null;
var pinLayer, pinInfobox;
var mouseover;
var pushpinFrameHTML = '<div class="infobox"><a class="infobox_close" href="javascript:closeInfobox()"><img src="/Images/close2.jpg" /></a><div class="infobox_content">{content}</div></div><div class="infobox_pointer"><img src="images/pointer_shadow.png"></div>';
var pinLayer = new Microsoft.Maps.EntityCollection();
var infoboxLayer = new Microsoft.Maps.EntityCollection();
function getMap() {
map = new Microsoft.Maps.Map(document.getElementById('map'), {
credentials: "my-key",
zoom: 4,
center: new Microsoft.Maps.Location(-25, 135),
mapTypeId: Microsoft.Maps.MapTypeId.road
});
pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
AddData();
}
$(function AddData() {
$.getJSON('/ListSchools', function (data) {
var schools = data;
$.each(schools, function (index, school) {
for (var i = 0; i < schools.length; i++) {
var pinLocation = new Microsoft.Maps.Location(school.SchoolLat, school.SchoolLon);
var NewPin = new Microsoft.Maps.Pushpin(pinLocation);
NewPin.title = school.SchoolName;
NewPin.description = "-- Learn More --";
pinLayer.push(NewPin); //add pushpin to pinLayer
Microsoft.Maps.Events.addHandler(NewPin, 'mouseover', displayInfobox);
}
});
infoboxLayer.push(pinInfobox);
map.entities.push(pinLayer);
map.entities.push(infoboxLayer);
});
})
function displayInfobox(e) {
if (e.targetType == "pushpin") {
var pin = e.target;
var html = "<span class='infobox_title'>" + pin.title + "</span><br/>" + pin.description;
pinInfobox.setOptions({
visible: true,
offset: new Microsoft.Maps.Point(-33, 20),
htmlContent: pushpinFrameHTML.replace('{content}', html)
});
//set location of infobox
pinInfobox.setLocation(pin.getLocation());
}
}
function closeInfobox() {
pinInfobox.setOptions({ visible: false });
}
function getCurrentLocation() {
var geoLocationProvider = new Microsoft.Maps.GeoLocationProvider(map);
geoLocationProvider.getCurrentPosition();
}
</script>
<body onload="getMap();">
<div id="map" style="position:relative; width:800px; height:600px;"></div>
<div>
<input type="button" value="Find Nearest Schools" onclick="getCurrentLocation();" />
</div>
</body>
The JSON file is simply
#{
var db = Database.Open("StarterSite");
var sql = #"SELECT * FROM Schools WHERE SchoolLon != ' ' AND SchoolLon != 'null' ";
var data = db.Query(sql);
Json.Write(data, Response.Output);
}
Add your pinLayer, infobox, and infoboxLayer before calling the AddData function and see if that makes a difference. Also verify that school.SchoolLat and school.SchoolLon are numbers and not a string version of a number. If they are a string, then use parseFloat to turn them into a number. Other than that everything looks fine.
Am trying to use janrain social media login , but still i dont understand what i should do and how do i add the user infromation to my table and open his session , now i configered the widget and everything and i got the code as following :
<script type="text/javascript">
(function() {
if (typeof window.janrain !== 'object') window.janrain = {};
if (typeof window.janrain.settings !== 'object') window.janrain.settings = {};
janrain.settings.tokenUrl = '__REPLACE_WITH_YOUR_TOKEN_URL__';
function isReady() { janrain.ready = true; };
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", isReady, false);
} else {
window.attachEvent('onload', isReady);
}
var e = document.createElement('script');
e.type = 'text/javascript';
e.id = 'janrainAuthWidget';
if (document.location.protocol === 'https:') {
e.src = 'https://rpxnow.com/js/lib/coacharabia/engage.js';
} else {
e.src = 'http://widget-cdn.rpxnow.com/js/lib/coacharabia/engage.js';
}
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(e, s);
})();
</script>
and then the embed div :
<div id="janrainEngageEmbed"></div>
Now Whats next am lost ??
There are two choices. The first is to develop your own token URL in your server-side coding language of choice and write some functionality which would authenticate your user to your system. You would then update the janrain.settings.tokenUrl value with the path to that token URL.
janrain.settings.tokenUrl = 'REPLACE_WITH_YOUR_TOKEN_URL';
The second choice which will be easier is to use a Janrain Engage plugin or widget written for your content management system or framework, which would handle most of the implementation for you. It looks like you are using web2py, which should have Janrain Engage (it's referred to by its old name, RPX) support already built in. Look through your documentation for more info.
Ok so ive already tried using connect-form and I couldnt get it working for some reason, but I figure I should understand how this works semi from scratch regardless.
I dont understand where the multipart/formdata file which I am uploaded is going, or how I can access it in my app when its posted to the url. -- Id like to access the file data directy, and write the file output using the node fs module. -- For instance:
app.post('/testy', function(req, res){
console.log(req.body);
console.log(req.headers);
res.redirect('back');
});
app.get('/testy', function(req, res){
res.send('<form method="post" action="/testy" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="test" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
So the only req var that is actually being logged there is the req headers, body is empty. (probably supposed to be I understand that). But what I dont get is where is the file data? Looking for the php equiv of the $_FILES array I supposed. -- Here is my headers logged.
'accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
'accept-language': 'en-us,en;q=0.5',
'accept-encoding': 'gzip,deflate',
'accept-charset': 'ISO-8859-1,utf-8;q=0.7,*;q=0.7',
'keep-alive': '115',
connection: 'keep-alive',
referer: 'http://127.0.0.1:3000/testy',
cookie: 'connect.sid=lDRpluTxjUJeuTmkXlybrYeZ.JYTB155s2DGce2dsyfv1Op5ISCY8uqyqJZK8NjlZ5jM; socketio=flashsocket',
'x-insight': 'activate',
'content-type': 'multipart/form-data; boundary=---------------------------5856401949371863571646035001',
'content-length': '30128' }
Any light shed upon what Im missing as always much appreciated!
Here is very verbose version without connect-form. As you can see, this is not efficient but trying to be instructive about how it works.
var express = require('express'),
fs = require('fs');
app = express.createServer();
app.post('/testy', function(req, res){
var body = '';
var header = '';
var content_type = req.headers['content-type'];
var boundary = content_type.split('; ')[1].split('=')[1];
var content_length = parseInt(req.headers['content-length']);
var headerFlag = true;
var filename = 'dummy.bin';
var filenameRegexp = /filename="(.*)"/m;
console.log('content-type: ' + content_type);
console.log('boundary: ' + boundary);
console.log('content-length: ' + content_length);
req.on('data', function(raw) {
console.log('received data length: ' + raw.length);
var i = 0;
while (i < raw.length)
if (headerFlag) {
var chars = raw.slice(i, i+4).toString();
if (chars === '\r\n\r\n') {
headerFlag = false;
header = raw.slice(0, i+4).toString();
console.log('header length: ' + header.length);
console.log('header: ');
console.log(header);
i = i + 4;
// get the filename
var result = filenameRegexp.exec(header);
if (result[1]) {
filename = result[1];
}
console.log('filename: ' + filename);
console.log('header done');
}
else {
i += 1;
}
}
else {
// parsing body including footer
body += raw.toString('binary', i, raw.length);
i = raw.length;
console.log('actual file size: ' + body.length);
}
});
req.on('end', function() {
// removing footer '\r\n'--boundary--\r\n' = (boundary.length + 8)
body = body.slice(0, body.length - (boundary.length + 8))
console.log('final file size: ' + body.length);
fs.writeFileSync('files/' + filename, body, 'binary');
console.log('done');
res.redirect('back');
})
});
app.get('/testy', function(req, res){
res.send('<form method="post" action="/testy" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="test" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.listen(4000);
How about running this snippet from the example library?
https://github.com/visionmedia/express/blob/master/examples/multipart/app.js
/**
* Module dependencies.
*/
var express = require('express')
, form = require('connect-form');
var app = express.createServer(
// connect-form (http://github.com/visionmedia/connect-form)
// middleware uses the formidable middleware to parse urlencoded
// and multipart form data
form({ keepExtensions: true })
);
app.get('/', function(req, res){
res.send('<form method="post" enctype="multipart/form-data">'
+ '<p>Image: <input type="file" name="image" /></p>'
+ '<p><input type="submit" value="Upload" /></p>'
+ '</form>');
});
app.post('/', function(req, res, next){
// connect-form adds the req.form object
// we can (optionally) define onComplete, passing
// the exception (if any) fields parsed, and files parsed
req.form.complete(function(err, fields, files){
if (err) {
next(err);
} else {
console.log('\nuploaded %s to %s'
, files.image.filename
, files.image.path);
res.redirect('back');
}
});
// We can add listeners for several form
// events such as "progress"
req.form.on('progress', function(bytesReceived, bytesExpected){
var percent = (bytesReceived / bytesExpected * 100) | 0;
process.stdout.write('Uploading: %' + percent + '\r');
});
});
app.listen(3000);
console.log('Express app started on port 3000');
npm install express
npm install connect-form
node app.js
works fine for me...
I was able to get the connect-form package working finally, rookie mistake but, if you are using express make sure you tell the app to use the form module within your config function app.configure(function(){
app.use(form({ keepExtensions: true }));
(the in the post it will be in the files.yourfileuploadfieldname.filename variable)
-- with that said Im still interested to know how to do it from scratch, without connect-form, if its not incredibly difficult to explain.