DF Cann't be used in iframe (#1253)

UI Components for JSF
Post Reply
zsuiqiang
Posts: 146
Joined: 13 Sep 2010, 03:52

26 Apr 2016, 09:32

The problem exist from 5.3.6 to 6.0.3, why not fix?
Last edited by zsuiqiang on 21 Sep 2016, 02:33, edited 1 time in total.
primefaces:jakarta:12.0.0.jar,
primefaces-ext:jakarta:12.0.0.jar,
JSF Mojarra 3.0
glassfish-6.2.5,
netbeans 14
IDEA 2022.2.2
Browser: Edge

smokeybandit
Posts: 277
Joined: 08 Jul 2013, 17:53

26 Apr 2016, 14:40

Because you haven't provided any detail on the problem.

zsuiqiang
Posts: 146
Joined: 13 Sep 2010, 03:52

27 Apr 2016, 06:15

Sorry,
In my case,i used iframe in layout:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="shortcut icon" href="resources/images/favicon.png"/>
        <link rel="bookmark icon" href="resources/images/favicon.png"/>
        <h:outputStylesheet name="default.css" library="css"/>
        <title>#{sysParams.params.get('SystemName').des}</title>
        <style type="text/css">
            body, html {width: 100%;height: 100%;overflow: hidden;margin:0;}
            #workspace {width: 100%;height: 100%;overflow: scroll;margin:0;}
        </style>
    </h:head>
    <h:body>
        <ui:include src="/Template/header.xhtml"/>
        <pe:layout fullPage="false" style="position: absolute;top: 52px;bottom: 0px;left: 0px;right: 0px;overflow: visible">
            <pe:layoutPane position="west" size="180">         
                <!--<p:panelMenu model="{panelMenu.model}"/>--> 
                <h:form>
                    <p:tree  id="tree" value="#{menuManager.root}" var="menu" animate="true">
                        <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                            <a  class="header_a_class" href="#{menu.URL}"  target="workspace" style="text-decoration: none;font-size: 16px">
                                #{menu.name}
                            </a>
                        </p:treeNode>                  
                    </p:tree>          
                </h:form>
            </pe:layoutPane>
            <pe:layoutPane id="centerUnit" position="center" resizeWhileDragging="true">
                <iframe id="workspace" name="workspace" src="cbm/cm/RealtimeData.jsf"></iframe>
            </pe:layoutPane>
        </pe:layout>
    </h:body>
</html>
New page was opend in iframe,and the the first page CollectorManager.xhtml :

Code: Select all

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet library="css" name="default.css"/>
        <h:outputScript library="script" name="locales.js"/>
        <title>Collector</title>
    </h:head>

    <h:body>
        <h:form id="form">
            <p:layout style="position: absolute;top: 0px;bottom: 0px;left: 0px;right: 0px;margin: 1px">
                <p:layoutUnit position="west" size="200" gutter="1"  resizable="true">
                    ..............
                </p:layoutUnit>
                <p:layoutUnit position="center" gutter="1"  id="centerUnit">   
                    <p:toolbar id="toolbar">
                        <f:facet name="left">
                            <p:commandButton value="add" actionListener="#{collectorManager.create}" process="@this" update=":form:dlg" oncomplete="PF('dlg').show()" icon="ui-icon-plusthick"/>
                        </f:facet>
                    </p:toolbar>
                    <p:dataTable id="table" value="#{collectorManager.model}" var="collector" selection="#{collectorManager.selection}" selectionMode="single" rowKey="#{collector.id}">
                        <p:ajax event="rowSelect"/>
                        <p:ajax event="rowDblselect" listener="#{collectorManager.onRowSelection}" update=":form:dlg" oncomplete="PF('dlg').show()"/>
                        <p:column headerText="Collector ID">
                            <h:outputText value="#{collector.id}"/>
                        </p:column>
                        ...............................
                    </p:dataTable>

                    <p:dialog id="dlg" widgetVar="dlg" style="width:500px; margin: 30px 20px 2px -20px" header="detail info">

                        <p:toolbar>
                            <f:facet name="left">
                                <p:commandButton value="save" actionListener="#{collectorManager.save}" process="dlg" update=":form:table" oncomplete="PF('dlg').hide()" icon="ui-icon-disk"/>
                            </f:facet>
                        </p:toolbar>
                        <p:panelGrid>
                            <p:row>
                                ...............
                                <p:column>
                                    <h:outputText value="type"/>
                                </p:column>
                                <p:column >
                                    <p:inputText id="type" value="#{collectorManager.selection.type}" readonly="true"/>
                                    <p:commandButton icon="ui-icon-search" actionListener="#{collectorManager.openCollectorTypeSelectDF}" process="@this">
                                        <p:ajax event="dialogReturn" listener="#{collectorManager.onCollectorTypeChosen}" update="type" />
                                    </p:commandButton>
                                </p:column>
                            </p:row>
                           .................
                        </p:panelGrid>                        
                    </p:dialog>
                </p:layoutUnit>
            </p:layout>
        </h:form>
    </h:body>
</html>
From this page i open second page like this:

Code: Select all

    public void openCollectorTypeSelectDF(ActionEvent e) {
        Map<String, Object> options = new HashMap<>();
        options.put("resizable", true);
        options.put("draggable", true);
        options.put("contentWidth", 300);
        options.put("contentHeight", 600);
        options.put("modal", true);
        RequestContext.getCurrentInstance().openDialog("CollectorTypeSelectDF", options, null);
    }
CollectorTypeSelectDF.xhtml

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="default.css" library="css"/>
        <title>Please select type</title>
    </h:head>
    <h:body>
        <h:form>
            <p:toolbar>
                <f:facet name="right">
                    <p:commandButton value="ok" actionListener="#{collectorTypeManager.closeSelectDlg}" process="@form" icon="ui-icon-check"/>
                </f:facet>
            </p:toolbar>
            <p:fieldset>
                <p:tree  id="tree" value="#{collectorTypeManager.root}" var="node" selectionMode="single" selection="#{collectorTypeManager.selectedNode}">
                    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                        <h:outputText value="#{node.name}" />
                    </p:treeNode>
                </p:tree>
            </p:fieldset>
        </h:form>
    </h:body>
</html>
When i click "ok" button,method "closeSelectDlg" was invoked

Code: Select all

    public void closeSelectDlg(ActionEvent e) {
        RequestContext.getCurrentInstance().closeDialog(getSelectedNode().getData());
    }
But "dialogReturn" ajax listener was not invoked

Code: Select all

<p:ajax event="dialogReturn" listener="#{collectorManager.onCollectorTypeChosen}" update="type" />

Code: Select all

    public void onCollectorTypeChosen(SelectEvent event) {
        selection.setType((CollectorType) event.getObject());
    }
And then i get errors In CollectorTypeSelectDF.xhtml

Code: Select all

primefaces.js.jsf?ln=primefaces&v=5.3.11:1 
Widget for var 'widget_form_j_idt53' not available!

primefaces.js.jsf?ln=primefaces&v=5.3.11:6 
Uncaught TypeError: Cannot read property 'cfg' of undefined
dialogReturnBehavior=sourceWidget.cfg
Now any other info you need ?
primefaces:jakarta:12.0.0.jar,
primefaces-ext:jakarta:12.0.0.jar,
JSF Mojarra 3.0
glassfish-6.2.5,
netbeans 14
IDEA 2022.2.2
Browser: Edge

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 50 guests