In the last couple of months, I added jQuery to my toolkit. I held out on jQuery for longer than I needed to because I have been overwhelmed with so many other things to do and learn.
jQuery is ridiculously easy to learn, and you can integrate it into various server-side and client-side technologies with minimal pain. I have been using jQuery in my Agile Platform projects with a very short learning curve. I really like that jQuery has allowed me to meet users’ expectations in terms of functionality and responsiveness. I will show you three ways I have recently used jQuery to meet these needs.
Sortable for easy drag and drop
In my first foray with jQuery, I threw myself straight into the deep end. One of our other developers had used the Sortable component from jQueryUI to add drag-n-drop to a part of Wodify to allow users to rearrange graphs and charts on a dashboard. I was working on revamping the system that allows users to make workouts, and I had put in up and down arrows to move the items around the list; this was a slow and painful way to do things, and we had such great feedback from users on the dashboard creator. In a native application, drag/drop is a snap, but how would I do it in HTML?
Using Sortable, it only took me a few lines of code to get the application enabled for drag/drop. This was my first use of jQuery, and it only took several minutes to get the basic functionality working. From there, I was able to add styling for the placeholders to make it obvious how the drag/drop will affect the data; this is an improvement over many of the native applications I have used. My biggest stumbling blocks occurred in various scenarios where I was used AJAX to refresh portions of the screen, and the general rule-of-thumb I learned was to use the destroy() method and re-connect Sortable to the list if that was going to happen.
Dialog for instant loading of popups
In one part of Wodify, we wanted to have some screens pop up. By default, Agile Platform has a popup system using iframes that often shows a default graphic while it loads the source HTML. That works, but for one particular screen we wanted the popup to be instantly available. The iframe tag has the “srcdoc” attribute, which would have solved the problem, but it has no support in browsers yet.
Instead, I used Dialog (also in jQueryUI) to put the contents of the other screen into a div tag on my page. I set autoOpen to false and tied the “click” handler of a part of the screen to show the dialog and viola — an instant display of the content with only two lines of code.
The only hangup was that in my particular scenario, each dialog needed to be repeated up to 30 times (if not more) per page, and could be quite heavy, so we decided that the minimal load time of the original method was better than overburdening the screen. But in a similar scenario without the need for so many dialogs, I will use this technique again to provide the super-fast response that users love.
Focus eliminates a mouse click
We shifted one screen from being a big grid of input fields to having popup dialogs containing the input fields, in no small part because the number of input fields increased quite a bit. To offset that, we wanted the cursor in the first input field on the dialog as soon as it opened, so the mouse would at least be “mouse click neutral” for the end users. All I needed to do was drop in a line of jQuery into the screen to put the focus on the first field, and now users can enter data as quickly as before, despite adding complexity to the UI.
In several weeks, I went from never having touched jQuery to being able to actively use it to meet the kinds of raised expectations users have in the BYOD/consumerization era. You, too, can use jQuery to put a smile on your users’ faces.
More TechRepublic posts about jQuery
- Poll: Are you using or learning jQuery?
- How to get started with jQuery
- jQuery: How to get objects by ID, Class, Tag, and Attribute
- How to use filter functions in jQuery
- Tutorial: jQuery Show, Hide, and Toggle functions
- How to create an expandable and contractible FAQ in jQuery
- How to create animations with jQuery
- Animations: How to use fadeout and slideToggle functions in jQuery
- Fun with menus: Navigation using jQuery, CSS3, and HTML5
- How to create shrink/grow and sliding navigation menus with jQuery, CSS3, and HTML5 Word
- How to create an image hover-preview effect using jQuery
- Create a tool tip text-box element using jQuery, CSS3, and HTML5
- Use jQuery for sortable UI elements
- Plug in GalleryView with jQuery on your website
Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.