Trouble to display deployJava button on ajax rerender

Asked 2/11, 2012 at 7:32 Answered 11/11, 2012 at 9:52

Solved ajax jsf-2 primefaces java-web-start deployjava

I'm having trouble displaying the deploy-java button on ajax rerender

<h:form id="deployJavaForm" rendered="#{myBean.shouldRender}">
<h:outputScript library="js" name="http://java.com/js/deployJava.js" target="head" />
<script type="text/javascript">
    deployJava.createWebStartLaunchButton('blah.jnlp', '1.7.0');
</script>
</h:form>

when

myBean.shouldRender == true

and the form is updated the only thing being displayed (on a white page) is the deployJava-button and the request is left hanging. if shouldRender is true on the initial request, page and button is displayed correctly. Im using primefaces in case it can help.

What I want to do is to have the button to be displayed correctly regardless if its part of a ajax rerender or a complete initial request.

Update: I did my homework and created a minimal example that still reproduces the problem. It seems I still get the same problems regardless if script declaration is in head or in body (I have copy of deployJava.js in resources/js)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
    <h:outputScript library="js" name="deployJava.js" target="head" />
    <h:form id="djForm">
        <script type="text/javascript">
            deployJava.createWebStartLaunchButton(
                    'test.jnlp', '1.7.0');
        </script>
        <p:commandButton value="update" update="djForm" />
    </h:form>
</h:body>
</html>

edit: (specialgems) below test give same problem as observed earlier.

<h:outputScript>
deployJava.createWebStartLaunchButton(
                'test.jnlp', '1.7.0');
</h:outputScript>

edit: added picture The problem looks like this

after click of update button, only deployJava button is rendered and page is loading

