CODEWITHSUNDEEP
javajsfjquery-mobilefile-uploadprimefaces
DominikAngerer
DominikAngerer

Reputation: 6530

Using Primefaces FileUpload with jQuery Mobile p:fileupload not rendered?

What I try: I want to upload pictures with Primefaces FileUpload Tag in a JSF page with jQuery mobile. This side is only available on desktopbrowser but should also have the look like the other pages. The problem: always when I add the stylesheet from jquery mobile and the script - the whole form won't be rendered/isn't visible. Someone know how I can fix this?

Header:

    <link rel="stylesheet" href="./jquery/jquery.mobile-1.3.1.min.css" />
    <script type="text/javascript" src="./jquery/jquery.js"></script>
    <script type="text/javascript" src="./jquery/jquery.mobile-1.3.1.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>

Content area from jQuery Mobile

        <div id="content" data-role="content">   
            <h:form enctype="multipart/form-data">
                <p:fileUpload fileUploadListener="#{fileUploadController.handleFileUpload}"
                              mode="advanced" 
                              update="messages"
                              sizeLimit="100000" 
                              allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />

                <p:growl id="messages" showDetail="true"/>

            </h:form>
        </div>

Edit: If you have another idea how I can upload an image to my JSF controller as a File it would be a good solution for me.

Upvotes: 2

Views: 1270

Answers (1)

DominikAngerer
DominikAngerer

Reputation: 6530

I found a solution - not that good but it's okay.. I used a iframe with the uploadForm.xhtml (where the normal form with the upload-tag from primefaces is) as source and in my regular upload.xhtml page (with the jquery mobile CSS). 

<iframe src="./uploadForm.xhtml" width="100%" height="300" scrolling="auto" border="0" frameborder="0"></iframe>

So it will display both - the jquery mobile things and the primefaces upload form. It's not perfect but it works for my desktop application.

Upvotes: 3

Related Questions