Posts Tagged Html

The message tags of MyFaces and RichFaces

Posted by smoreau in Java on 06 May 2010

Working on an application using MyFaces and RichFaces, I had no choice but understand what is the difference between the message tag provided by Myfaces (h:message) and the message tag overridden by RichFaces (rich:message).

These tags allow to display information about the first FacesMessage that is assigned to the component referenced by the “for” attribute. The difference is that the RichFaces tag has some extra functionalities such as Ajax rendering, error markers and predefined css class names.
Have a look at the following page for more details: http://livedemo.exadel.com/richfaces-demo/richfaces/message.jsf

This is all nice and well but it is not the only difference. Indeed, the HTML code generated by both these frameworks will also be different!

First of all, let’s see how the tag <h:message styleClass="errormsg" for="element"/> will be transformed. If there is no message to display, nothing will be generated (which is a good behaviour). However, if a message is present, the tag will be replaced by the following HTML code:

<span class="errormsg">Required.</span>

So far, so good!

But now let’s check what code RichFaces is generating for the tag <rich:message styleClass="errormsg" for="element"/>.
The following is the code created if there is NO message to render:

<span class="rich-message errormsg" id="form:j_id255">
    <span class="rich-message-label"></span>
</span>

And here is the code which will replace the RichFaces tag if there is a message to display:

<span id="bookingform:j_id255" class="rich-message errormsg">
    <span class="rich-message-label">Required.</span>
</span>

As you can see, the main difference is that RichFaces is wrapping the original span tag into another span tag. But, it is also generating some code even if there is no message to display! You would ask why is it doing that? The response is simple. The wrapper span element is necessary for RichFaces to Ajax-render the message tag if an error message has to be displayed for the targeting element.

So make sure you don’t put any padding or margin style in your custom CSS class which I called ‘errormsg’ in my example. Otherwise, you might have a gap when you were expecting nothing… (this happened to me) ;)

, , , , , ,

No Comments

Onclick event is not fired on IE

Posted by smoreau in Html on 08 Dec 2009

I am pretty sure everybody knows that Internet Explorer has “a few” bugs… :roll:
You didn’t? 8-O Alright, better to stay on your little cloud and leave this blog right away!

For the others, I will talk about the JavaScript event onclick which is not fired when the following requirements are matched:

  • In a form;
  • There is only ONE input text element;
  • There is one button which has an onclick event assigned;
  • You press the ‘Enter’ button inside the input text element.

For a better understanding, let’s now take the following example:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>

As you can see, there is nothing difficult in this code.
Well, that doesn’t mean Internet Explorer can handle it… :lol:

The bug occurs if you press the ‘Enter’ button inside the input text element using Internet Explorer. Indeed, the onclick event is not fired and the text ‘onclick fired!’ is not display to the user! However, it works perfectly fine on Firefox and Safari.

The funny thing is this code works on Internet Explorer if you add another input text, even if it is hidden!
Why? Don’t ask me! :-|

Anyway, the following example works on IE:

<html>
    <head><title>Test</title><head>
    <body>
        <form>
            <input type="text" id="t1"/>
            <input type="text" style="display:none"/>
            <input type="submit" onclick="alert('onclick fired!'); return true;"/>
        </form>
    </body>
</html>


Why are we assigning an onclick event to the submit button?
It could be for a lot of reasons, but the main one is probably to validate the form before submitting the data.

By the way, RichFaces is very often using this event on the submit buttons.
So remember to add a hidden input text to your form if you want to allow users to use the ‘Return’ key. :)

, , , , , ,

No Comments