I have this awesome working code that pulls Autocomplete suggestions from Wikipedia. This is really useful, except that I'd like it to only recommend Bands. So for instance, typing in "Pink" would only return /bands/ that start with the word "Pink", rather than everything in the world dealing with 'Pink'.
Does anyone know how to accomplish this? http://codepen.io/anon/pen/VePapK
I found there's a way to filter results by category by using the query action here (rather than opensearch), but the strange thing is that there doesn't seem to be a broad "Music" or "Bands" category. So that's opening even more unanswered questions.... Any help appreciated.
EDIT: Alternatively, if anyone knows an easier way to feature an updated list of all significant bands on your site's dropdown, please let me know.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="get" id="search">
<input type="text" class="searchbox" value="Type here.. " onblur="if(this.value == '') { this.value = 'Type here..'; }" onfocus="if(this.value == 'Type here..') { this.value = ''; }" name="s">
<button type="submit">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(".searchbox").autocomplete({
source: function(request, response) {
console.log(request.term);
$.ajax({
url: "http://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': request.term
},
success: function(data) {
response(data[1]);
}
});
}
});
</script>
</body>
</html>
There are indeed a lot of questions to open about Wikipedia's category system. Thankfully, there is a better way.
Here is an alternative approach that will get you what you need from Wikipedia search: you can use search parameters with Wikipedia's CirrusSearch API to get articles within a category (via incategory:<category title>), with a link to another Wikipedia page (via linksto:<page name>), or by a page that transcludes a common Wikipedia template (via hastemplate:<template name>). If you know the right Wikipedia category or page, you can use the first two options easily. Although the last one might sound odd, Wikipedia's well organized template system may be your best bet. Many band articles will have a common infobox on the right that will help you narrow your search to bands.
You can use CirrusSearch and hastemplate:Infobox_musical_artist together like this:
https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=hastemplate%3AInfobox_musical_artist+daft
Which returns a list of pages in this format:
{
"batchcomplete": "",
"continue": {
"sroffset": 10,
"continue": "-||"
},
"query": {
"searchinfo": {
"totalhits": 470,
"suggestion": "hastemplate:Infobox_musical_artist dart",
"suggestionsnippet": "hastemplate:Infobox_musical_artist <em>dart</em>"
},
"search": [
{
"ns": 0,
"title": "Daft Punk",
"snippet": "<span class=\"searchmatch\">Daft</span> Punk are an electronic music duo consisting of French musicians Guy-Manuel de Homem-Christo and Thomas Bangalter. The duo achieved significant popularity",
"size": 76278,
"wordcount": 8170,
"timestamp": "2016-02-08T01:33:54Z"
},
...
Here is a CodePen demo: http://codepen.io/slaporte/pen/obmaWY
It still may not capture 100% of the bands on Wikipedia. If there are specific subgenres you are looking for you, you can try using the hastemplate parameter along with links or categories to narrow or expand your search. You can learn more about the other Wikipedia CirrusSearch parameters here.
By the way, this is an interesting approach to autocomplete!
Related
That's it, my costumer has a website that has free content for professions like doctors and attorneys, that have a number they can prove they're from the proffession.
The content is hidden behind a registration that asks for that number, but aside from that, the registration is free.
I'm going to create preview articles for the website, so search engines can index titles and content previews.
From the research I've done, I found that for paywalled content, there is a isAccessibleForFree property that can be set to false, but how do I tell search engines that it's behind a "Free paywall"?
More specifically, what's the markup for telling them the content is free but not available without a login?
More specifically, what's the markup for telling them the content is free but not available without a login?
The isAccessibleForFree property is exactly what you need. Its purpose is to explain that the content is not directly accessible, regardless of whether this is due to the fact that you need to log in. Here is an example implementation provided by Google:
<html>
<head>
<title>Article headline</title>
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "NewsArticle",
"headline": "Article headline",
"image": "https://example.org/thumbnail1.jpg",
"datePublished": "2025-02-05T08:00:00+08:00",
"dateModified": "2025-02-05T09:20:00+08:00",
"author": {
"#type": "Person",
"name": "John Doe"
},
"description": "A most wonderful article",
"isAccessibleForFree": "False",
"hasPart":
{
"#type": "WebPageElement",
"isAccessibleForFree": "False",
"cssSelector" : ".paywall"
}
}
</script>
</head>
<body>
<div class="non-paywall">
Non-Paywalled Content
</div>
<div class="paywall">
Paywalled Content
</div>
</body>
</html>
The rest of the details could be found on their website: Structured data for subscription and paywalled content
While there's not much available detailing what happens on the server side of a Rest API written in VBScript, there is one article that addresses this issue: Can I build a REST application using ASP Classic?.
The bulk of that post describes various issues regarding JSON stringifying as well as acquiring data from a database. My question concerns neither of these. But ignoring these (and a few syntax errors), there is very little else in that post.
So, I admit to being very much of a novice regarding server-side behaviour. But when I strip away everything from the above-mentioned post, I am left with a quite bare few lines of code that appear to simply request an input value and then output a string. So I wondered if this is indeed all that is involved in the bare-bones I/O (i.e., ignoring the security and formatting issues). I decided to try this out. My results are puzzling. When I call this incredibly simple API, instead of receiving the very simple JSON string that is being sent, I instead get back the entire piece of source code comprising the API, from the opening HTML tag to its closure. I've obviously made a very fundamental error.
Here is my code. First, here is the extremely bare-bones REST API itself (please note: this is ONLY writing back an artificial JSON string. It's not even concerning itself with receiving the POST parameters.) This is "simplerest.asp"
<html>
<head>
</head>
<body>
<%
Response.Write("{" & Chr(34) & "SomeCert" & Chr(34) & ":" & Chr(34) & "12345"& Chr(34) & "}")
%>
</body>
</html>
And here is the code (utilizing jQuery) to call this "API" (testrest.asp):
<html>
<head>
<script type="text/javascript" src="/./include/jquery-3.4.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
function getCert(certNumber)
{
var settings = {
"async": true,
"crossDomain": true,
"url": "example.com/simplerest.asp",
"method": "GET",
"success": function (response) {
alert("success");
},
"headers": {
"Accept": "application/json"
}
}
$.ajax(settings).done(function (response) {
certvals = response;
alert("certvals is " + certvals);
});
}
getCert("dummy");
</script>
</body>
</html>
As I stated above, when I run the calling logic, what is returned in certvals is the precise ASCII representation of the entire "API" code. In the spirit of what I am attempting, which is to see an API running in its most elementary mode, can someone enlighten me as to what dumb error I am making?
Assuming you have Classic ASP installed and enabled in your website (IIS), use;
<%
'Tell client you are sending JSON
Response.ContentType = "application/json"
Call Response.Write("{""SomeCert"":""12345""}")
%>
Because you had the JSON encapsulated in a HTML structure it was just being output as a string in the HTML page.
Also, there is no need for Chr(34) when you can escape double quotes in strings by doubling them.
In regard to the comments, here is a fully working example tested using a local instance of IIS.
<html>
<head>
<title></title>
</head>
<body>
<button id="buttonSend">Send</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$("#buttonSend").on("click", function() {
getCert("dummy");
});
function getCert(certNumber)
{
var settings = {
"async": true,
"crossDomain": true,
"url": "example.com/simplerest.asp",
"method": "GET",
"success": function (response) {
alert("success");
}
}
$.ajax(settings).done(function (response) {
certvals = response;
alert("certvals is " + certvals.SomeCert);
});
}
</script>
</body>
</html>
Outputs (two messages):
success
certval is 12345
Useful Links
How to guide for getting a classic asp application working under IIS 7.0
ASP Classic setup issues
I have already enabled classic asp support on IIS for windows 7, and configured IIS web for classic asp,Yet .asp page is not being displayed?
About using Double quotes in Vbscript (Explains how to escape double quotes in VBScript)
I want to create a site with a 360 video thats streamed from my computers 360 cam (ricoh theta s) and uses the possibilites of a-frame. I did not have any luck with embedding youtube livestreaming within a-frame though. I would have a webserver and the stream would not be really public so maybe there is some solution that involves selfhosting? Does anybody have any experience with achieving sth like this? i cant find anything related so far and this plays a crucial role in my robotproject...
EDIT 1:
I might specify even more after some research:
it would be perfect if a-videosphere and a-video would support sth like hls or mpeg-dash - streams. since that would need some kind of player for chrome and android stuff i think the easiest route would be to support a motionjpg-support because they are very easy to create. flashstreams can be good too but i dont think there is a future for that.
is there anything like that in the planning by someone because i am quite sure that nothing like that exists yet... i took 2-3 days of researching and find nothing about that topic... just a getUserMedia for webcam example showed up but its not good for my purpose.
another approach i could live with would be a routine that just autoreloads pictures in a-sky (if possible without flickering). i tried to integrate javascripts that are supposed to do that within normal divs and so but nothing worked...
or did somewhere someone get a stream of any kind running in a-videosphere and if so how?
EDIT 2:
i got it working... somehow... not really but looks promising...
the stream is provided by "yawcam" which uploads a new picture every second to my ftp. if i now click on the red sphere the script starts via addEventListener 'click' and the content of a-sky gets updated... is there any way to make a loop out of that script so one doesnt have to click anymore and it just update itself every second?
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video — A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init() {
const sky = document.querySelector('a-sky');
this.el.addEventListener('click', () => {
sky.setAttribute( 'src', this.data + "?" + Math.random());
});
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336" radius="8" position="-8 2 -8" set-sky="image1.jpg"></a-sphere>
<a-sky></a-sky>
</a-scene>
</body>
so here is the solution for the proposed "kind-of" solution...
the picture "out" is updated via "yawcam" on my server every second and updated in the a-sky tag - even without flickering... so no sound but at least kind of a live-video-feed in a-sky.
<head>
<meta charset="utf-8">
<title>joeinterface</title>
<meta name="description" content="360 Video � A-Frame">
<script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent('set-sky', {
schema: {default:''},
init: function() {
this.timeout = setInterval(this.updateSky.bind(this), 100);
this.sky = this.el;
},
remove: function() {
clearInterval(this.timeout);
this.el.removeObject3D(this.object3D);
},
updateSky: function() {
this.sky.setAttribute( 'src', this.data + "?" + Math.random());
}
});
</script>
<a-scene>
<a-camera position="0 0 0">
<a-cursor color="#4CC3D9 " fuse="true" timeout="10"></a-cursor>
</a-camera>
<a-sphere color="#F44336 " radius="2" position="-8 2 -8"></a-sphere>
<a-sky set-sky="out"></a-sky>
</a-scene>
</body>
I've created an iteration burn-down chart in the code below. When we try to launch this from a web server with the apikey appended we see a window generated with the Rally Login screen not the graph. If you are already logged into the Rally tool, the graph does generate correctly. We only see this issue with the standard report as code generated using treegrid does work as expected when the APIKey is appended to the path.
Thanks!
Mark
<!DOCTYPE html>
<html>
<head>
<title>iterationburndown</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.create("Ext.Container", {
context: {},
items: [{
xtype: "rallystandardreport",
width: 750,
height: 500,
reportConfig: {
report: "IterationBurndown",
iteration: "April",
subchart: "hide",
title: "Iteration Burndown"
},
project: "https://rally1.rallydev.com/slm/webservice/v2.0/project/51186097359",
projectScopeUp: !1,
projectScopeDown: !0
}],
renderTo: Ext.getBody().dom
});
Rally.launchApp('CustomApp', {
name: "iterationburndown",
parentRepos: ""
});
});
</script>
<style type="text/css">
</style>
Unfortunately this is a limitation with those old style charts rendered by the Standard Report component. The A1 service those use does not support API Keys.
The best you'll be able to do would be to re-implement the chart using the Rally.ui.chart.Chart component and the Lookback API.
Some resources:
https://help.rallydev.com/apps/2.1/doc/#!/guide/lookback_api
https://help.rallydev.com/apps/2.1/doc/#!/guide/data_visualization
There's also a related app already implemented for a release burndown you could use as a place to get started: https://github.com/RallyApps/app-catalog/tree/master/src/apps/charts/burndown
Is there anyway to use JSON-LD without including the script inline in the HTML, but still get Google (& other) spiders to find it? Looking around I've seen some conflicting information.
If this was the JSON-LD file:
<script type="application/ld+json">
{
"#context" : "http://schema.org",
"#type" : "WebSite",
"name" : "Example Site",
"alternateName" : "example",
"description" : "Welcome to this WebSite",
"headline" : "Welcome to Website",
"logo" : "https://example.com/public/images/logo.png",
"url" : "https://example.com/"
}
</script>
And I have this in the head of the HTML:
<script src="/public/json-ld.json" type="application/ld+json"></script>
EDIT: I've also tried:
<link href="/public/json-ld.json" rel="alternate" type="application/ld+" />
Google Spiders seem to miss it and so does the testing tool unless I point it directly at the file. I'm trying to work around unsafe-inline in the CSP. And the only thing I can find is this, which would work in Chrome but don't want to be firing console errors on every other browser. Plus, I just like the idea of Schema.org data being abstracted out of the page structure. Would adding the JSON-LD to the sitemap for Google Webmaster Tools help?
Apologies, total noob to JSON-lD and keep ending up in email documentation (this would be for a site) or old documentation.
True, it can not be made external and it is not supported inline, but you can still achieve what you want by injecting it into the DOM via a JavaScript file.
Note: I am using an array for neatness so I can segment all the structured data elements and add an infinite amount of them. I have a more complicated version of this code on my websites and actually have an external server side rendered file masquerading as a JavaScript file.
An yes Google search bot does understand it. May take days for it to register and using Webmaster tools to force a re-crawl does not seem to force a refresh of JSON-LD data - seems like you just have to wait.
var structuredData = {
schema: {
corporation: {
'#context': 'http://schema.org',
'#type': 'Corporation',
'name': 'Acme',
'url': 'https://acme.com',
'contactPoint':
{
'#type': 'ContactPoint',
'telephone': '+1-1234-567-890',
'contactType': 'customer service',
'areaServed': 'US'
}
},
service: {
'#context': 'http://schema.org/',
'#type': 'Service',
'name': 'Code optimization',
'serviceOutput' : 'Externalized json',
'description': 'Inline json to externalized json'
},
},
init: function () {
var g = [];
var sd = structuredData;
g.push(sd.schema.corporation);
g.push(sd.schema.service);
//etc.
var o = document.createElement('script');
o.type = 'application/ld+json';
o.innerHTML = JSON.stringify(g);
var d = document; (d.head || d.body).appendChild(o);
}
}
structuredData.init();