JQuery Simple Form and Serialize Stopped Working - serialization

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/

Related

dojo first hello dojo tutorial did not work

The first hello dojo tutorial which is provided at the main site https://dojotoolkit.org/documentation/tutorials/1.10/hello_dojo/index.html did not work for me.
I copy pasted the code, but the 'Hello' remains as is. The em tag does not get added. Any help!
I downloaded the dojo.js and put the file in the same place where the hellodojo.html is. And then I changed the code of hellodojo.html as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
</head>
<body>
<h1 id="greeting">Hello</h1>
<!-- load Dojo -->
<script src="./dojo.js" data-dojo-config="async: true"></script>
<script>
require([
'dojo/dom',
'dojo/dom-construct'
], function(dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<em> Dojo!!~!!</em>', greetingNode);
});
</script>
</body>
</html>
Here you will see I changed the statement
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
to
<script src="./dojo.js" data-dojo-config="async: true"></script>
And then it worked as expected, since the dojo.js is now available.
I could see 'dojo.js' in chrome extension in source too.

SoundCloud: callback.html popup doesn't close

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>

Angular-UI ui-keypress not working

I'm having trouble getting even a simple use of angular-ui up and running. I want to be able to easily detect keypresses, for instance, to automatically add an item after pressing enter in a text box without having to press an Add button.
Here's my current attempt:
<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Main</title>
<link rel="stylesheet", href="http://angular-ui.github.com/angular-ui/build/angular-ui.css" />
</head>
<body ng-controller="Ctrl">
<button ng-click="add()">Add</button>
<input type="text" ui-keypress="{enter: 'add()'}" />
{{item}}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<script src="main.js"></script>
</body>
</html>
var myApp = angular.module('myApp', ['ui.directives']);
function Ctrl($scope) {
$scope.item = "";
$scope.add = function () {
$scope.item = "Item Added";
}
}
You can see the behavior here: http://jsfiddle.net/NbjZL/5/. Note that clicking the button after typing text works, but pressing enter after typing text does not. I've read what documentation I can find and have looked at several examples, but I'm sure I'm still missing some small thing.
Angular ui was not able to find the angular app. All you need to do is to specify the app name in ng-app to get it working.
<html ng-app="myModule" xmlns="http://www.w3.org/1999/xhtml">
Check the js fiddle to see the code work

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...