How to create a button in JSF page with custom label

Question

I have this simple JSF button:

//Question Dialog
function deletedialog(button, a){      
    $("<div />", {
        text: a
    }).dialog({        
        width: 600,
        buttons: {
            "Ok": function() { 
                $("#form\\:deleterow").click();
                //  $('input[id$="deleterow"]').click();               
                $(this).dialog("close");
                button.value = "Processing...";
                button.disabled = true;                  
            }, 
            "Cancel": function(event) { 
                $(this).dialog("close");
                event.preventDefault();
                button.value = "Delete";
                button.disabled = false;
            } 
        }
    });         
}


                    <!-- hidden button -->
                    <h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
                        <f:ajax render="@form"></f:ajax>
                    </h:commandButton>
                    <!-- the delete button -->
                    <h:button onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" >
                        <h:graphicImage name="small-hover.png" library="images" title="Delete" />
                    </h:button>

I want to create png image which will be the visual body of the button. The only thing that I will change will be the title of the button which I will set every time using the value attribute of the button. Is this possible? Now when I load the JSF page I see only empty button without label.

P.S 1 I get this result:

enter image description here

score 3 · Accepted Answer · edited May 23 '17 at 12:01

Use a command link that will wrap your image:

<script type="text/javascript">
    function deletedialog(button, a) {
        $("<div />", {
            text: a
        }).dialog({        
            width: 600,
            buttons: {
                "Ok": function() { 
                    //$("#form\\:deleterow").click();
                    //using the hidden button click
                    document.getElementById('myForm:deleterow').click();
                    //  $('input[id$="deleterow"]').click();               
                    $(this).dialog("close");
                    button.value = "Processing...";
                    button.disabled = true;                  
                }, 
                "Cancel": function(event) { 
                    $(this).dialog("close");
                    event.preventDefault();
                    button.value = "Delete";
                    button.disabled = false;
                }
            }
        });
    }
</script>

<h:form id="myForm">
    <h:commandLink onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;">
        <h:graphicImage name="small-hover.png" library="images"
            title="#{someBean.imageTitle}" />
    </h:commandLink>
    <h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
        <f:ajax render="@form" />
    </h:commandButton>
</h:form>

Also, there is a good example of <h:graphicImage/> in mkyong site.

Based on your comments, it looks like you want to have a button with an icon. Also, the real action is performed by your hidden <h:commandButton>. so I recommend you to read this answer:

HTML / CSS How to add image icon to input type=“button”?

Your code would be like this:

<h:commandButton id="deleterow" value="HiddenDelete" action="#{AccountsController.deleteSelectedIDs}" style="display:none">
    <f:ajax render="@form" />
</h:commandButton>
<button type="submit" onclick="deletedialog(this, 'Do you want to delete the selected rows?')) return false;"><img src="resources/images/small-hover.png" /> Delete</button>

Yes, you can mix basic HTML with JSF code, but read the link warning about this implementation on IE 6 browser clients.

Strange, the button is working but there is no label on the button - only the image. — user1285928, Aug 03 '12 at 20:05
Yes, but I also want label "Delete" on the button defined by button attribute. — user1285928, Aug 03 '12 at 22:29
@user1285928 it will be better if you show your actual code to edit my answer. Also, I've tested the button with the image inside and it works. — Luiggi Mendoza, Aug 04 '12 at 17:51
I've read it but I don't see any problem except for the `deletedialog` js method that I can't find its definition. — Luiggi Mendoza, Aug 06 '12 at 15:30
@user1285928 the only problem that I found here could be the image is not in the same location as your page or is not in the desired location (just as [BillR](http://stackoverflow.com/a/12044166/1065197) points out). — Luiggi Mendoza, Aug 22 '12 at 23:36

score 1 · Answer 2 · answered Aug 20 '12 at 19:50

I'd start from basics. Since you don't even see an image, when you right click on the browser window, and select 'view source' does it provide any meaningful information on whether the image is even being inserted onto the page? If you don't have the image path correct, it won't render the image on the page. That is the first thing to check and try to correct. (i.e. is the computer plugged in).

How to create a button in JSF page with custom label

2 Answers2

Linked