We Keep Coding

Calling JS function automatically after image is loaded by java backing bean

I need my JS resizing function to be called automatically after image is returned by java backing bean. This is xhtml part responsible for image loading. It is part of dataGrid.
<p:panel id="panel1" >
<p:graphicImage id="image1" value="#{imageService.image}" width="100%" height="100%">
<f:param name="id" value="#{kprod.id}" />
</p:graphicImage>
</p:panel>
This is bean method:
public StreamedContent getImage() throws IOException {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
return new DefaultStreamedContent();
}
else {
String id = context.getExternalContext().getRequestParameterMap().get("id");
return findImage(Long.valueOf(id));
}
}
After completing the rendering phase, it goes to else branch which returns actual image.
I have working JS function resizeImage(). I tested it by adding attribute onclick="resizeImage()" to <p:graphicImage> and then clicked on image and it resized correctly. What I need now is automatic calling of this function.
<p:graphicImage> doesnt have any attributes that I can use. I also tried <p:ajax oncomplete="resizeImage()" /> to involve into <p:graphicImage> node but every time I use ajax this error is returned:
Event attribute could not be determined: null
I also have one sub question. Actual image id in final HTML is contentForm:kprods:7:image1 where number is variable according to order. Is there a way how to pass to JS id of the element as a parameter?
Thanks a lot.

Well I found solution. Basically all I needed was to run my function on load event. But primefaces element <p:graphicImage> doesnt have onload attribute.
So I added to my xhtml new namespace for passthrough attributes:
xmlns:x="http://xmlns.jcp.org/jsf/passthrough".
And added x:onload attribute to graphicImage element:
<p:panel id="panel1" >
<p:graphicImage id="image1" value="#{imageService.image}" x:onload="resizeImage(this.id)" width="100%" height="100%">
<f:param name="id" value="#{kprod.id}" />
</p:graphicImage>
</p:panel>
Then I inspected final HTML and there was onload attribute with my function added to <img> element.

Button doesn't do post back in IE 9

I'm using the asp file upload control.i didn't wanted to show the user the ugly asp.net control so used some style="width: 0px; height: 0px; overflow: hidden;" to make it hidden.
Here is my html code
<a id="a">Browse</a>
<div style="width: 0px; height: 0px; overflow: hidden;">
<asp:FileUpload ID="file" runat="server" />
</div>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" />
And i my jQuery ready function i wrote
$(function(){
$('#a').click(function(){
$('#file').click();
});
});
But this code doesn't do a postback in ie. I'm testing in ie 9.Although it works perfectly fine in Chrome and Firefox.
Can any tell me what is wrong with my code.Or else a work around for this.

Have you looked at IE Developer tools to see if there are any javascript errors in IE? It is possible that it is not able to find the control with ID 'file' since it is a server control and the ID is generated dynamically when the page is rendered.
Use this to select a server control.
$("#<%= file.ClientID %>").click()
Or you can use jquery selector.
$("[id$='file']")

JSF execute javascript after f:ajax

In my JSF 2 web application, I use the following code to display and switch the contents of a rich:dataTable according to the selectedStatus:
<h:selectOneRadio id="statusSelection" value="#{backingBean.selectedStatus}" style="width:auto; float:left;">
<f:selectItem itemValue="AVAILABLE" itemLabel="Available" />
<f:selectItem itemValue="INACTIVE" itemLabel="Inactive" />
<f:ajax render="itemsDataTable" execute="#{backingBean.sortByTitel('ascending')}" />
<f:ajax render="itemsDataTable" event="click" />
</h:selectOneRadio>
The dataTable contains a4j:commandLink s, which unintentionally need to be double clicked in some IE versions after changing table content - I found out, that executing the following Javascript code (on IE's debugging console, after table contents have changed) solves the issue:
document.getElementById(<dataTableClientId>).focus()
My question is: How can I achieve automatic execution of the javascript code after the table contents have changed?

In order to execute JS code after the <f:ajax> is successfully completed, the following inline solution will do:
<f:ajax
render="itemsDataTable"
onevent="function(data) { if (data.status === 'success') {
// Put your JS code here.
document.getElementById('dataTableClientId').focus();
}}" />
Or the following external function solution (note: do not put parentheses in onevent, only the function name):
<f:ajax
render="itemsDataTable"
onevent="scriptFunctionName" />
function scriptFunctionName(data) {
if (data.status === 'success') {
// Put your JS code here.
document.getElementById('dataTableClientId').focus();
}
}
Also take a look at this answer: JSF and Jquery AJAX - How can I make them work together?
Also, double check the need of the event="click" in your f:ajax , because the default event in <h:selectOneRadio> is change which I think you better use... See also What values can I pass to the event attribute of the f:ajax tag?

