referencing throws javax.el.PropertyNotFoundException: Target Unreachable, identifier 'i' resolved to null

Question

I keep getting javax.el.PropertyNotFoundException: Target Unreachable, identifier 'i' resolved to null on my PrimeFaces application, when I click on commandButtonwhich is supposed to delete the image but I just can't seem to find the reason. I checked this answer but nothing there is my problem. When I remove or not click on the commandButton the application works, and the var="i" works perfectly for all the other DOM/PF elements, so I'm 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 the i value in commandButton but non of these worked.

setting the commandButton out of the <p:graphicImage throws 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 have done overriding to the onClick event for the image, since default clicking redirected to 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>

the <h:inputHidden value="#{i.imageDescription}" is what allows to fill the lightbox title="" attribute dinamically.

I don't think so but, Could the onClick event being overridden have any effect on this issue?

BalusC · Answer 1 · 2015-07-08T07:13:15.823

4

The <p:contentFlow> is not an UIData component. It is thus not capable of saving and restoring the iteration state during a component tree visit (as required during decode of UICommand component). You'd basically need to print image's unique identifier as a HTTP request parameter during render response.

<p:commandButton icon="ui-icon-trash"
                 action="#{imageHandler.deleteImage}"
                 update="contentFlow">
    <f:param name="id" value="#{i.id}"/>
</p:commandButton>

public void deleteImage() {
    String i = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("id");
    this.imgFacade.deleteImage(i);
}

edited Jul 08 '15 at 07:13

answered Jul 08 '15 at 07:05

BalusC

1,082,665
372
3,610
3,555

First of all thank you.Well I had already tried this solution, but I re-checked to see if I had placed something wrong and I still get the same error. – Esteban Rincon Jul 08 '15 at 12:15
I now see that you've placed the command button inside the image. This will result in invalid HTML. Separate them, or use a command link and put the image inside the command link. – BalusC Jul 08 '15 at 12:38
What is weird is that I already use the ` – Esteban Rincon Jul 08 '15 at 12:41
The f:param is only applied on the parent. So your current f:param is only applied on the image, not on the command. The command must have its own, exactly as shown in the answer. – BalusC Jul 08 '15 at 12:42
The error is still shown when clicking the `commandButton` even placed out of `graphicImage`, I update question with these details. – Esteban Rincon Jul 08 '15 at 12:51
Get rid of ``, it isn't making any sense in this construct. If that still doesn't work, then please post the full stack trace, so we can pinpoint the caller. – BalusC Jul 08 '15 at 12:51
When I click directly on the image, a ` – Esteban Rincon Jul 08 '15 at 12:54
It is referencing `#{i}` which isn't available there during decode. Look for a different solution if the `` is causing problems. – BalusC Jul 08 '15 at 12:56

referencing throws javax.el.PropertyNotFoundException: Target Unreachable, identifier 'i' resolved to null

1 Answers1

Linked