<p: commandButton> link <p: contentFlow var = "i"> throws javax.el.PropertyNotFoundException: target is not available, id 'i' is allowed to be null

I keep getting javax.el.PropertyNotFoundException: Target Unreachable, identifier 'i' resolved to null

in PrimeFaces app when I click commandButton

which should delete the image, but I just can't find the reason. I checked this answer but nothing happened. When I uninstall or not click the commandButton

app works, but var="i"

works fine for all other items DOM/PF

, so I just stuck here. Thanks in advance.

Here's my code:

<h:form>
    <div id="visor-imagenes">
        <p:contentFlow value="#{imageHandler.personalImgList}"
                       var="i" id="contentFlow"
                       styleClass="contentWrapp">

            <p:graphicImage value="#{fileUploadMB.image}"
                            styleClass="content"
                            onclick="clickFlow(this, event)">

                <f:param name="id" value="#{i.id}"/>
                <h:inputHidden  value="#{i.imageDescription}"/>

                <p:commandButton icon="ui-icon-trash"
                                 action="#{imageHandler.deleteImage(i.id)}"
                                 update="contentFlow">
                </p:commandButton>
            </p:graphicImage>
            <div class="caption">#{i.imageName}</div>
        </p:contentFlow>
    </div>
</h:form>

      

        
        
        
      

    

bean:

public void deleteImage(String i) {
    this.imgFacade.deleteImage(i);
}

      

        
        
        
      

    

I tried using <f:param

, <f:setPropertyActionListener

for value i

in commandButton but none of them worked.

installing commandButton

from <p:graphicImage

throws the same error:

<p:contentFlow value="#{fileUploadMB.personalImgList}" var="i" id="contentFlow" styleClass="contentWrapp">                         
     <p:commandButton icon="ui-icon-trash"
                 action="#{fileUploadMB.deleteImage}"
                 update="contentFlow">
           <f:param name="id" value="#{i.id}"/>                                    
     </p:commandButton>                             
         <p:graphicImage value="#{fileUploadMB.image}"  styleClass="content" onclick="clickFlow(this, event)">
             <f:param name="id" value="#{i.id}"/>
             <h:inputHidden  value="#{i.imageDescription}"/>                                                                                             
        </p:graphicImage>                               
      <div class="caption">#{i.imageName}</div>                                                     
</p:contentFlow> 

      

        
        
        
      

    

Also, I made an override for the event onClick

for the image, since by default the click is redirected to the image file.

       <script>
        function clickFlow(item, e) {
            if ($(item).parent().hasClass('active')) {
                e.stopImmediatePropagation();
                var text = $(item).siblings("input[type=hidden]").attr('value');
                $('.image-linker:first-child').attr('href', $(item).attr('src'));
                $('.image-linker:first-child').attr('title', text);
                $('.image-lightboxer:first-child').attr('src', $(item).attr('src'));
                $('.image-linker:first-child').click();
            }
        }
    </script> 

      

        
        
        
      

    

<h:inputHidden value="#{i.imageDescription}"

is what allows you to dynamically populate the attribute lightbox title=""

.

I don't think so, but could an overridden event onClick

affect this problem?