Junior backend developer here, getting my first frontend experience using PrimeFaces 6.0 Mobile, so forgive me if this is a super basic question.
I'm trying to use my own custom Ajax loading image gif using the ajaxStatus component, but when I include it in my "template.xhtml", both the default loading image and the one I configured are displayed, resulting in 2 differently styled circles rotating in a pretty awkward manner.
The template.xhtml code:
Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<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://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<f:view renderKitId="PRIMEFACES_MOBILE"/>
<h:head>
<title><ui:insert name="title">Packing Service</ui:insert></title>
<h:outputScript library="js" name="barcode.js"/>
<h:outputScript library="primefaces" name="primefaces.js"/>
<h:outputStylesheet library="css" name="default.css"/>
</h:head>
<h:body>
<f:metadata>
<ui:insert name="metadata"><f:event type="preRenderView" listener="#{dtSessionData.isLoggedIn()}"/></ui:insert>
</f:metadata>
<h:form id="form">
<pm:header title="#{dtDispatcher.screenTitle}">
<ui:insert name="home">
<f:facet name="left">
<p:commandButton icon="ui-icon-grid" iconPos="right" action="#{dtSessionData.homeAndRefresh()}" ajax="false" disabled="#{dtSessionData.disableButtons()}"/>
</f:facet>
</ui:insert>
<ui:insert name="logout">
<f:facet name="right">
<p:commandButton icon="ui-icon-action" iconPos="right" action="#{dtSessionData.logout()}" ajax="false" disabled="#{dtSessionData.disableButtons()}"/>
</f:facet>
</ui:insert>
</pm:header>
<p:messages id="messages" showDetail="true" autoUpdate="true"/>
<ui:insert name="content"></ui:insert>
</h:form>
<p:ajaxStatus onstart="PF('statusDialog').show()" onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" draggable="false" closable="false" resizable="false" showHeader="false">
<p:graphicImage name="/im/loadingstatus.gif" />
</p:dialog>
</h:body>
</html>