I have a map layout with markers in my jsf page. When I click on a marker I can retrieve all info about that point through my database. As I click on a marker a dialog is shown up. Here is my layout unit:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<p:growl id="growl" showDetail="true"/>
<p:gmap center="41.067445,29.047749" zoom="11" type="HYBRID" model="#{mapTrial.simpleModel}" style="width:100%;height:100%" streetView="true">
<p:ajax event="overlaySelect" listener="#{mapTrial.onMarkerSelect}" update="growl" partialSubmit="true" immediate="true"/>
<p:gmapInfoWindow rendered="true">
<h:form id="form">
<p:tabView id="tabView" dynamic="false" cache="true" orientation="top" effect="blind" style="font-size: 10px;font-weight: bold;">
<p:tab id="tab1" title="Proje Bilgileri">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Proje Adı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectName}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Proje Detayı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectExp}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Proje Koordinatları: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectCoordLat}, #{mapTrial.projectCoordLong}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İlçe: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.district}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Sektör: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.sector}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İş Durumu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.workStatus}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.assistant}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İhale Adı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.bidName}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Firma: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.company}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İhale Bedeli: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.bidCost}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Ödenen Hak Ediş Tutarı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.costPaid}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="SÜRE BİLGİSİ" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />
<h:outputText value="Başlangıç Tarihi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.startDate}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İşin Süresi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.processTime}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Bitiş Tarihi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.endDate}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Teknik Bilgiler">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Ada/Parsel: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.parcel}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Plan Durumu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.planStatus}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Yolun Genişliği: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.roadWidth}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Yolun Uzunluğu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.roadLength}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Toplam Alan: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.totalArea}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İlave Bilgi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.extraInfo}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Teklif Birim Fiyat: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.unitOffer}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Yapım Yaklaşık Maliyeti: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.approxCost}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Proje Maliyeti: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectCost}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Dosya Kodu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.fileNu}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Proje Teşkilatı">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Şef: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.chef}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Mimar: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.arch}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.strEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.landArch}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.elecEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Jeoloji Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.geoEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Makine Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.machEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Harita Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.mapEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Şehir Plancısı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.planEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İHALE ÖNCESİ TAKİP" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />
<h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.assistantBefore}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Sorumlu Müh./Mimar: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.engArch}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="UYGULAMACI KONTROL TEŞKİLATI" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />
<h:outputText value="Müdür Yard.: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.mudYard}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Mimar: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.mim}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.ins}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.peyz}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.elek}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab id="tab4" title="Firma Bilgisi">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Yetkili Kişi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compResp}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Görevi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compResJob}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Telefon: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compTel}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Adres: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compAddress}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="E-Posta: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compMail}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab title="Yorumlar">
<p:commandButton value="Yorum Ekle" id="addCom" onclick="comDialog.show();" style="font-size: 11px;font-weight: bold;">
<p:dialog header="Yorum Ekle" widgetVar="comDialog" resizable="true" showEffect="explode" hideEffect="explode" appendToBody="true" modal="true" closable="true">
<p:inputTextarea rows="6" cols="33" />
<br />
<p:commandButton value="Ekle" action="#{mapTrial.saveComm}" immediate="true" style="font-size: 12px;font-weight: bold;"/>
<p:commandButton value="Vazgeç" async="true" onclick="comDialog.hide();" style="font-size: 12px;font-weight: bold;"/>
</p:dialog>
</p:commandButton>
</p:tab>
<p:tab title="Dosyalar">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage value="/images/pdf.png" />
<h:outputText value=""/>
</h:panelGrid>
</p:tab>
<p:tab title="Resimler">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage value="/images/pdf.png" />
<h:outputText value=""/>
</h:panelGrid>
</p:tab>
</p:tabView>
<br />
<center>
<h:outputText value="Toplam Proje Sayısı: #{mapTrial.total}" style="font-size: 13px; color: red"/>
</center>
</h:form>
</p:gmapInfoWindow>
</p:gmap>
</p:layoutUnit>
My problem here is with that part:
<p:tab title="Yorumlar">
<p:commandButton value="Add Comment" id="addCom" onclick="comDialog.show();" style="font-size: 11px;font-weight: bold;">
<p:dialog header="Add Comment" widgetVar="comDialog" resizable="true" showEffect="explode" hideEffect="explode" appendToBody="true" modal="true" closable="true">
<p:inputTextarea rows="6" cols="33" />
<br />
<p:commandButton value="Add" action="#{mapTrial.saveComm}" immediate="true" style="font-size: 12px;font-weight: bold;"/>
<p:commandButton value="Cancel" async="true" onclick="comDialog.hide();" style="font-size: 12px;font-weight: bold;"/>
</p:dialog>
</p:commandButton>
</p:tab>
When I open the tab and click on the button it shows the add comment dialog. But as dialog is shown and the add button is clicked, simply nothing happens. I tried it with removing appendToBody and model attributes but that time it doesn’t show comment dialog even.
How can I achieve this?
Move the
<p:dialog>outside the<h:form>and add a<h:form>inside it.Next time, please don’t post a code wall, instead provide a SSCCE in order to analyze your problem. We don’t need to read all the code in order to find the problem.