fun with javascript : transition to a URL via a POST

To transition in an HTML/JS page is easy. window.navigate and you're there.
Passing parameters : no problem, just put the query string in the URL.

However, when the parameters you want to pass get a bit BIG (>2000 chars approx), the query string gets chopped....

No problem, we just use a POST and pass the parameters in the body as multipart/form-data, don't we?

But in html dom, no way to do this cleanly in JS. Sure, ajax allows to send data to a URL as a post, but we don't transition the page...

Seems like to only way is to auto-generate a <form> in the html page, fill it in with the parameters as <input> fields, and submit it ourselves...

Heres the code I ended up with, and specifically the first method which is very useful when your URL already has the massive query string lined up and ready to go (so you want to parse it into input fields, rather than having it as a nice separate params map).

Note that the first method is based on code I found on Chris West's blog, except that his regex replaces didn't work for me so I had to adapt them.


// Post to the given URL, extracting its params to be POST body params
function postUrl(url) {
var form = document.createElement("FORM");
form.method = "POST";
form.enctype = "multipart/form-data";
form.style.display = "none";
// extract the query string part (and replace with ""), and it gets passed to the
// first closure function (e1 is the whole match, urlArgs is the match without the ?
form.action = url.replace(/\?(.*)/, function(e1, urlArgs) {
// Now decompose the query string into each key=value pair, and treat each one found
// Again, the closure function gets e2 as the full match string, key,value as the submatches
urlArgs.replace(/([^&=]+)=([^&=]*)/g, function(e2, key, value) {
// By creating a new INPUT element in the form.
    var input = document.createElement("INPUT");
    input.type = "hidden";
    input.name = decodeURIComponent(key);
    input.value = decodeURIComponent(value);
    form.appendChild(input);
    return "";
});
return "";
});
document.body.appendChild(form);
form.submit();  
}

// Post to the given URL (which should have NO params), passing the given params
function postUrlWithParams(path, params) {
    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.
    var form = document.createElement("form");
    form.setAttribute("method", "POST");
    form.setAttribute("action", path);
form.setAttribute("enctype", "multipart/form-data");

// Note that this doesn't deal with a param which is an array... an exercise for the reader if required
    for(var key in params) {
        if(params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
         }
    }

    document.body.appendChild(form);
    form.submit();
}

Enjoy...

using openId and mobile phone to create a secure authentication method...

OpenId is a great system to provide Sngle Sign on across multiple web applications. (check out www.openid.net)
 I already had a simple OpenId server set up on my home domain to test it. However, thinking about authentication, I'd prefer to have something where just capturing my user/password wouldn't work. (especially if that then gives you access to ALL my accounts).

The rule to authenticate someone is to check at least one of the following
 - something they know (user/pass)
 - something they have (physical key, card)
 - somehting they  are (biometrics)
Checking just one element can lead to problems (theft of object, password stealing etc). Good practice is therefore to use at least 2 of the elements together.

So, I think what I want is to centralise with OpenId, and then enter a password but on a separate physical object that I always have with me.... my phone!

By changing my OpenId server, it will send an SMS to my phone requesting authentication. The reply to the SMS must be the valid password (stored on my OpenId server).
Hence, the only way to authenticate is to have both the password AND my physical phone! And to disable my logins (in case of losing my phone for instance), I just need to reconfigure the phone number in the server.

To make the phone experience even better, I can use onX to detect a magic word in the requesting SMS (OpenId for example) and popup a notification dialog to request the password, and automatically send the response.

Well, thats the plan anyway....

And in phase 2, add a biometric validation (face recognitiion?) to the phone app! (TODO...)

More onX and SMS

Our nagios monitoring system sends SMS for serious alarms to the mobile phone of the person who's on astreinte. If they don"t acknowledge, it escalates by sending them to me....

However, on the S3, I find the standard SMS notification sounds are emenently missable...

No problem  using onX (see earily posts), I get event for reception of SMS, check for the magic phrase (Alarm), and use a blocking popup notification with 'yes/no' buttons to force me to notice the problem, and allow easy acknowledgement without any other manipulation!

so cool....

Fun with magnets

Got fed up losng my phone under stuff on my desk, so I wanted to be able to have it attached somehow to a vertical surface...

