0

I am using the following snippet for uploading photo, using primefaces : 

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
    <h:outputText value="PrimeFaces Single Upload"  />
    <h:form enctype="multipart/form-data">
        <p:fileUpload fileUploadListener="#{uploadPhotoHandler.handleFileUpload}" mode="advanced"
            update="messages" label="Choose a file" sizeLimit="5242880" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
            invalidSizeMessage="The maximum file size allowed is 1 Megabyte !"
            invalidFileMessage="You are allowed to upload only images !" />
        <p:growl id="messages" showDetail="true" sticky="true" />

This composition I am adding into the main page, which is index.xhtml using the following command : <ui:include src="upload_img_form.xhtml" />.

The main page looks like : 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.1.js"></script>
    <script type="text/javascript" src="js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="js/jquery.xdr-transport.js"></script>
    <script type="text/javascript" src="js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="themes/jquery-ui-1.10.0.custom/js/jquery-ui-1.10.0.custom.min.js"></script>
    <link type="text/css" rel="stylesheet" href="themes/jquery-ui-1.10.0.custom/css/sunny/jquery-ui-1.10.0.custom.css" />
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type=" text/css" rel="stylesheet" href="css/styles.css" />
</h:head>
<h:body>
    <div id="container" class="container ">
        <ui:include src="upload_img_form.xhtml" />
    </div>
</h:body>
</html>

I have the following problems :

  • The progress bar doesn't work,
  • Cancel button doesn't work, and the biggest problem is the sizeLimit which doesn't validate the file which is given as a input.
  • Even this is not autoupload, the files are autouploaded, without clicking Upload button before.

The problem is 100% related to the head section because if I remove that, it works. Though, it doesn't work for others functionality in the same page, so I have to keep the js files and styles.

Thank you for your response.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Ioan
  • 5,152
  • 3
  • 31
  • 50
  • An SSCCE would be helpful. Your composition is indeed very strange. Normally, the `h:head` and `h:body` go in master template and are not repeated in child templates. Have you [validated](http://validator.w3.org) the HTML? See also http://stackoverflow.com/questions/4792862/how-to-include-another-xhtml-in-xhtml-using-jsf-2-0-facelets/4793959#4793959 – BalusC Feb 19 '13 at 12:11
  • @BalusC I have updated and tried to be more clear in the problem. The problem is related 100% to the head part of the main page. (I do not know why I wasn't able to format the main.xhtml code in the question). Could you adivse? Thanks a lot. I appreciate your help! – Ioan Feb 19 '13 at 12:37
  • Why are you manually including jQuery and all on em? PrimeFaces already auto-includes jQuery and it would only conflict with your manually included jQuery. As to code formatting, just select code and press `{}` button in message editor's toolbar. – BalusC Feb 19 '13 at 12:39
  • You know, you have right. When I started with JSF (few days ago), I didn't use primefaces, so this is the reason why I added jquery manually. But right now I've deleted al js stuff, and everything works.. – Ioan Feb 19 '13 at 12:40

1 Answers1

1

Get rid of the manually included jQuery. PrimeFaces already auto-includes own copies. If they are of a different version, it would only conflict, resulting in JS-related trouble in all colors. You would have noticed it if you have checked the JS console in browser's developer toolset.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • Thanks a lot for your help. I also appreciate a lot all your contributions from SO regarding JSF and web related stuff. – Ioan Feb 19 '13 at 12:43
  • One question , though : I was using until now menu() functionality from jquery. Now that all jquery js have been gone, I have an error saying that the Object object has no method menu. Should I forget about jquery stuff and concentrate only on primefaces ? Or it is a way, though, to use jquery functionalities (if there is a copy of jquery inside primefaces). Thanks – Ioan Feb 19 '13 at 12:50
  • 1
    You can keep using own copy of jQuery UI. If you happen to have pages which do not necessarily use PrimeFaces components (and thus do not necessarily have auto-included jQuery on all pages), then you can force inclusion of PrimeFaces-bundled jQuery by ``. – BalusC Feb 19 '13 at 12:55
  • Ok, but I use exactly in this page "menu" functionality, and if I add jquery lib, I have to add all the others because they depend on each other. So I am returning to the original problem.. – Ioan Feb 19 '13 at 13:02
  • Actually you have right, my problem is that I want to add an extra library, jquery ui library, and not the standard library. – Ioan Feb 19 '13 at 13:27
  • 1
    You do and should not need to add your own copy of jQuery, for exactly the reason as mentioned in the answer. PrimeFaces does not bundle jQuery UI (instead, it autogenerates HTML according jQuery UI syntax and bundles only a customized copy of jQuery UI CSS file), so you can just bundle your own copy of jQuery UI JS file (and if necessary the theme CSS file on top of it as PrimeFaces doesn't use the *entire* jQuery UI theme). – BalusC Feb 19 '13 at 13:32