How to show a popup in primefaces with the requiredMessages, only if these messages exist?

I want to show a popup with the requiredMessages of some inputText fields when I click on a submit button. But just only in case of there are those messages. I have tried with bean variable and javascript on the oncomplete tag, but I'm not able to make it work properly. If I put visible="true" in p:dialog, the popup is always displayed, although I try to control it from the commandButton. Now, I have this, but the popup is never displayed:
<h:inputText id="Scheme"
required="true"
requiredMessage="Required.">
</h:inputText>
<h:commandButton id="submitModify" value="#{msg['systemdetail.modify']}"
action="#{sistem.modify}"
oncomplete="if (#{facesContext.maximumSeverity != null}) {dlg1.show();}">
</h:commandButton>
<p:dialog id="popup"
style="text-align:center"
widgetVar="dlg1"
modal="true">
<h:messages layout="table"/>
</p:dialog>
How can I do this? Thanks in advance.

Standard JSF and PrimeFaces does not support request based EL evaluation in on* attributes. RichFaces is the only who supports that. Besides, the standard JSF <h:commandButton> does not have an oncomplete attribute at all. You're probably confusing with PrimeFaces <p:commandButton>
There are several ways to achieve this:
Check the condition in the visible attribute of the <p:dialog> instead.
<p:dialog visible="#{not empty facesContext.messageList}">
or if you want to show validation messages only instead of all messages
<p:dialog visible="#{facesContext.validationFailed}">
Use PrimeFaces <p:commandButton> instead, the PrimeFaces JS API supports the #{facesContext.validationFailed} condition through the args object as well:
<p:commandButton ... oncomplete="if (args.validationFailed) dlg1.show()" />

If you need to check for what kind of messages, here is a way that I made work with primefaces. Since primefaces oncomplete is called after update, by updating the component holding the javascript function, the javascript function can be rebuilt using the latest #facesContext.maximumSeverity} values before executed.
<p:commandButton
oncomplete="executeAfterUpdate()"
update="updatedBeforeOnComplete"/>
<h:panelGroup id="updatedBeforeOnComplete">
<script language="JavaScript" type="text/javascript">
//
function executeAfterUpdate(){
if (#{facesContext.maximumSeverity==null
or facesContext.maximumSeverity.ordinal=='1'})
{
// your code to execute here
someDialog.show();
}
}
//
</script>
</h:panelGroup>

a4j:commandButton oncomplete javascript ignored

I have this snippet:
<h:form>
<h:panelGrid columns="2" styleClass="modalYesNo">
<a4j:region id="confirmActionReloadYes">
<a4j:commandButton value="Yes" ajaxSingle="true"
action="#{MyBacking.reloadConfig}"
oncomplete="window.location.reload()"
reRender="blah" />
</a4j:region>
<a4j:commandButton value="No"
onclick="#{rich:component('confirmActionReload')}.hide();return false;" />
</h:panelGrid>
</h:form>
and I notice that when the yes button in the a4j:region above is selected, once the backing bean method reloadCongi() is complete, the javascript window.location.reload() is not run. Why is this? I also notice that elements in the reRender attribute are also not reRendered. Why is this?
EDIT
The method from the first comment to this question is:
public void reloadConfig() {
logger.info("Reloading config.");
pct = pctBackup;
feeds = pct.getFeed();
setSysMsg("Reloaded config OK.", "ok");
}
I'm thinking maybe I need to set the return type to true or false based on the above and see if that works.

Some addons may compromise the firing of the 'oncomplete' event.
If you are out of options, start disabling some addons to see if it works.
Specifically I had the same problem with Firefox 14.0.1 and Firebug 1.7.3.
Once I disabled Firebug, the 'oncomplete' worked again.