Target Update of Iframe

Question

I have some problem with the update of a iframe inside a <c:forEach> iterator:

<h:form>
    <p:outputPanel rendered="#{dd.render()}">
        <p:tabView dynamic="true">
        <c:forEach var="aba" items="#{dd.abas}">
        <p:tab title="#{aba.orelha}" >
        <h2>
            <h:outputText value="#{aba.titulo}" />
            <p:selectOneMenu style="width:250px;  float:right;" value="#{aba.ln}" rendered="#{aba.selecaoAtiva}">
            <f:selectItems value="#{aba.itens}" />
             <p:ajax update="WHAT SHOULD GO HERE???" event="change" />
        </p:selectOneMenu>
        </h2>
            <f:view>
                <iframe src="very-Boring-And-Long-E.L.-Built-URL" width="#{dd.largura}" frameborder="0" height="#{dd.altura}" />
            </f:view>
            </p:tab>
        </c:forEach>
        </p:tabView>
    </p:outputPanel>
</h:form>

I want to update ONLY the iframe contents when the user selects something on the <p:selectOneMenu>. The original code had @form on the ajax tag, and was updating the whole form and putting the user back into the 1st tab.

How can I make the ajax update the iframe whithout messing with the active tab?

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

Use

<p:ajax process="@this" event="change" update="myIframe" />

also set myIframe as id of your frame. I also suggest you using <ui:repeat /> instead of c:forEach, it can sometimes break your view. See this question

edited May 23 '17 at 11:43

Community

1
1

answered Jan 03 '13 at 11:36

Petr Mensik

26,874
17
90
115

Not working. when I do the exact changes you suggest, i get this message: `javax.faces.FacesException: Cannot find component with identifier "myIframe" referenced from "j_idt71:j_idt73:j_idt77".` – Mindwin Remember Monica Jan 03 '13 at 12:19
Also, when changing to a `c:forEach` or `` built-in iterator, tabs do not render. – Mindwin Remember Monica Jan 03 '13 at 12:27
actually, the id of the myIframe is just that, it seems that JSF does not prepend (or is not doing it in my particular case) IDs on vanilla HTML elements. Also, the suggestion to swap for ui:repeat won't work (and earned me a downvote by @BalusC for asking - my google fu failed) – Mindwin Remember Monica Jan 04 '13 at 13:45
Also, when there are lots of tabs, only the first tab has myIframe as the id. the other tabs have iframes with different ids. – Mindwin Remember Monica Jan 04 '13 at 13:51

score 0 · Answer 2 · answered Jan 03 '13 at 13:11

0

You can try putting the iframe inside an h:panelGroup or p:panel and update the panelGroup in order of the whole form.

As an alternative you can update the form maintaining the selected tab index in the backing bean, so the rerendering will not cause going to the first tab again.

However, as @Petr Mensik says, I recomend you to avoid any kind of jsp tags like c:if or c:forEach unless you are sure about what you are doing, cause this kind of tags are rendered before than other ones.

answered Jan 03 '13 at 13:11

Aritz

30,971
16
136
217

tried changing the jstl for a ui:repeat or p:tabview iterator, the tabs refused to render. dunno why. – Mindwin Remember Monica Jan 03 '13 at 13:16
the p:tabView iterator works (just move the params of the forEach into it: var and value/instead of items), but ui:repeat won't work at all, because it works on a different phase. check: http://stackoverflow.com/questions/14140821/case-study-uirepeat-vs-cforeach – Mindwin Remember Monica Jan 04 '13 at 13:46
I have also done some stuff with `p:tabView` iterator today. So answer is simply to use the built-in iterator of the component. – Aritz Jan 04 '13 at 18:26
And in this case it can be useful to you to have different forms, but for example I have some instances which have all the tabs in a single form, that's why it turns necessary to know about that. – Aritz Jan 04 '13 at 18:28
In my specific case, I could afford having one form per tab, but for some people this might not be possible. The built-in iterator of p:tabView worked, but it does not solve the issue of updating the iframe. Avoid the jslt tag? yes, but this is a benefical side-effect on the question. – Mindwin Remember Monica Jan 07 '13 at 11:02

Mindwin Remember Monica · Accepted Answer · 2013-01-04T13:48:43.377

This answer may be too related to my case in particular, but is the solution I came around to make it work as intended.

If someone can come with an answer that is more elegant, that one will be the accepted.
meanwhile...

Move the form tag into the <p:tab>, since the tabs do not need to mess with one another.

let the ajax update be @form, and it works.

<p:outputPanel rendered="#{dd.render()}">
<p:tabView dynamic="true">
    <c:forEach var="aba" items="#{dd.abas}">
        <p:tab title="#{aba.orelha}" >
            <h:form>
                <h2>
                    <h:outputText value="#{aba.titulo}" />
                    <p:selectOneMenu style="width:250px;  float:right;" value="#{aba.ln}" rendered="#{aba.selecaoAtiva}">
                        <f:selectItems value="#{aba.itens}" />
                         <p:ajax update="@form" event="change" />
                </p:selectOneMenu>
                </h2>
                <f:view>
                    <iframe src="very-Boring-And-Long-E.L.-Built-URL" width="#{dd.largura}" frameborder="0" height="#{dd.altura}" />
                </f:view>
            </h:form>
        </p:tab>
    </c:forEach>
</p:tabView>
</p:outputPanel>

Target Update of Iframe

3 Answers3