i'm trying to get the player view working for an artist, but bar hacking around/manually reimplementing is there a better way to do this. below is the code that i have tried so far, taken from a stack overflow regarding the same thing for albums.. There is two problems with this, one the image doesn't show up/fallback to the album and two, when you try and play you get "Uncaught TypeError: Object Tin Hat Trio has no method 'get' "
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sp://import/css/eve.css">
<link rel="stylesheet" href="sp://import/css/api.css">
</head>
<div id="artist-element"></div>
<script>
var sp = getSpotifyApi(1);
var views = sp.require('sp://import/scripts/api/views');
var models = sp.require('sp://import/scripts/api/models');
models.Artist.fromURI('spotify:artist:5spC5WtEkxDbaIH7bGGX4m', function(artist) {
var p = new views.Player();
p.context = artist;
document.getElementById('artist-element').appendChild(p.node);
});
</script>
</body>
</html>
The player object can only have a context of type Album or Playlist. Documentation here.
Related
So I followed a tutorial which has taught me some things about nodejs and mongodb. I now know how to insert new data from the server in to my database.
But what I can't seem to figure out is how to update existing data in a collection. I have searched on a lot of places but sadly no clear answer for me. I am a little of a noob still with this so excuse me if i say things that are probably wrong.
So this is what I've tried to set up:
Code from my Controller.js:
app.get("/button", function(req, res) {
mongo.connect(url_monitor, function (err, db) {
assert.equal(null, err);
db.numbers.update({ $inc: { number: -2}})
getData(res);
})
})
}
I am using the MVC model that has the: controller, model and view. So all pages in the view folder are .ejs files. I am also using jQuery and ajax to send a request to the controller.
button.js:
$(document).ready(function(){
$('#btn1').on('click', function(){
var number = {number: 0}
$.ajax({
type: 'GET',
url: '/button',
data: number,
success: function(number){
//do something with the data via front-end framework
location.reload();
alert('It works')
}
});
});
})
button.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="/assets/button.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List</title>
<link href="/assets/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Button test</h1>
<button id="btn1">Increase number</button>
</body>
</html>
So basically what I am trying to achieve is that once I press a button somewhere on a page, it would increase/decrease a value in the database in one of the specific collections. I am kinda lost with this, any help would be appreciated.
After searching for a very long time, i finally found the solution. If anyone else is having this issue then refer to this link: https://docs.mongodb.com/drivers/node/usage-examples/updateOne
I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I develop needs to support ie11 so I need to force my code to work correctly.
Here is fiddle: https://jsbin.com/hemawaboqa/1/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js"></script>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="svg-canvas"></div>
</div>
</body>
</html>
JS
var draw = SVG().addTo('#svg-canvas').size(400, 400)
var rect = draw.rect(100, 100)
Why that code is not working on ie11?
I have created a sample using the SVG.js 3.0 version with your code, it will show the "Object doesn't support property or method 'from'" in IE11 browser, perhaps the issue is related to the svg.js version, and it is a plugin issue, you could feedback this issue to SVG.js forum.
Besides, I suggest you could refer to the following code, to use the old version of SVG.js:
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<title>TEST</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="drawing">
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js></script>
<script>
(function () {
'use strict';
// Add title as first child of SVG element:
var createTitle = function (svgObject, text) {
var fragment = document.createDocumentFragment();
var titleElement = document.createElement('TITLE');
fragment.appendChild(titleElement);
titleElement.innerHTML = text;
svgObject.node.insertAdjacentElement('afterbegin', titleElement);
};
SVG.extend(SVG.Doc, {
namespace: function () {
return this
.attr({xmlns: 'http://www.w3.org/2000/svg', version: '1.1'})
.attr('xmlns:xlink', SVG.xlink, SVG.xmlns);
}
});
var draw = new SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({fill: '#f06'});
// Add title to SVG element
createTitle(draw, 'Rectangle');
}());
</script>
</body>
</html>
The result as below:
The library you are using has ECMA 6 elements that are not understood in IE.
If you need your project to work in IE, you will have to use another library or find out how to change it so it allows for older browsers (as suggested here: https://svgjs.dev/docs/3.0/compatibility/)
I have a button link which I'm using the 'onClick' event to play a sound (the correct answer to a quiz question). I then want to add a delay so the sound has enough time to play out before the link function loads the next page in.
I've tried using the set time out function, but I can't get it to work. Is this the best way to do this?
HEAD
<script>
$("#correct").click(function()
{
var url = "question2.html";
//5000 is the number of milliseconds (or 5 seconds) that you want to wait before redirection.
var delay = 5000;
setTimeout(function() {
window.location.href = url;
}, delay);
});
</script>
BODY
<button onclick="document.getElementById('answer1').play()" id="correct">A) Reduce – make less waste in the first place</button>
This is using HTML5 tags. Therefore, it will only work with browser that support HTML5. However, I think is a bad idea to validate the answer via javascript, since people can cheat and look the code and know which answer is corrected.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- javascript/jQuery -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div id='audio'>This will be replaced with an audio tag</div>
<button id="correct">A) Reduce – make less waste in the first place</button>
<script type='text/javascript'>
$("#correct").on('click',function (){
$("#audio").stop("true").delay('5000').queue(function() {
$(this).html('<audio controls="controls" autoplay="autoplay"><source src="song.mp3" type="audio/mp3" /></audio>');
});
});
</script>
</body>
</html>
I am using following code to create a html element in the page body with using YUI.
This code doesn't produce any error.
The issue is, the paragraph element is not created in the html page.
<html>
<head>
<title>YUI Test</title>
<meta charset="UTF-8">
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<script>
// Create a YUI sandbox on your page.
YUI().use('node', function(Y) {
// Create DOM nodes.
var contentNode = Y.Node.create('<p>');
contentNode.setHTML('This is a para created by YUI...');
});
</script>
</head>
<body>
<h1>Page body section...</h1>
</body>
</html>
The node is created, but it is also detached from the DOM. You have to attach it to the DOM by using either
Y.one('body').append(contentNode);
or
contentNode.appendTo(Y.one('body'));
or
Y.one('nav.main-navigation').insert(contentNode, 'before');
or any of the other methods for manipulating dom in YUI.
I trying to create main page (part of node.js and mongoDB application) that includes login form.
To add view part I included js files with function that returns HTML, but as I can see much better is using template engine.
Everything is OK until I including one compiled swig part inside another one.
The output of main page is OK, but login part outputs like text on the page.
How is possible to output the login HTML as HTML instead of plain text?
Does more information needed to understand the issue?
Thank you in advance.
var swig = require('swig');
var mainPage_tpl = swig.compileFile(__dirname+'/../views/mainpage_tpl.html');
var formLogin_tpl = swig.compileFile(__dirname+'/../views/login_tpl.html');
var loginOutput = formLogin_tpl();
var mainPageOutput = mainPage_tpl({
title: 'Sometitle',
pagetitle: 'Somepagetitle',
content: loginOutput
});
exports.get = function(req, res){
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(mainPageOutput);
res.end();
}
mainpage_tpl.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/assets/reset.css" />
<link rel="stylesheet" href="/assets/style.css" />
<script type="text/javascript" src="/assets/jquery-2.0.0.js"></script>
<script type="text/javascript" src="/assets/script.js"></script>
</head>
<body id="login_page">
<h1>{{pagetitle}}</h1>
<div id="content">{{content}}</div>
</body>
</html>
If you want to include literal HTML, you need to tell Swig to not escape it using the safe filter:
...
<div id="content">{{ content|safe }}</div>
...