Ask us a question!

Web Moves Blog

Web Moves News and Information

Posts Tagged 'jquery'

jQuery Logo - Write Less Do More

dynoTable: A JQuery plugin for creating editable tables

A while back I was working on a project that required the GUI to allow the user to dynamically add, remove and rearrange various form fields contained in table rows. The tricky part was that the UI needed to have this functionality for several different types of elements across several different forms. For instance, one set of fields was for adding and removing specifications to a product while another set of fields was for adding images to a product. Thus, I needed a solution that would be flexible enough to work across virtually any type of form elements.

Naturally, I turned to JQuery. I first took a look around within JQuery’s plugin ecosystem to see if perhaps there was already a plugin that might do the job. While I did find a few different plugins for adding removing form elements, none of them did exactly what I needed, specifically re-arranging items… So, I was left with either trying to hack the functionality into an existing plugin, or roll up my sleeves and write my own. I choose the later option, since JQuery’s excellent extension mechanism makes writing plugins a fairly straightforward process. The result is the plugin below, which I call dynoTable.

What the plugin does

DynoTable makes an html table editable. With it you can:

  • Add rows
  • Remove rows
  • Clone rows
  • Click and Drag to Re-arrange rows (If you have Jquery UI included on your page)

Getting started with dynoTable is a snap. First make sure you have JQuery, and the dynoTable plugin, included in your page like so:


Pinterest Logo

Tracking Pins With the Pinterest Button

By: Bob Tantlinger

Recently I was tasked with logging social media interaction on a site utilizing the “buttons” (what do you call those anyway) of Twitter, Facebook, Google+, LinkedIn, and Pinterest.

We wanted to be able to record not only when a social media button was clicked, but when an actual share, like, or whatever took place. In other words, we needed to know that the user actually did the share. Nothing very difficult. Most of the big players in social media have handy APIs that let you subscribe to events they fire off when a share takes place, which makes this fairly straight forward. In a perfect world it WOULD be easy, but there’s -always- a monkey wrench lurking around the corner ready to ruin your day. In this case the monkey wrench was a royal “Pin in the Ass.” I am referring to, of course, Pinterest.

Pinterest is the newest social media fad, so their button is popping up all over the place at an alarming rate. Everyone is rushing to get their images pinned to the worlds biggest pin board. But there’s a problem. While Pinterest’s “Pin it” button works fine, they offer no offical API, so unlike the other social media services, there’s not much you can do with the Pin It button. You can stick it on your site, and that’s it. You cannot track events, such as when a “pin” occurs, or even when someone simply clicks on the darn thing.