Internet Explorer 9 (IE9) Table White Space Issues

I was tasked with fixing a problem in our product where one of our data tables (HTML) was rendering on IE9 with spaces randomly scattered throughout the table this resulted in the data being in the wrong columns, or headers appearing in the wrong place. I originally thought I might there might be "holes", or null values in my data which was resulting in the error. I was wrong.

It is actually a bug in IE9.

The issue shows up, most often, when using AJAX when there is partial page rendering. It seems according to forum remarks to be focused on white space between table tag elements like line breaks, spaces, or carriage returns. So if you use HTML tidy, you will screw up your output. Nice one Microsoft!

Fortunately, there are "fixes" out there to help you get along. Here is the fix which I slightly modified from an answer on stackoverflow. A shout out goes to Blago for his recursive function listed below.

You can implement it this way.
Here are some references on the issue if you are interested.

• [Bug]IE9 skips cells when rendering large table from Ajax using jquery
• IE9 table layout apparently affected by whitespace between HTML elements
• IE9 table has random rows which are offset at random columns
• Remove whitespace and line breaks between HTML elements using jQuery

JSF 2.0 JQuery-JSF Integration

I am publishing an example of how to use jQuery with JSF. This is a basic jQuery Dialog which is integrated into a JSF 2.0 Reference Implementation (Mojarra) page.

There are a couple of JSF frameworks which take extensive use of jQuery like PrimeFaces which I would highly recommend.

This is just a simple example to show you how to get started.

Here is the NetBeans Apache Maven Mercurial project: jquery-jsf-integration

index.xhtml

---

included.xhtml

---

Multiple File Upload Examples

I received an email today from a developer who was looking for examples of how to do multiple file uploads. I had written a post previously Multiple File Upload Options which detailed some of the options available. The option I recommended was Andrew Valums ajax-upload. The developer had indicated that the servlet I contributed was not working with Internet Explorer correctly. He was correct.

The code that I provided to Andrew Vallums was expecting application/octet-stream. However Internet Explorer and Opera were sending multipart/form-data. This would not work with the servlet example I posted since the handling mechanism is considerably different.

Alan O'Driscoll and I discovered the differences using Wireshark to sniff the packets and see what was being sent over the wire. As a result, I have written a new servlet to handle the differences between browsers.

The example application I wrote has a number of different examples included with minor variations on the theme. The version most folks are interested in is example #6 which uses the ajax-upload, and the new servlet. Here is the Apache Maven project which was developed on NetBeans and tested on GlassFish v 2.1.1.

Here is a link to the Mercurial project: apache-file-upload-ee5.

Here is another resource for file upload plugins: 9 Powerful jQuery File Upload Plugins. I discovered it while I was looking for something else.

MultiContentServlet.java

---

JSF 2.x and jQuery onload Control

I was asked if there was a way to control Mojarra JSF 2.x components with jQuery. In this case they wanted to be able to control some aspect of the controls from JavaScript on the loading of the document. Here are a couple of quick examples of controlling JSF components using jQuery.

• Set the background to a light gray
• Disable form1:inputText1
• Change the value of form1:inputText2 to Hello World! using a EL assignment to a JavaScript variable.
• Set form1:inputText3 to be required.

index.xhtml

---

IndexBean.java

---

//  Copyright 2011 Blue Lotus Software, LLC.
//  Copyright 2011 John Yeary.
package bean;

import javax.enterprise.context.RequestScoped;
import javax.faces.bean.ManagedBean;

/**
 *
 * @author John Yeary
 * @version 1.0
 */
@ManagedBean
@RequestScoped
public class IndexBean {

    private String value = "Hello World";

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
}

Related articles

• How Do I Dynamically Change Styles Based on Selection Criteria in JSF? (javaevangelist.blogspot.com)

Multiple File Upload Options

I was recently confronted with a question about how to do multiple file uploads from a browser based application. The HTML 4.x specification is pretty open on the file upload requirements, and all of the browser implementations are very basic.  Firefox, Safari, Web Toolkit, and Internet Explorer all provide a method to upload one file at a time, but no multiple file upload. As a result, clever coders have come up with a number of solutions. Here are a few.

• Ajax Upload; A file upload script with progress-bar, drag-and-drop - This is my pick.  Disclaimer: I contributed the servlet code to handle the requests. Here is a link to the source: File Uploader (GitHub).
• AJAX Multiple File Upload Form Using jQuery - Based on Andrew Valums original work.
• Google App Engine and File Upload - Google App Engine method.
• Safari 4 Multiple Upload With Progress Bar - Limited by by browser type.
• Upload multiple files with a single file element - a different approach. Very simple to implement.
  jQuery Multiple File Upload Plugin - This worked but was very flaky for me. The first item works better.
• FancyUpload - Swiff meets Ajax (v3.0) - I did not experiment with this one. I as told about it, but I had already decided on working with Andrew Valums on his elegant solution.

These are some approaches available to you. If you are using a JSF based framework, a number of them already include a multiple file upload component based on Apache Commons File Upload.