我有一个包含两个标签的标签视图,第一个标签包含一个数据表,第二个标签包含谷歌地图。问题是,一旦我从第一个标签移动到第二个标签,就不会加载内容(不显示地图)。我正在使用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"));
}
如果有人能帮助我,我将感激不尽