Tuesday, January 27, 2009 1:29 AM
The title of this post should really read - "JavaScript framework to the rescue", because it really doesn't matter if you use JQuery, Prototype, etc.. I interchange the use of my JavaScript frameworks with JQuery and Prototype being my favorites and I really don't know why I select one over the other, I guess it depends on the day.
Anyway, while working on a freelance project, I was tasked to implement a PayPal subscription button and I went "ah ha!" - that's going to be easy and indeed it was, but, the problem was/is that PayPal quick add on buttons required a form tag to perform the actual post and if you are like me, and you make intensive use of master pages and tend to put the form on the top level master page, you will quickly find out that PayPal buttons will not work and that's because the top most form will perform the post in the asp.net world, therefore, your page will act like a normal post back and off course you can't do without it.
My first reaction was "Oh, really! someone has to have figured it out" and yes there were several solutions but not of them really blended in well with my programming rules and regulation and the one I'm speaking of at this moment, is my rule that states everything must be simple and disconnected and requires absolutely no effort to move, change, or modified - in other words loosely coupled.
I found solutions that will create custom forms that have flags that indicated whether or not a form tag should be written or not, I saw other solutions that simply just remove the form tag from the PayPal and do some sort of hack to wire things out, I saw another that uses a HttpHandler to perform the post behind the scenes, either way, they were all too expensive and too convoluted to implement. So I invented my own, my thought was what if I could change the top form action URL depending on what was clicked.
I therefore set off to analyze the PayPal button html and noticed that there were a few tags that are unique to the PayPal html and I definitely don't have anything in the current project with such names and that was it! JS framework to the rescue! here is my sample snippet that seems to work fine so far.
1: if ($('input[name=submit]') && $('input[src=https://www.paypal.com*]') && $('form#aspnetForm')) {
2: $('input[name=submit]').click(function() {
3: $('form#aspnetForm').attr('action', 'https://www.paypal.com/cgi-bin/webscr');
4: });
5: }
My line 1 may be an overkill but I just wanted to make sure that we have some form of PayPal form content on the page and its located within an asp.net form, I then attached to the on click event of the button and modified the top most form's action attribute when that event is fired, otherwise, everything else works as normal - now, that's what I call simple and efficient 5 lines of code.