Inject jQuery on any website

Feb 20
2013

I spent some time Googling around for javascript injection techniques, and stumbled on a neat little bookmarklet that allows you to inject jQuery into any website, and then use the FireBug console to play around with the page. In addition to how much fun this is, having the smooth jQuery syntax at your fingertips mixed in with FireBug is a great debugging technique for developers.

Many kudos goes to Karl Swedberg for posting his bookmarklet and technique at http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet/.

Go check it out!

Firefox Inspect Element

May 08
2012

I’d like to write up a bit more on this at a later time, but moving quickly.. a quick way to inspect an element on the DOM is to use Firefox’s Inspect Element tool. It’s very handy for quickly figuring out the CSS selectors and attributes belonging to an element on the page, as well as checking for value changes when working with a dynamic page.

Try it out!

Right click an element and choose Inspect Element

Useful information at a click!

n3rds.com – Jobs for Programmers

Mar 08
2012
Jobs for Programmers

Jobs for Programmers

Two colleagues out of St Louis, Josh Anyan, and Chris DeGroat, recently created n3rds.com – a website for matching up tech industry jobs with candidates. They gave me a heads up, and I was pretty impressed – as I generally am by these two. I thought I’d give them a call out on my site in hopes to send them what little traffic I can muster. Here is a review:

n3rds.com aims to be low friction, my entire experience on the site was just a few minutes, here are some highlights:

  1. The login system is all via the linkedIn API ( how suitable ). This makes it super easy to sign up, and connect with the most relevant professional social network out there – NOT your facebook.
  2. You’re immediately asked a few questions about locale, skillsets, salary ranges that interest you.
  3. Next, your taken to a listing of matching jobs – where you can pick and choose what interests you and go from there.
  4. As new jobs that match your skills come into the system, you are notified. This is a nice way to keep a pulse on opportunities, without throwing your resume on the market.

n3rds.com launched a few days ago and is currently in beta. If you’re a recruiter or employer, head on over and toss up a few job postings. It’s free! If you’re a techie, might as well sign up – it’s pretty frictionless, and you never know where you’ll find the next big thing.

For the record: Chris DeGroat and Josh Anyan are rockstar developers, they knocked this product out in just a couple short weeks. Keep tabs on these guys.

Nice work gentlemen.

Convert an XHTML form to a JSON object, then use jQuery’s AJAX methods to send the data to the backend

Jan 29
2009

I had a project at work that almost drove me insane tonight. When it comes to Javascript, forget what you know about other languages, and get in the mode of: “all objects are hashes”.

Case Scenario:

You have a form with lots of dynamically created input fields. Instead of a normal submit button post, you want to send the data to the backend using AJAX.

Problem:

After hours of Googling, you just can’t find information on dynamically populating a JSON object. You also want a clean and simple way to grab all that form data, put it in a JSON object, and then submit it with jQuery‘s wonderfully simple AJAX methods.

Example Solution:

XHTML from a dynamically generated form
I left some code out for simplicity, but just imagine it’s there. The inputs below are added dynamically, and can be infinite.

<form id="invite_users">
    <fieldset>
        <input name="users[0][name]" type="text">
        <input name="users[0][email]" type="text">
    </fieldset>
    <fieldset>
        <input name="users[1][name]" type="text">
        <input name="users[1][email]" type="text">
    </fieldset>
    <fieldset>
        <input name="users[1][name]" type="text">
        <input name="users[1][email]" type="text">
    </fieldset>

    <!-- ...etc...etc.. -->

    <a href="javascript:void(null)" id="#submit_form">Submit</a>
</form>

jQuery Goodness

Here is the sweet part. In this example, we just iterate through all the input fields dynamically, and place them in a JSON object — which is what jQuery’s ajax method uses to send the data back to the server.

$(document).ready(    function() {
    $("#submit_form").click(function() {
        var data = {}

        $("form#invite_users > fieldset > input").each(function() {
          data[$(this).attr("name")] = $(this).val();
        });

        $.post("post_form.php", data, function(returnData) {
          alert("Thank You!");
        });
    });
});

Easy enough?

But wait!  There’s an even better way.  With the above example, we don’t account for complex element types passed in the request ( ie, radio boxes, check boxes, file inputs ).  Once again, jQuery simplifies things even further with serializeArray():

    $("#submit_form").click(function() {
        var data = $("form#invite_users").serializeArray();

        $.post("post_form.php", data, function(returnData) {
            alert("Thank You!");
        });
    });

Hope this helps others out there! Leave a comment on your thoughts!

Visit Other Sites!

Find me on other sites...

Archives

All entries, chronologically...

Pages List

General info about this site...