Howto disable form submit on Enter and fix for RichFaces rich:inputNumberSpinner


It’s quite generic problem – to disable automatic form submit on ENTER, to avoid occasional submits which could lead either to page refresh or even to redirecting to another page.
The general idea is to define onkeypressed event handler for text input fields
Here is the article which describe the general approach to do it in HTML.

we can assign onkeypressed event handler to all fields just with few lines (with help of JQuery of course)

function noEnter() {
    return !(window.event && window.event.keyCode == ENTER_KEY_CODE);
}

jQuery(document).ready(function(){
      jQuery(:input:text).keypress(function(){
           return noEnter();
      });
});

That works fine for a lot of components, but not for rich:inputNumberSpinner.  “onkeypressed” handler was assigned and was called, but … it still not work, after a plenty time in debug I finally ensured that it not working and start investigating the richfaces sources for that component and found that it has a javascript command that DIRECTLY perform the form submit. And there is no way to prevent this behavior using tags or javascript handlers.
BTW – I really like new google-chrome developer tools, pretty good and *faster* alternative to FireBug in FF)

After some googling I  found that there is an RF issue exists (not resolved yet) and there is no way to prevent form submission according to the richfaces-issue and actually in the related-post this issue is described in details, but it looks that solution could be only fixing the RichFaces library itself.
So, let’s do it!  We will need to build it form sources, since direct update of the script in the jar-file is not working – richfaces have minified scripts and they are pretty hard to read/modify :-)

You can download patched richfaces-ui.jar from here.

  1. Download RichFaces sources (I prefer to use stable builds)
  2. Extract them and navigate to the file in which form-submission is done “ui/inputnumber-spinner/src/main/resources/org/richfaces/renderkit/html/script/SpinnerScript.js”
  3. comment out that crazy row
            if (e.keyCode == 13){
                if (this.spinner.required || "" != this.edit.value)
                    this.edit.value = this.getValidValue(this.edit.value);
                if (this.edit.form) {
    //                this.edit.form.submit();
                }
            }
    }
    
  4. Lets build the Richfaces from sources. The first problem you can met is the memory. We will need a bunch of memory, so ensure that you have 64-bit java (since you will need a lot of memory – about 1500MB – I was not able to allocate this amount on 32-bit java in Windows-XP)
    so, instead of redefining env variables I just copied mvn.bat to mvn64.bat and added the following lines

    set JAVA_HOME=E:/Java/jdk/jdk.1.6_64
    set MAVEN_OPTS=-Xms512m -Xmx2048m -XX:PermSize=256m -XX:MaxPermSize=512m
    
  5. no lets rebuild richfaces-ui to do it, let’s grab few command-lines from developmentBuild.sh
    cd %PROJECT_DIR%/ui
    mvn64  clean install -Dmaven.test.skip=true
    cd %PROJECT_DIR%/ui/assembly
    mvn64  clean install -Dmaven.test.skip=true
    
  6. Let’s take a cup of tea since it will take a while…
  7. After build is done you will find the updated richfaces-ui.jar in the local maven repository.
    ${repository-home}/org/richfaces/ui/richfaces-ui/3.3.3.Final/richfaces-ui-3.3.3.Final.jar
About these ads

https://www.facebook.com/achorniy

Tagged with: , , , , , ,
Posted in Software Development, Tips and Tricks
4 comments on “Howto disable form submit on Enter and fix for RichFaces rich:inputNumberSpinner
  1. nickleus says:

    here’s an easier/quicker solution, where you don’t have to recompile any code:
    http://nickhumphreyit.blogspot.no/2013/08/richfaces-richinputnumberspinner-how-to.html

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 31 other followers

%d bloggers like this: