选项卡未加载primefaces

时间:2016-04-27 13:01:33

标签: jsf primefaces tabview

我有一个包含两个标签的标签视图,第一个标签包含一个数据表,第二个标签包含谷歌地图。问题是,一旦我从第一个标签移动到第二个标签,就不会加载内容(不显示地图)。我正在使用primefaces 4。

这是我的代码: 这是包含数据表的第一个选项卡

<h:form>
    <p:tabView width="1200" dynamic="true" cache="true" >
        <p:messages for="Message5" id="message5" showDetail="true" autoUpdate="true" closable="true" />
        <p:ajax event="tabChange" listener="#{propertybean.onTabChanged}" ></p:ajax>
        <p:tab title="List-Properties" id="tab1">

        <p:tooltip />
        <h:form id="a" >
            <h:panelGrid columns="1" cellpadding="5">
                <p:commandButton value="Add property" type="button" icon="ui-icon-adds"  onclick="PF('dlg1').show();" >   

                </p:commandButton> 
                <br/>
            </h:panelGrid>

            <p:dataTable var="property" value="#{propertybean.propertyList}" id="AjoutTab" rows="10" 
                         paginator="true"
                         paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                         rowsPerPageTemplate="5,10,15" 
                         widgetVar="propsTable"
                         emptyMessage="No property found with given criteria" 
                         editable="true">
                <f:facet name="header">
                    <p:outputPanel>
                        <h:outputText value="Search all fields:" />
                        <p:inputText id="globalFilter" onkeyup="propsTable.filter()" style="width:150px" placeholder="Enter keyword"/>
                    </p:outputPanel>
                </f:facet>

                <p:ajax event="rowEdit" listener="#{propertybean.onRowEdit}"/>
                <p:ajax event="rowEditCancel" listener="#{propertybean.onRowCancel}" />
                <!--   <p:ajax event="sort" skipChildren="false" /> -->

                <p:column headerText="ID" sortBy="#{property.propId}" >
                    <p:cellEditor> 
                        <f:facet name="output"><h:outputText value="#{property.propId}" /></f:facet>
                        <f:facet name="input"><p:inputText id="modelInput" value="#{property.propId}" style="width:100%"/></f:facet>
                    </p:cellEditor>
                </p:column>


                <p:column headerText="Name" sortBy="#{property.propName}" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{property.propName}"/></f:facet>
                        <f:facet name="input"><p:inputText  value="#{property.propName}" style="width:100%"/></f:facet>
                    </p:cellEditor>
                </p:column>


                <p:column headerText="Valid From"  sortBy="#{property.propValidfromDate}" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propValidfromDate}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propValidfromDate}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>


                <p:column headerText="Valid To" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propValidtoDate}"/></f:facet>
                        <f:facet name="input"><p:inputText  value="#{property.propValidtoDate}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>


                <p:column headerText="Country" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{property.propCountry}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propCountry}" style="width:100%"/></f:facet>
                    </p:cellEditor> </p:column>


                <p:column headerText="Street name" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{property.propStreetname}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propStreetname}" style="width:100%"/></f:facet>
                    </p:cellEditor> </p:column>

                <p:column headerText="Street number" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propStreetnb}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propStreetnb}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>

                <p:column headerText="Zip code" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propPostcode}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propPostcode}" style="width:100%"/></f:facet>
                    </p:cellEditor> </p:column>

                <p:column headerText="Length" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propLength}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propLength}" style="width:100%"/></f:facet>
                    </p:cellEditor> </p:column>

                <p:column headerText="Width" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"><h:outputText value="#{property.propWidth}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propWidth}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>

                <p:column headerText="Status" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propStatus}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propStatus}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>


                <p:column headerText="Area" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propArea}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propArea}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>

                <p:column headerText="Comment" filterMatchMode="contains">
                    <p:cellEditor>
                        <f:facet name="output"> <h:outputText value="#{property.propComment}"/></f:facet>
                        <f:facet name="input"><p:inputText value="#{property.propComment}" style="width:100%"/></f:facet>
                    </p:cellEditor></p:column>


                <p:column style="width:4%">
                    <p:commandButton id="Delete"  icon="ui-icon-trash" actionListener="#{propertybean.DeleteProperty(property)}" title="Delete" >
                        <p:ajax actionListener="#{propertybean.DeleteProperty(property)}" update="@form" ajax="true"></p:ajax>
                    </p:commandButton>
                </p:column>

                <p:column style="width:32px">
                    <p:rowEditor />
                </p:column>   
            </p:dataTable>

        </h:form>        
    </p:tab>

这是包含Google地图的第二个标签:                      
                                                              

                        <div class="box-header col-md-12 with-border">
                            <div class="col-md-9">

                                <br/>             
                                <h3 class="box-title">Map</h3>

                            </div><!-- /.box-tools --> 


                        </div><!-- /.box-header -->

                        <div class="box-body">
                            <h:form prependId="false" id="idformshow">  
                                <div class="mailbox-controls" id="idmap">
                                    <!-- Check all button -->
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div id="map" class="map mailbox-controls">
                                                <div id="gmap" class="fill" style="width:100%;height:700px" ></div>
                                                <div id="olmap" class="fill" style="width:100%;height:700px" ></div>

                                            </div>

                                        </div>
                                    </div>
                                </div> 

                                <div id="idjson" style="display:none"></div>
                            </h:form>


                            <div class="col-md-3 col-sm-3" id="layersiwtcher" style="position: absolute; top: 70px; left: 50px; z-index: 40;">


                                <div class="box box-primary">
                                    <div class="box-header with-border">
                                        <h3 class="box-title">Layer Selection</h3>
                                        <div class="box-tools">
                                            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                                        </div>
                                    </div>
                                    <div class="box-body">


                                    </div><!-- /.box-body -->
                                </div><!-- /. box -->

                            </div><!-- /.col -->        

                            <div class="col-md-3">
                                <div id="popup" ></div>
                            </div>  


                        </div><!-- /.box-body -->
                    </div><!-- /.box -->
                </div> 

            </div>
        </h:form>
    </p:tab>
</p:tabView>

onTabChanged方法包含一条消息:

public void onTabChanged(TabChangeEvent e){
    System.out.println("Success,tab changed");
    FacesContext.getCurrentInstance().addMessage("Message5", new FacesMessage("Tab With Index :: "+e.getTab().getTitle()+" Is Changed"));
}

如果有人能帮助我,我将感激不尽

0 个答案:

没有答案