DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • jQuery vs. Angular: Common Differences You Must Know
  • CSS3 Transitions vs. jQuery Animate: Performance
  • Better Scaffolding with jQuery - Part I
  • How to Call Rest API by Using jQuery AJAX in Spring Boot? [Video]

Trending

  • Supercharge Your Communication With Twilio and Ballerina
  • The Promise of Personal Data for Better Living
  • Exploring the Evolution and Impact of Computer Networks
  • Introduction to ESP32 for Beginners Using the Xedge32 Lua IDE
  1. DZone
  2. Coding
  3. Frameworks
  4. Playing With jQuery

Playing With jQuery

Raymond Camden user avatar by
Raymond Camden
·
Aug. 21, 08 · News
Like (0)
Save
Tweet
Share
7.21K Views

Join the DZone community and get the full member experience.

Join For Free

A while ago I built and released ColdFusionBloggers.org as a way to demonstrate and learn about new ColdFusion 8 Ajax technologies. Since then I've wanted to come back to the site and rebuild it using Spry or JQuery. Not because I wasn't happy with the CF8 Ajax stuff, but because a) it's fun to totally rebuild your own sites and b) I wanted to learn more about jQuery.

I also know that the site had a big footprint. YSlow was reporting around 600k of stuff which is a bit much. I was curious to see what a change to jQuery would be like.

I had looked at jQuery a few weeks back. I sat in a good presentation on jQuery (one that focused on the UI stuff) and it seemed like something that wouldn't be too hard to play with.

I began by working on the main guts of the site - the content div. This is the list of blog entries with pagination. Previously this was done with cfdiv. In general this was a super simple implementation outside of the support I had to do for restoring a page based on URL.

This was mainly done using ColdFusion.navigate. In jQuery there is a similar function - load. So I replaced:

ColdFusion.navigate(someurl,somediv)

with

$("#content").load(baseurl);

Simple enough - but not really too much different from the ColdFusion 8 method.

The next issue I ran into was the contact form. This created two problems for me. First off - it seems as if jQuery's built in UI stuff is still in development. While there are ten billion jQuery plugins, as a new user this is actually more of a bad thing then a good thing. I mean as a new user I had no idea what to use. Scott Stroz pointed me to jqModal, which worked easily enough, although my contact form now is a bit uglier compared to what it used to be.

The second problem was how to handle submitting the form. Once again - ColdFusion had a simple way of doing this - ColdFusion.Ajax.submitForm(formid,url,etc). In jQuery I converted this to $.post("url", { data and callback here}). I was a bit surprised that I had to specify the form values. I'm not sure I really need to. The docs say it's optional. But they don't say if it will send the entire form to the URL. I assumed it wouldn't and typed it all out:

$.post("sendcontact.cfm",{dname:$("#dname").val(),demail:$("#demail").val(),comments:$("#comments").val()},formDone);

If I'm right and it is required that you specify the data, then ColdFusion definitely wins here.

Other changes I made were to remove the autosuggest and make the stats pod stop reloading. That was a bit silly in retrospect.

I'm pretty impressed with jQuery. It's not quite as friendly as Spry, but it does seem pretty darn powerful. I hope the UI project continues to evolve as I think it makes sense for jQuery to provide a "best of breed" UI selection for it's users.

Oh - and does size matter? Well, my unscientific testing seems to show the new site reacting just as quickly as it used to. YSlow says the size is now down to 200k or so, which is incredible, but I didn't get the "wow" I thought I would with the switch.

A few quick final notes. The entire site has not been converted to jQuery. The feeds for example still use CF8 UI stuff. The code zip you can download is also out of date now obviously.

Any comments on my use of jQuery are appreciated, but be gentle as I have a grand total of 2-3 hours experience with it!

p.s. I'd especially appreciate a suggestion on how to handle the "loading" status that I lost when I left cfdiv. Right now it's not immediately apparent that you've begun an AJAX request to load new data.

JQuery

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • jQuery vs. Angular: Common Differences You Must Know
  • CSS3 Transitions vs. jQuery Animate: Performance
  • Better Scaffolding with jQuery - Part I
  • How to Call Rest API by Using jQuery AJAX in Spring Boot? [Video]

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: