Submit Buttons and Ajax

April 10, 2009

We’re writing an Ajax webapp with progressive enhancement. In other words, if JavaScript is disabled, it should work – but if JavaScript is enabled, it should work better. As a general pattern, then, all of the buttons in our app are submit buttons that execute server-side behavior. When the page loads, we attach click event listeners to the buttons, to call the appropriate JavaScript methods.

By default, though, the submit buttons still try to submit the form. But we need to disable that, so that only the Ajax call happens. The first solution I tried was:

document.getElementById("myform").onsubmit=function(){return false;};

This disabled form submission altogether, which worked just fine.

The problem arose when we had a form that had to have some submit buttons work, but not all. It’s a shopping cart page, and we want “Checkout” to still submit the form and go to the checkout page; but we want the “Remove” buttons to execute Ajax calls to remove elements. They’re all in the same form, because, for example, if the user updates a quantity for one product, then removes another product, they expect the quantity change to be saved as well. So one big form.

The best solution I found for this was to actually create a new button-button, and use it to replace the submit button. At first, this seemed a bit clunky. But the problem is that the submit button wants to submit the form, and I was having trouble finding a way to prevent it from submitting. Rather than messing with its internals, it’s cleaner to create a button-button, that doesn’t want to submit.

Advertisements

Sample App 0.1.1 Released

February 11, 2009

I’ve just uploaded a minor patch to Sample App. This fixes some errors in the production build targets, and adds more thorough JavaDoc and YUI Doc.

sample-app-0.1.1.zip – 20.6 MB

You can also find out more about Sample App.


Sample App 0.1 Released

February 10, 2009

I’ve just posted a Java webapp called “Sample App” (until I can think of a better name for it). The goal for this webapp is to be a project template using industry-standard libraries and best-practices for full-stack Java application development, from a high-performance rich client tier, back to the database. There’s nothing particularly revolutionary about it, but it’s hard to find this particular combination of features – especially a combined rich frontend and backend. It’s released under a BSD license.

sample-app-0.1.zip

Check it out, take what’s helpful to you, and improve on the rest!

Features

  • Client
    • Logging (YUI Logger)
    • Combination of assets to save on HTTP requests
    • CSS sprites automatically generated (SmartSprites)
    • Minification (YUI Compressor)
    • Ajax requests (YUI Connection)
    • Strict presentation logic boundary (JSTL)
    • Copy in properties files
    • Object-oriented JavaScript
    • Event binding performed by JavaScript, not in markup
  • Server
    • Separation of business logic and webapp into distinct projects
    • Dependency injection (Spring)
    • Unit testing (JUnit)
    • MVC (Struts configured via Spring)
    • ORM (Hibernate)
    • Logging (Log4J)
    • Separate Business Logic and DAO tiers
  • Build
    • Separate build targets for dev and prod environments, changing config files, adding additional JS, and enabling/disabling logging and minification
    • Run on local box from a bare checkout using a build target, without any additional configuration or native code (Jetty, HSQLDB)

Requirements:

  • JDK 1.5 or above
  • Ant 1.6.5 or above

Getting Started:

Download the zip file above, expand it, go to sample-webapp/build, and run ant. This will run the default target run-dev. The app will then be accessible on your local computer at http://localhost:8080/sample-webapp/


Ajax Widget Libraries

July 10, 2008

I was recently looking around for a set of Ajax widgets that could give me drop-in star ratings, tagging, and commenting features in an arbitrary webapp. I didn’t find all of them, and we ended up going with an off-the-shelf commercial solution, but here are some of the widget libraries I ran across.