1

I am using primefaces 8.0 and jsf 2.2, and trying to select .ui-fileupload-cancel element using jquery $ function and listen to (.on) but it is not working, when i use (.click) it works just for the first click.

<ui:composition template="/templates/main.xhtml">

<ui:define name="body">

<script>

    $(document).ready(function(){
        $(".ui-fileupload-cancel").click(function(){
                alert("Works");
        });
    });
                
    $(document).ready(function() {
       $(".ui-fileUpload").on("click",".ui-fileupload-cancel",function() {
            alert("Does not work");
        });
    })
                   
</script>

        <p:accordionPanel id="uploadPanel" activeIndex="null">

            <p:tab id="uploadTab" title="title">
    
                <p:fileUpload 
                    id="upload" listener="#{Controller.uploadListener}"
                    mode="advanced"  update="messages @this"
                    allowTypes="/(\.|\/)(xml)$/" fileLimit="1"
                    oncomplete="uploadcomplete()" onerror="uploadcomplete()" />

                <p:remoteCommand name="uploadcomplete" update="someId anotherId"
                    process="@this" />

                <p:remoteCommand name="doClear"
                    action="#{Controller.doClear}" update="someId anotherId"
                    process="@this" />

                <p:growl id="messages" showDetail="false" />
            </p:tab>
        </p:accordionPanel>

Skinning from primefaces fileUpload doc.

Class <------------------------------------> Applies

.ui-fileupload <-------------------------> Main container element

.ui-fileupload-buttonbar <------------> Button bar

.ui-fileupload-choose <------------> Browse button

.ui-fileupload-upload <------------> Upload button

.ui-fileupload-cancel <------------> Cancel button

.ui-fileupload-content <------------> Content container

What am i missing?

Omar
  • 13
  • 4

1 Answers1

1

Add the event to document instead of .ui-fileupload

 $(document).on("click",".ui-fileupload-cancel",function() {
        alert("Does not work");
    });
xrodas
  • 466
  • 2
  • 10
  • In jsf the body tag, looks like this , dose it matter? – Omar Dec 11 '20 at 15:13
  • try $(document).on – xrodas Dec 11 '20 at 15:17
  • Still the same, but when i use another element to test it, i used "#uploadPanel" with $(document), it worked!! but with "".ui-fileupload-cancel" sill no respone. – Omar Dec 11 '20 at 15:24
  • 1
    The above answer should work. The reason is because of Jquery Event Delegation and because the Cancel button doesn't exist when the page is rendered. See the explanation here: https://stackoverflow.com/questions/15092578/on-vs-live-click-function-on-element-that-doesnt-exist-yet – Melloware Dec 12 '20 at 14:49