✓ I'm available for hire! Check out my open source work on Github or drop me an email

Douglas F Shearer

Posts Tagged with javascript

There are 5 matching posts.

Clearing a File Input Field Using JQuery

While working on some file uploads today, I was in need to a way to clear a file input field if a user changed their mind after selecting a file. I came up with the following simple solution.

In my example I place a ‘clear’ link next to the field, but a modified method could be called from anywhere.

HTML

Wrap the field you intend to clear in a span, with a descriptive ID so we can find it.

We’ll also want our ‘clear’ link to be descriptively IDed.

<span id="myfileinput"><input type="file" name="myfile" /></span>
<a href="" id="clearmyfile">clear</a>

JavaScript

Now in our JavaScript (JQuery) we want to add a click event to our clear link which will clear the file input field.

$('#clearmyfile').click(function(){
  var fieldSpan = $('#myfileinput');
  fieldSpan.html(fieldSpan.html());
});

Explanation

Since we can’t write to the value of a file input field due to security concerns, instead we overwrite the contents of the span, with the contents of the span (itself), thus creating a new file input DOM object which doesn’t have a value set.

A crude but working example can be found in this Gist.

 
 

GitHub Bookmarklet Updated

I’ve added support for Github’s repository search and making use of their new search to Github Bookmarklet.

Get it

Drag this to your bookmarks bar: Github Search.

Repository Search

As for user and code-search, but use the r: prefix. You can also use any of the GitHub macros as defined in the blog post linked from above.

r: will_paginate

Docs etc

 
 

GitHub Bookmarklet Now Supports Code Search

I’ve added support for Github’s new code-search feature to Github Bookmarklet.

Get it

Drag this to your bookmarks bar: Github Search.

Code Search

As for user-search, but use the c: prefix. You can also use any of the GitHub macros as defined on the code-search page

c: badger language:ruby

Docs etc

 
 

Announcing GitHub Bookmarklet

You have to love GitHub! Just last week I was saying to Kamal on the phone that I now instinctively search for a project on GitHub before Google, because it’s likely to be there, and grabbing a copy or just browsing the source is made so easy for me.

What a shame it’s an extra few clicks to search it. Until now! Enter the GitHub Bookmarlet!

Install

Save the following link as a bookmark, or drag it to the links/bookmarks bar in your browser:

Github Search

If you get stuck, Delicous have a lovely guide to bookmarklet installation.

Usage

When you click on the bookmarklet, it’ll give you a text prompt. Type in the name of the project you want to search for, and hit return. You’ll be taken to the GitHub search page for your query.

Hitting ESC or Cancel leaves your browser in it’s previous state.

User Macro

Want to search for a user? Type in ‘u:’ followed by your query. So for instance to look at Kamal’s github account, I would type in: u:kamal.

Hitting Return or OK now takes you straight to the user’s Github profile, or shows you a 404 if there is no such user.

Code Search

As for user-search, but use the c: prefix. You can also use any of the GitHub macros as defined on the code-search page: http://github.com/codesearch. c: badger language:ruby.

Acknowledgements

Future

If you have any suggestions, send me a message on GitHub, or fork the project and throw me a pull-request once you’ve made your changes.

 
 

JQuery on Rails

Now, I know I am totally late to the party on this one, but how much does JQuery rock??

For several years now I have done all of my JS stuff using the Prototype and Scriptaculous libraries. I think they’re pretty awesome tools, and certainly being part of the standard Ruby on Rails package has helped them gain a lot of respect and usage.

Today I had to do a fairly complex piece of UI prototyping that involved a lot of complex JS. It took me about an hour to do it with Prototype, but I wasn’t completely satisfied with the results. Some of m fellow ZoeCity devs had been talking about JQuery for a new project we’ve just started, so I thought I’d give it a bash. 20 minutes later I had a functional better implementation, with less, neater looking code.

What About Rails?

As I’ve already mentioned, Rails ships with Prototype, so how do you go about using JQuery in these places? Enter JRails by aaronchi. This is a Rails plugin which replaces all the regular Prototype utilizing helpers with JQuery. Sorted!

JQuery is stupidly easy to learn, especially for anyone from an OOP background, so you should definitely give it a try on your next project.