I thought of using a car grabber thing, but then I thought of magnets....

Ordered a bundle of super string doughnut magnets from Amazon. Glued 4 to a spare phone back that I had for my Galaxy S3. et voila, my phone sticks to any metal surface - Fridge, metal plate, etc...
At work I have a metal plate intended for use with magnets to hold papers : I inclined it at about 70deg and it holds my phone up out of the mess and visible at all times...

I'd take a photo, but I'd need my phone for that...

So, I still had some magnets left.... and when we got a new micro video projector at work, it didn't have a way to mount it onto a tripod (to hold it up off the desk to be able to project on the wall easily).... solution: a metal plate (a server 19" rack mounting ear...) attached to the tripod screw, and 4 magnets glued to the bottom of the VP...
Holds it perfectly, and allows easy manipulation!

Now I'm thinking that it should be possible to make my own 'magsafe' type power connector with these things...

URLs in SMS

Playing with onX again, and created a rule to reply to SMSs from my children when they send 'where are you?'. The keyword here is "where", and I want to reply with the phone location.

No problems to get the GPS co-ords using the onX js api, and format a reply SMS. However, the raw co-ords are a bit unfriendly... so I also send a google maps url, with the "q" parameter for the co-ords.

eg :

http://maps.google.fr?q=45.1234,5.434

This worked nicely on iPhone (the receptiant just clicks on the link et voila), but on Android, it doesn't see the whole thing as a URL (only up to the ?). The solution? add a / after the server ie:

http://maps.google.fr/?q=45.1234,5.434

Both work on google maps, but only the second integrates nicely with android....

API Please

Where's the API?

If This Then That (ifttt.com) is a nice idea to link together different web services and allow some rule based automation.

They have a bunch of 'channels' with 'triggers' (make a rule happen) and 'actions' (do something to this channel). Channels include blogger, facebook, twitter etc...

This is pretty nice (even if there's no Google+ channel, so I can't automatically duplicate everything from G+ over to facebook...., and the twitter channel doesn't trigger on received tweets....)

However, major lack : no open api to create your own channel? Something http REST based wouldn't be hard, and would let anyone create a channel into their app/web site etc... and then I could link onX into IFTTT and replicate my SMS feed to twitter....

All I can say is: WTF IFTT. Go REST & we'll all be LOL...

Javascript objects

JS does objects, but kind of weirdly...

A JS object class : it starts of as a function which is the constructor

function AcdBAPI() {
}

Add a STATIC method:
AcdBAPI.mystaticmethod = function(param1) {
}

An INSTANCE method
AcdBAPI.prototype.mymethod = function(param2) {
  this._myp = param2;
}

Instance variables : just referenced as this.varname

Using KML in google maps

Well, I wanted to...

KML : https://developers.google.com/kml/documentation/?hl=fr

So I have a servlet, holding a list of POIs. And I return the KML as required...

To load google maps with a direct KML file or source:

https://maps.google.fr/maps?q=http://monserver.net/monservlet?action=get&name=mypoi

Normally this should work.... but although the map loads, it doesn't seem to want to show the pushpin with the POI...

What did I learn? that it looks nice and simple, but when it doesn't work its pretty hard to find out why....

Using onX to program my android phone in javascript

A very useful little app : as it allows 'rules' on your android phone with a near-complete access to the smartphone functionality from JS.

https://www.onx.ms

What is it good for? in my case, starting the music player at full volume when I plug in the headset cable in the car! 

Otherwise, I had to unlock the phone, select the music player, put the volume up to max (as otherwise its inaudible due to the 3.5mm jack hookup I use in my Touran), and press play... all while driving off..

Now, I just plug in the jack and it all happens automatically...

What did you learn today? Owt or nowt?

Maybe its age, but days seem to slip past too fast. So, a resolution; try to learn or experience one new techy thing every day and post it here.

Today's new thing : cross-domain client side web integration : use postMessage(). It has limitations (especially on IE : thanks microsoft) but does the job in a world of iframes...

Go here for info on the problem:
http://en.wikipedia.org/wiki/Same_origin_policy

Here's a good article explaining the use:
http://72lions.com/2011/05/cross-origin-communication-with-html5

and here's the browser support matrix:

http://caniuse.com/x-doc-messaging