Tag Archives | jquery

jQuery form submit handling and inline onsubmit woes

jQuery’s event handling triggers in the bubbling phase, which is fine for most usage. I had to write some JavaScript to traps the submission of forms on any webpage, naturally, I wrote something like this:

$('form').each(function(e){
  $(e).submit(function(e){
    console.log("submitted!");
}

This works for most forms, but since we don’t have any control of what types of forms our users put on their sites, it doesn’t work in 2 cases: (a) when there is an inline onsubmit on the form tag, this is pretty common, the Feedburner email subscribe form does this, and (b) when the form is within an iframe on the page.

The fix for (a) is not trivial, I found out that the bind submit event is called after the inline onsubmit, so first thought was to put what I need to do on submit into a function, and prepend that in the onsubmit. However, this didn’t work as $(‘form#some-id’).attr(“onsubmit”, “blah”) didn’t set the value. So after a bit of experimenting, I ended up having to remove that attribute, but remember the contents of it and call it in an annon function at the end of execution, it looks like this:

$('form').each(function(i,e){
  var onsubmit = $(e).attr("onsubmit");
  if (onsubmit != null) {
    $(e).removeAttr('onsubmit');
    onsubmit = new Function(onsubmit);
  }
  $(e).submit(function(e){
    console.log("submit pressed!");
    if (onsubmit != null) onsubmit();
  })
})

Now on to finding a solution for the (b) iframe case.

Tags: , , ,

WordPress image lazy-loading plugin

Recently I’ve been spending a lot of time on a new Rails project that deals with photos and it also uses a lot of jQuery. I love the jQuery image lazy load plugin and thought since my blog is pretty image-heavy, it’d benefit from it too. It’s trivial to use this plugin, but since my blog tracks WordPress via Subversion, I wanted to do it as a plugin so I wouldn’t have to touch the WordPress code. After 15 minutes or so I hacked together a plugin for this.

You can download it at the plugins directory at WordPress. It’s also available on Github.

It took a day to get commit rights to the Subversion repo of WordPress, since I use Git and had already pushed to Github, it was a bit of an annoyance to add the empty Subversion repo with git-svn. I won’t go into the steps, but this thread helped a lot. I must say that since it’s a shared Subversion repo, the revision number was 119065 to start with, so git svn fetch took a very long time. I spent almost an hour to get to the point so I could do git svn dcommit. And now every time I do dcommit it takes a while coz it pretty much has to compute the diffs between all the recent commits and apply them to Subversion. After using Git for so long I forgot how painful Subversion was.

Tags: , , , ,

Rails plugin/helper to provide “click to copy text field” (to clipboard)

You often see sites with text fields of share links in various different formats, like Skitch provides links to share the images you skitch, they look like this:

Skitch.com > andrewng > Energy Saver
Uploaded with plasq‘s Skitch!

You often click the text box or a copy button next to it and the content is copied to your clipboard so you can paste it into a tweet, a blog or forum post and what not.

I needed something like this for one of my projects, it is pretty easy to do, and there are things you can use to do this. However there isn’t a super simple way to do this in Rails, maybe it’s so simple that nobody bothered to publish a plugin. Well, just for kicks I’ve created a plugin that lets you do exactly this by using a cilick_to_copy_text_field_tag helper in your views. This plugin requires jQuery or jRails, neither of which is part of standard Rails, but they are pretty easy to add to any Rails project.

The plugin is hosted here: http://github.com/ayn/click_to_copy_text_field/tree/master, the README pretty much tells all you need to know to use it.

Tags: , , , , ,