SoundCloud: callback.html popup doesn't close - authentication

I've registered my SoundCloud app.
I'm trying to implement the SoundCloud JS example code with the "callback.html" API
https://developers.soundcloud.com/docs/api/sdks#authentication http://connect.soundcloud.com/examples/recording.html
When I upload a recording, I get the authorization-login popup.
After I login, the popup says "This popup should auto close..."
But the popup doesn't close.
And the recording isn't uploaded.
I'm positive SC.initialize has my correct "clientID" and is referencing "callback.html" correctly from my directory.
Am I missing something? maybe "client secret"?
SC.initialize({
client_id: "xxxxxxxxxxxxxxxxxxxxxx",
redirect_uri: "http://www.example.com/callback.html"
});
One time (fluke) instead of the normal pop msg "This should close", the message said "502 Bad Gateway". But I havent been able to reproduce this msg.

SoundCloud's sample code is broken.
This is from SoundCloud's callback.html
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
This is how I got it to work:
<body onload="window.setTimeout(window.opener.SC.connectCallback, 1)">
SoundCloud's connectCallback uses this.location to collect the OAuth access token. If you set the timeout on window.opener, inside connectCallback this will refer to your app's window and the location will be your main page. Whereas setting it on window will bind this to the callback popup window, and this.location will contain the access token in the query arguments.

I also faced the same issue, and found the solution, if you change your callback.html to below two options, it will work -
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="window.opener.setTimeout(window.opener.SC.connectCallback, 1)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
<script type="text/javascript">
window.opener.SC.connectCallback.call(this);
</script>
</body>
</html>
Or
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Connect with SoundCloud</title>
</head>
<body onload="setTimeout(window.opener.SC.connectCallback)">
<b style="text-align: center;">This popup should automatically close in a few seconds</b>
</body>
</html>

Related

Some functions if the Telegram Bot WebApp is not working

thanks for your attention.
This is a simple webpage for a web-app bot.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bot Web App</title>
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<button onclick="Telegram.WebApp.HapticFeedback.impactOccurred('heavy');">Feedback</button>
<button onclick="Telegram.WebApp.expand();">Expand WebView</button>
<button onclick="Telegram.WebApp.close();">Close WebView</button>
</body>
</html>
Expand and close button working fine. The issue is with haptic feedback.
It is not working, not even the showScanQrPopup() or some other functions.
Can anyone tell me what is the issue? Or how to do them if my method is wrong?
My final target is to create a telegram bot that will scan a qr code and send the code data to the server to process. And the server (bot) will send a confirmation message. The qr code must be scanned like #easyqrscanbot

htmx page send no data

Just discovery HTMX. Create a simple page
<html>
<head>
<meta charset="utf-8">
<title>
HTMX - elementary example
</title>
<script type="text/javascript" src="js/htmx.min.js">
</script>
<link rel="icon" type="image/x-icon" href="/HTMX/favicon.ico">
</head>
<body>
<button hx-post="cgi-bin/answer.cmd" hx-trigger="click" hx-target="#answer-div">
Retrieve answer!
</button>
<div id="answer-div">
DIR output shuld be displayed here
</div>
</body>
</html>
Nothing happens when click to button (no data sended to server - tested by wireshark). On developer console F12 is displayed error Uncaught SyntaxError: expected expression, got '<' What could be wrong?

JQuery Simple Form and Serialize Stopped Working

I don't know what happened. Yesterday this was working on a larger script I had. So I tried breaking it down to the bare minimum and still doesn't work.
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>
<body>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<form>
<textarea name="customer_type">1</textarea>
</form>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
</script>
</body>
</html>
It appears not to be executing the function. Again it worked fine yesterday in a larger script. I ran it with Firefox using Firebug. I even went back to the site where I got that function thinking I had some syntax error and re-pasted it.
Make sure you're adding the submit button. Check out my fiddle: http://jsfiddle.net/606wft3p/

Freebase suggest key

Freebase suggest looks great, so I wanted to test it. I first just copied and pasted their simple example in a new page and tested it locally. I got a list of results as soon as I started to type something in the input box, but the fly out pane stayed empty. Here the code of that page :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_0/suggest.min.css" />
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_0/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#myinput").suggest({
filter:'(all type:/film/film)'});
});
</script>
</head>
<body>
<input type="text" id="myinput"/>
</body>
</html>
If I search for example for Star Wars there is no image and no text that is loaded into the fly out pane. I thought it was because I had no API key, so I got one on google's API console and added "http://mysite.com:8888/mysite.com/" as a referer (I'm testing this in a MAMP folder). As explained on the wiki page I've added my key to my code.
$("#myinput").suggest({
key:'my key',
filter:'(all type:/film/film)'});
});
Now when type in something in the input box I just get "Searching..." as a result. I suppose I did something wrong on the google API console, I'm not sure what referees I should enter.
Ok I figured it out, my referers on Google's API Console where wrong. The right format for my local address was simply :
mysite.com:8888

dojo.image.Gallery does not work with addOnLoad?

This is really weired, I'm trying to use dojo.image.Gallery, but when I require the dojox.image.Gallery, the dojo.addOnLoad() does not fire, however if i comment the line which require dojo.image.Gallery, i can see 'onload' in the console, code is like below
anything i missed?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Testing the Image Gallery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require('dojox.image.Gallery');
dojo.require('dojox.data.FlickrRestStore');
dojo.require("dojo.parser"); // find widgets
dojo.addOnLoad(function(){
console.log('onload');
});
</script>
</head>
<body>
<h1 class="testTitle">dojox.image.Gallery</h1>
</body>
</html>
I do have this same problem. After some effort, I happened to find out that with the full version dojo-release-1.7.2-src, it WORKS. Does it have anything to do with javascript compression? Kindly share if any one happens to know why...