How to use showpopupPanel in RF4x?

[sivaprasad9394]

Hi,

How to use showModalPanel in Richfaces4x?Can i use like below?How to use showpopup in the javascript file.??

RF 3X: Richfaces.showModalPanel('wait-dialog');

RF4X: Richfaces.showpopupPanel('wait-dialog');

xhtml code:

<a4j:status id="mod" onstart="onRequestStart()"

            onstop="onRequestEnd()" />

<rich:popupPanel id="wait-dialog" resizeable="false" autosized="false"

            width="130" height="100" headerClass="popupborder" moveable="false"

            shadowOpacity="3">

            <center>

                <h:graphicImage value="/img/ajax_load.gif" width="70px"

                    height="70px" />

            </center>

            <br></br>

        </rich:popupPanel>

Javascript:

function showWaitDialog() {

    //avoid attempt to show it if it is already shown

    if (!waitDialogShown) {

        RichFaces.showpopupPanel('wait-dialog');

        waitDialogShown = true;

    }

}

function onRequestStart() {

    if (useTimerBeforeShowWaitDialog) {

        waitDialogTimer = setTimeout("showWaitDialog();", waitDialogTimeout);

    } else {

        showWaitDialog();

    }

}

function onRequestEnd() {

    if (waitDialogShown) {

        RichFaces.hidepopupPanel('wait-dialog');

        waitDialogShown = false;

    } else if (useTimerBeforeShowWaitDialog && waitDialogTimer) {

        clearTimeout(waitDialogTimer);

    }

}

Thank you.

[michpetrov]

The method was removed, use either #{rich:component('panel')}.show() or RichFaces.component('form:panel').show()

[sivaprasad9394]

Hi Petrov,

Thank you for your reply.

RF Version: Specification-Version: 4.2.2.Final

How to use the RichFaces.component('form:panel').show() in JavaScript file.

Please refer the images below,

Image 2:

Image 2:

Image 3:

I have tried with below also,

document.getElementById('reportingFormSI:wait-dialog').component.show();

But expected behaviour is not working.

How to resolve it.????

[michpetrov]

If you don't say what version you're using I'm expecting it's the latest.

In 4.2.x it's RichFaces.$ instead of RichFaces.component, or document.getElementById('form:panel').rf.component if you want to go that way. (It's in the docs.)

[sivaprasad9394]

I am getting an error in Fire-bug console like ,

Error:

TypeError: RichFaces.$(...) is undefined.

bosch.js File:

RichFaces.$('reportingFormSI:wait-dialog').show();

RichFaces.$('reportingFormSI:wait-dialog').hide();

As I mentioned Earlier comment,I am using 4.2.3 Final Version.

Thank you.

[michpetrov]

I don't know what I'm supposed to see in the picture but if you scroll down RichFaces.$ should be defined on line 55.

[sivaprasad9394]

Below is my Java script file,

bosch.js

//javascript

var waitDialogShown = false;

var useTimerBeforeShowWaitDialog = true;

var waitDialogTimeout = 50;

var waitDialogTimer;

function showWaitDialog() {

    //avoid attempt to show it if it is already shown

    if (!waitDialogShown) {

        //RichFaces.showpopupPanel('wait-dialog');

       RichFaces.$('reportingFormSI:wait-dialog').show();                     // For Show the wait-dialog box

        //document.getElementById('reportingFormSI:wait-dialog').component.show();

        waitDialogShown = true;

    }

}

function onRequestStart() {

    if (useTimerBeforeShowWaitDialog) {

        waitDialogTimer = setTimeout("showWaitDialog();", waitDialogTimeout);

    } else {

        showWaitDialog();

    }

}

function onRequestEnd() {

    if (waitDialogShown) {

        //RichFaces.hidepopupPanel('wait-dialog');

        RichFaces.$('reportingFormSI:wait-dialog').hide();                  // For Hide the wait-dialog box

        //document.getElementById('reportingFormSI:wait-dialog').component.hide();

        waitDialogShown = false;

    } else if (useTimerBeforeShowWaitDialog && waitDialogTimer) {

        clearTimeout(waitDialogTimer);

    }

}

function applyModalPanelEffect(panelId, effectFunc, params, hide) {

    if (panelId && effectFunc) {

        var modalPanel = $(panelId);

        if (modalPanel && modalPanel.component) {

            var component = modalPanel.component;

            var div = component.getSizedElement();

            if (hide) {

                Element.hide(div);

            }

            effectFunc.call(this, Object.extend({

                targetId : div.id

            }, params || {}));

        }

    }

}

function showModalPanelWithEffect(panelId, showEffect, params) {

    applyModalPanelEffect(panelId, showEffect, params, true);

}

Reporting.xhtml

<a4j:status id="mod" onstart="onRequestStart()"

            onstop="onRequestEnd()" />

        <rich:popupPanel id="wait-dialog" resizeable="false" autosized="false"

            width="130" height="100" headerClass="popupborder" moveable="false"

            shadowOpacity="3">

            <center>

                <h:graphicImage value="/img/ajax_load.gif" width="70px"

                    height="70px" />

            </center>

            <br></br>

        </rich:popupPanel>

But Still console error in Mozilla Fire fox browser as below,

Error:

TypeError: RichFaces.$(...) is undefined.

Thank you.

[michpetrov]

Have you checked if the method is defined in the file? Can you execute it from console?

[sivaprasad9394]

Hi Petrov,

Thank you for your reply.

I have executed it from console firefox, Still the same error,

Is this RF version issue?

[michpetrov]

The method is available in RichFaces 4.2.3.Final, it's been in RichFaces since 4.0. If you cannot execute it you need to check the sources and the actual RichFaces object (i.e. what methods it has), if you see the method in the source but not in the object then something might be overwriting it.

[sivaprasad9394]

Hi Petrov,

I could not able to debug it.

So I have implemented the code in different way as below,Which works fine.I just dropped JavaScript methodology.

Sample.xhtml

<rich:popupPanel id="wait-dialog" resizeable="false" autosized="false"

            width="130" height="100" headerClass="popupborder" moveable="false"

            shadowOpacity="0" style="overflow:hidden;">

            <center>

                <h:graphicImage value="/img/ajax_load.gif" width="70px"

                    height="70px" />

            </center>

            <br></br>

        </rich:popupPanel>

<a4j:status for="reportingRegion"

                    onstart="#{rich:component('wait-dialog')}.show()"

                    onstop="#{rich:component('wait-dialog')}.hide()" />

<a4j:region id="reportingRegion">

....ur component and other stuffs.......................

......................................

.................................................

</a4j:region>

Thank you.

[michpetrov]

#{rich:component('id')} gets translated into RichFaces.$('formId:id'), if it is working now then there is a problem with the original script.

[sivaprasad9394]

Later some time i will verify the script which has problem.

Thank you.