Tag: Jquery

BackboneJs is a great resource for creating rich UIs. Rich means interactive. Interactivity grows when the client can do more of the work of an application itself, becoming more reactive and dynamic to user feedback, able to be more event-driven, and hopefully more quick and responsive. Here’s a short history of how we’ve been creating rich UIs and a simple example of a rich UI in backbonejs

When you start writing applications with BackboneJS, that means that you’re dealing with some dynamic UI. There are elements being pushed into and pulled out of the DOM. I was having problems trying to reference DOM elements that were dynamically inserted into the DOM by other Backbone views. The fix was simple but not immediately obvious without cracking open Backbone.

As web developers we’re used to being able to write a jQuery selector and easily get the DOM elements back on the page that we’re looking for. In the case of jQuery Mobile, it’s slightly more complicated because a “page” is a different beast.

Jquery has made developing javascript fun and enjoyable. It is a fantastic library that essentially allows the creation of library extensions on top of it via plugins. Jquery plugins are surprisingly easy to write and elegant to read and use. Here are a few tips on where to find good plugin candidates, design principles for plugins, and an outline of the basic structure that I have found most useful when writing plugins.

Jquery plugins are a joy to use, and they are surprisingly easy to write. Everyone that writes lots of Jquery code should seek to take potentially-resuable functionalities of code and put them into a nice, compact plugin. In the app I’ve been working on, we have a lot of user-generated content that we don’t limit the length on, so it can grow very large. To combat this, there is the UI pattern on the site that there is a “read more” link available to show the remaining text for the long-winded texts, while just showing a snippet otherwise. This exists everywhere, for lots of different content; hence, the “readmore” plugin was born.

Jquery gives a great, easy-to-use mechanism for extending its API and creating your own plugins. For stuff that looks like it could be useful generally, you should really try to put it into a nice little plugin package. For submit buttons, there is a general thought that they shouldn’t be clicked twice (especially for functions such as financial transactions), so I created a plugin that fits an app that I have been working on recently, where there are many, many submit buttons, saving very granual pieces of content through ajax requests.

Jquery and other sweeto js frameworks have some awesomeness to help you change the css classes of various elements on the page with ease and grace. They have some very convenient functions to add and remove classes. These are uber-useful and highly recommended for saving you precious time and gigawatts, but if you don’t have one of these tools available to you, sometimes you may want to do this in raw JavaScript.

Callback functions are a nice feature of Javascript. It’s nice to be able to just use a function handle to show that it should be called when a certain something completes. Sometimes, however, we want to do more than just specify a function handle. We want to pass parameters. Why? Because sometimes the callback method cares about other data that was available before the original request. Here’s an example:

Jquery has some awesome event-handling abilities. The elusive ability to pass parameters into these event callbacks seems way harder than it should be. Nevertheless, I have found a solution. I really doubt it’s the best one. I really hope it isn’t.

Meet the new web. The simpler the better. The cleaner the better. The more pleasing the colors the better. The fuzzier feelings the better. The latest fuzzies have been brought on by a slew of modals. Previously, we haven’t used many modals in our layouts and designs, so here’s the first working pattern on how to get this kind of stuff working.

This solution allows content to appear in a modal, validation errors to post back to the modal, edits made in a modal to persist back to the database, and success messages to appear on parent page.