'Primefaces Wizard and fileUpload Uncaught TypeError: this.jq.fileupload is not a function
I tried to create a new Wizard with <p:tab>, it seems to be working fine but when I try to implement it in here to replace with the richfaces fileUpload, it keep showing error in the console like this:
I have tried it in 1st to 3rd tabs, the fileUpload seems to be working fine, but when comes to 4th to 6th tabs, it keeps showing "Uncaught TypeError: this.jq.fileupload is not a function" in console and upload is not working either in frontend or backend.
I also added enctype="multipart/form-data" in <h:form> but it doesn't have any differences
Im currently working on Primefaces 8.0.5
It does not have any error in my log, only console.
<ui:define name="content">
<h:panelGroup id="FLEXIBLE_TOPOLOGY">
<sec:authorize access="hasAnyRole('ROLE_ADMIN')">
<h:form id="projectCreateWizardFrm">
<p:wizard flowListener="#{projectCreatePage.onFlowProcess}" id="projectCreateWizard"
widgetVar="projectCreateWizardWV"
showNavBar="#{projectCreatePage.webActionPending}" showStepStatus="true"
styleClass="wizard">
<p:tab id="project" titleStyleClass="notClickable">
<f:facet name="title">
...
</f:facet>
<p:panel id="wizardProjectPnl">
<p:focus context="wizardProjectPnl" />
<div class="title2">
<h:outputText value="#{msg['system_step']} 1 - #{msg['flexitopology_wizard_project_header']}" />
</div>
<p:spacer height="10" />
<h:panelGrid id="projectCreateStartTbl" columns="2" columnClasses="form-label, form-value">
<h:panelGroup>
...
</h:panelGroup>
<h:inputText id="projectName" value="#{projectCreatePage.project.name}" size="60" maxlength="100" autocomplete="false"
disabled="#{!projectCreatePage.webActionPending or (!projectCreatePage.showEdit and projectCreatePage.showDeploy)}" />
<sec:authorize access="hasAnyRole('ROLE_ADMIN')">
<h:panelGroup rendered="#{!projectCreatePage.qcsFlag}">
<h:outputLabel value="#{msg['workspace_create_project_hostingcustomer']}" />
</h:panelGroup>
<h:panelGroup rendered="#{!projectCreatePage.qcsFlag}">
<h:selectBooleanCheckbox id="customerEnabledChkBox" value="#{projectCreatePage.customerEnabled}"
disabled="#{projectCreatePage.disabledAfterSaved}">
<f:ajax event="click" listener="#{projectCreatePage.onCustomerEnabledChange}"
render="organizationLblPnl, organizationValPnl, environmentLblPnl, environmentValPnl, standaloneQasLblPnl, standaloneQasValPnl" />
</h:selectBooleanCheckbox>
</h:panelGroup>
</sec:authorize>
<h:panelGroup id="organizationLblPnl">
...
</h:panelGroup>
<h:panelGroup id="organizationValPnl">
...
</h:panelGroup>
<h:panelGroup id="environmentLblPnl">
...
</h:panelGroup>
<h:panelGroup id="environmentValPnl">
...
</h:panelGroup>
<h:panelGroup id="organizationEnvironmentLblPnl">
...
</h:panelGroup>
<h:panelGroup id="organizationEnvironmentValPnl">
...
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
</h:panelGrid>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="license" titleStyleClass="notClickable">
<f:facet name="title">
...
</f:facet>
<p:panel id="wizardLicensePnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<h:panelGrid id="projectCreateLicenseTbl" columns="2" columnClasses="form-label, form-value">
<h:panelGroup id="contractSlaLblPnl">
...
</h:panelGroup>
<h:panelGroup id="contractSlaValPnl">
...
</h:panelGroup>
<h:panelGroup id="standaloneQasLblPnl">
...
</h:panelGroup>
<h:panelGroup id="licenseLblPnl">
...
</h:panelGroup>
<h:panelGroup id="licenseValPnl" style="border:none;padding:0;">
...
</h:panelGroup>
<h:panelGroup id="licenseLblPnl2">
...
</h:panelGroup>
<h:panelGroup id="licenseValPnl2" style="border:none;padding:0;">
...
</h:panelGroup>
</h:panelGrid>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="topology" titleStyleClass="notClickable">
<f:facet name="title">
...
</f:facet>
<p:panel id="wizardTopologyPnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<p:panel id="projectCreateTopologyPnl" style="border:0;">
<f:facet name="header">
<div class="col-left title3">
...
</div>
<div class="col-right title3">
...
</div>
</f:facet>
<h:panelGrid columns="3" styleClass="grid" columnClasses="grid3,grid3,grid3_2">
<h:panelGroup layout="block" id="topologyLeftPnl">
<ui:include src="/auth/admin/project/includes/flexiTopologyOptions.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage}" />
<ui:param name="idPrefix" value="projectCreateWizard" />
<ui:param name="renderId" value=":projectCreateWizardFrm:topologyMiddlePnl" />
<ui:param name="enableDnD" value="false" />
<ui:param name="dragId" value=":projectCreateWizardFrm:topologyFlexiComponentsSelectedFieldset" />
<ui:param name="dropId" value=":projectCreateWizardFrm:topologyFlexiComponentsSelectedDataList" />
</ui:include>
</h:panelGroup>
<h:panelGroup>
<p:panel id="topologyMiddlePnl" styleClass="general-content">
<div class="title4">
...
</div>
<br />
<h:panelGroup id="topologyFlexiComponentsPnl">
...
<p:fieldset id="topologyFlexiComponentsSelectedFieldset">
<p:dataList type="unordered" id="topologyFlexiComponentsSelectedDataList"
value="#{projectCreatePage.revision.topology.sortedTopologyModuleDefList}" var="flexi">
<h:panelGroup layout="block">
...
<div class="col-right">
...
</div>
</h:panelGroup>
</p:dataList>
</p:fieldset>
</h:panelGroup>
</p:panel>
</h:panelGroup>
<h:panelGroup>
<p:panel id="topologyRightPnl" styleClass="general-content">
<h:panelGroup id="topologyFlexiComponentDetailPnl">
<div class="title4">
...
</div>
...
<h:panelGrid id="topologyFlexiComponentDetailTbl" columns="2" columnClasses="form-label, form-value"
rendered="#{projectCreatePage.flexiComponent != null}">
...
</h:panelGrid>
<h:panelGroup id="flexiComponentParamsPnl">
<ui:include src="/auth/admin/project/includes/flexiTopologyParams.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage}" />
</ui:include>
</h:panelGroup>
<h:panelGroup id="topologyPtvPnl">
<ui:include src="/auth/admin/project/includes/flexiTopologyPtv.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage.projectPtvPage}" />
<ui:param name="visible"
value="#{projectCreatePage.flexiComponent != null and projectCreatePage.flexiComponent.moduleDef.name == 'PTV'}" />
<ui:param name="editable"
value="#{!projectCreatePage.disabledAfterSaved and projectCreatePage.editTopology}" />
<ui:param name="parentRenderId" value=":projectCreateWizardFrm" />
</ui:include>
</h:panelGroup>
...
</h:panelGroup>
</p:panel>
</h:panelGroup>
</h:panelGrid>
<h:panelGroup id="topologyPopupPnl">
...
</h:panelGroup>
</p:panel>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="machine" titleStyleClass="notClickable">
<f:facet name="title">
<h:panelGroup styleClass="stepNumber">
...
</h:panelGroup>
...
</f:facet>
<p:panel id="wizardMachinePnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<p:panel id="projectCreateMachinePnl" style="border:0;">
<f:facet name="header">
<div class="col-left title3">
...
</div>
<div class="col-right title3">
...
</div>
</f:facet>
<h:panelGrid columns="2" styleClass="grid" columnClasses="grid2,grid2_2">
<h:panelGroup>
<p:panel id="projectCreateMachineLeftPnl" styleClass="general-content">
<div class="title4">
...
</div>
<br />
<h:panelGroup id="machineComponentsPnl">
<p:dataList id="machineComponentsDataList"
value="#{projectCreatePage.revision.topology.sortedTopologyModuleDefList}" var="flexi" type="unordered"
rowIndexVar="idx">
...
</p:dataList>
</h:panelGroup>
<p:remoteCommand name="clickTopologyComponentDiagramElement"
actionListener="#{projectCreatePage.onFlexiTopologyDiagramClick}"
update="projectCreateWizardFrm:projectCreateMachineRightPnl" />
</p:panel>
</h:panelGroup>
<h:panelGroup>
<p:panel id="projectCreateMachineRightPnl" styleClass="general-content">
<div class="title4">
<...
</div>
...
<h:panelGroup id="machineComponentDetailPnl" rendered="#{projectCreatePage.flexiComponent != null}">
<h:panelGrid id="machineComponentMachineSelectionTbl" columns="2" columnClasses="form-label, form-value">
...
<h:panelGroup id="serverFarmLblPnl">
...
</h:panelGroup>
<h:panelGroup id="serverFarmVallPnl">
<h:panelGroup rendered="#{projectCreatePage.revision.selectedServerFarm == null}">
...
<div class="message-description">
<h:outputText value="#{msg['workspace_hosting_location_desc']}" />
</div>
</h:panelGroup>
...
</h:panelGroup>
<h:panelGroup id="flexiMachineLblPnl">
...
</h:panelGroup>
<h:panelGroup id="flexiMachineValPnl">
...
</h:panelGroup>
</h:panelGrid>
</h:panelGroup>
<h:panelGroup id="flexiComponentMachinePnl">
<ui:include src="/auth/admin/project/includes/flexiMachineDetail.xhtml">
<ui:param name="beanPage" value="#{projectCreatePage}" />
</ui:include>
</h:panelGroup>
</p:panel>
</h:panelGroup>
</h:panelGrid>
</p:panel>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="revision" titleStyleClass="notClickable">
<style>
.ui-button-text-icon-left .ui-button-text {
padding: 0.3em 1em .3em 2.1em!important;
}
</style>
<f:facet name="title">
<h:panelGroup styleClass="stepNumber">
<h:outputText value="5"/>
</h:panelGroup>
...
</f:facet>
<p:panel id="wizardRevisionPnl">
<div class="title2">
...
</div>
<p:spacer height="10" />
<h:panelGroup id="projectCreateRevisionPnl" styleClass="project-create-revision-panel">
<h:panelGrid id="projectCreateRevisionTbl" columns="2" columnClasses="form-label, form-value">
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
<p:fileUpload id="attachModel" label="#{msg['system_add']}"
listener="#{projectCreatePage.onQmodelFileUpload}"
update="uploadedQModelFileTbl" auto="true"
accept="#{projectCreatePage.getProjectHelper().getQmodelAcceptFileType()}"
disabled="#{projectCreatePage.disabledAfterSaved}"/>
</h:panelGroup>
...
<h:panelGroup>
<p:dataGrid id="uploadedQModelFileTbl" columns="1" value="#{projectCreatePage.revision.projectRevisionFileList}"
var="item" rendered="#{projectCreatePage.revision.projectRevisionFileList != null}"
emptyMessage="#{msg['template_qpa_files_empty']}">
...
</p:dataGrid>
</h:panelGroup>
...
<h:panelGroup>
<h:inputText value="#{projectCreatePage.revision.applicationId}" size="40" maxlength="100" autocomplete="false"
disabled="#{projectCreatePage.disabledAfterSaved}" styleClass="project-create-revision-input" />
<div class="message-description">
<h:outputText value="#{msg['project_revision_application_id_desc']}" />
</div>
</h:panelGroup>
...
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
...
<div class="message-description">
...
</div>
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
<h:panelGroup>
...
<div class="message-description">
...
</div>
</h:panelGroup>
<h:panelGroup>
...
</h:panelGroup>
<h:selectBooleanCheckbox id="databaseStoreChkBox" value="#{projectCreatePage.datasetStoreEnabled}"
disabled="#{projectCreatePage.disabledAfterSaved}">
<f:ajax event="click" listener="#{projectCreatePage.onDatasetStoreEnabledChange}" />
</h:selectBooleanCheckbox>
<h:panelGroup>
<h:outputLabel value="#{msg['project_database_enable']}" />
</h:panelGroup>
<h:selectBooleanCheckbox id="databaseChkBox" value="#{projectCreatePage.databaseEnabled}"
disabled="true" onclick="return false;"
/>
<h:panelGroup>
...
</h:panelGroup>
...
</h:panelGrid>
</h:panelGroup>
<p:spacer height="10" />
</p:panel>
</p:tab>
<p:tab id="confirm" titleStyleClass="notClickable">
<f:facet name="title">
<h:panelGroup styleClass="stepNumber">
<h:outputText value="6" />
</h:panelGroup>
...
</f:facet>
<p:panel id="wizardConfirmPnl" style="min-height:200px;">
<div class="title2">
...
</div>
<p:spacer height="10" />
<h:panelGroup id="projectCreateConfirmPnlGrp" styleClass="col-center-wrap">
<h:panelGroup styleClass="col-center-content">
<h:panelGrid columns="1" styleClass="col-center">
<qtag:baseMessages id="nestedMsgs1" />
<h:panelGroup rendered="#{!projectCreatePage.validationFailed}">
...
</h:panelGroup>
...
<p:spacer height="10" />
<h:panelGrid columns="1" styleClass="col-center" rendered="#{projectCreatePage.webActionPending}">
...
</h:panelGrid>
<h:panelGrid columns="2" styleClass="col-center" rendered="#{!projectCreatePage.webActionPending}">
...
</h:panelGrid>
</h:panelGrid>
<div class="clearfix"></div>
</h:panelGroup>
</h:panelGroup>
<p:spacer height="10" />
</p:panel>
</p:tab>
</p:wizard>
</h:form>
</sec:authorize>
</h:panelGroup>
</ui:define>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|