How to create a button in JSF page with custom label - jsf

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:

Answer 1

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.

Answer 2

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).