edit (daniel): both on success and oncomplete give same behaviour :(

<h:form id="djForm">
    <h:outputScript>
        function abcefg() {
            deployJava.createWebStartLaunchButton('test.jnlp', '1.7.0');
        }
    </h:outputScript>
<p:commandButton value="update" update="djForm" onsuccess="abcefg()" />
</h:form>

Wordage answered 2/11, 2012 at 7:32 Comment(13)

If you work with templates the following answer may help you: <h:outputScript> target problem when using templates – Cone 2/11, 2012 at 7:53

Have you tried using the <h:outputScript> tags to bring the portion of JavaScript into the JSF page lifecycle? – Florence 7/11, 2012 at 12:37

How are you updating the form? If you're updating it by using update='djForm' then it won't work. – Cringle 8/11, 2012 at 13:44

@Cringle Im not following :( – Wordage 8/11, 2012 at 14:13

If you try to update an element that is not rendered, the client will fail to find the element and thus cannot update the element. – Cringle 8/11, 2012 at 16:0

in the updated example the element is render before update also. But still gives the almost-empty-page-response. – Wordage 8/11, 2012 at 16:8

@AkselWillgert have your tried adding oncomplete="callSomeJSFunction()" and inside that callSomeJSFunction call the deployJava.createWebStartLaunchButton('test.jnlp', '1.7.0'); ? – Thierry 8/11, 2012 at 18:50

same result. Tried onsuccess also – Wordage 8/11, 2012 at 18:57

is it working with <p:commandButton ajax="false" ? also , do you see any errors in firebug ? – Thierry 8/11, 2012 at 19:4

@AkselWillgert how about onsuccess="setTimeout('abcefg();', 50);" ? – Thierry 8/11, 2012 at 19:14

when the time-out expires, it gives the same behaviour. I actually expected that idea to work. – Wordage 8/11, 2012 at 19:47

so you say that if you run that command button with ajax (without invoking the abcefg() at all) and than calling abcefg() from firebug console manually it does not work ? – Thierry 8/11, 2012 at 21:29

Im trying firebug for the first time. But manually calling abcefg() results in the same behaviour. But I assume you wanted me to do it manually as part of ajax update. Dont know how to do that yet. – Wordage 9/11, 2012 at 18:59

Alternatively to using js and css visibility described in my comment you can write own composite button component. Using Firebug you can investigate which markup is generated by the deployJava.createWebStartLaunchButton script and add it by yourself statically. So your component could be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:composite="http://java.sun.com/jsf/composite">
<head>
<title>deployJava Button component</title>
</head>
<body>

    <composite:interface>
        <composite:attribute name="version" required="true"
            type="java.lang.String" />
        <composite:attribute name="url" required="true"
            type="java.lang.String" />
    </composite:interface>

    <composite:implementation>
        <a onmouseover="window.status=''; return true;"
            href="javascript:if (!deployJava.isWebStartInstalled(&quot;#{cc.attrs.version}&quot;)) {if (deployJava.installLatestJRE()) {if (deployJava.launch(&quot;#{cc.attrs.url}&quot;)) {}}} else {if (deployJava.launch(&quot;#{cc.attrs.url}&quot;)) {}}"><img
            border="0" src="//java.com/js/webstart.png" /></a>
    </composite:implementation>
</body>
</html>

so your page will be:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:comps="http://java.sun.com/jsf/composite/comps"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <!-- <script type="text/javascript" src="http://java.com/js/deployJava.js" />-->
</h:head>
<h:body>
    <h:outputScript library="js" name="deployJava.js" target="head" />
    <h:form id="djForm">
       <comps:deployJavaButton version="1.7.0" url="test.jnlp" rendered="#{myBean.shouldRender}" />

        <p:commandButton value="update" update="djForm" />
    </h:form>
</h:body>
</html>

The main idea is to avoid executing button creation script twice and more.

Lxx answered 11/11, 2012 at 9:52 Comment(1)

great stuff, worked very well. Also helped me setup a first composite component, so I learned something more – Wordage 11/11, 2012 at 13:10

May be using h:panelGroup instead of h:form will help. Something like that:

<h:form id="djForm">
  <h:panelGroup rendered="#{myBean.shouldRender}">
    <script type="text/javascript">
        deployJava.createWebStartLaunchButton(
                'test.jnlp', '1.7.0');
    </script>
  </h:panelGroup>
  <p:commandButton value="update" update="djForm" />
</h:form>

Lxx answered 9/11, 2012 at 23:30 Comment(5)

doesnt work. The problem is related to the script code geting invoked as part of a re-render. – Wordage 10/11, 2012 at 7:17

Do you want execute your JS code once the page generated and does not run it again during ajax update? – Lxx 10/11, 2012 at 18:8

I just try your second example code...another try to help you: try to split your form on some panelGroups and do not update the group where script is. Here is modified code that works for me: <h:form id="djForm"> <h:panelGroup id="beforeGroup"> Is first generated: #{!facesContext.postback} </h:panelGroup> <h:panelGroup id="jsButton"> <script type="text/javascript"> deployJava.createWebStartLaunchButton('test.jnlp', '1.7.0'); </script> </h:panelGroup> <h:panelGroup id="afterGroup"> <p:commandButton value="update" update="afterGroup beforeGroup" /> </h:panelGroup> </h:form> – Lxx 10/11, 2012 at 18:27

The usecase is to toggle to visibility of the deployJava button on ajax rerender. So has to be part of it. – Wordage 10/11, 2012 at 19:4

use js to toggle. F.g. add in my code(rendered use own rule instead of postback) and add showButton to update:<h:panelGroup id="showButton"> <h:panelGroup id="showJSButton" rendered="#{!facesContext.postback}"> <script type="text/javascript"> document.getElementById("djForm:jsButton").style.visibility = 'visible'; </script> </h:panelGroup> <h:panelGroup id="hideJSButton" rendered="#{facesContext.postback}"> <script type="text/javascript"> document.getElementById("djForm:jsButton").style.visibility = 'hidden'; </script> </h:panelGroup> </h:panelGroup> – Lxx 11/11, 2012 at 9:31

Recommended topics

Hot tags