When I add a URL to a list, and then using ajax, I

2019-07-04 02:02发布

问题:

I am working on building a dashboard, and its gadgets are some links to different pages that I want to show inside iframes. I have a button to add a new gadget to the dashboard, and after adding a new one, I refresh the dashboard. For the 3 first gadgets, there is no problem in the application, and it works perfectly. However, when I want to add the 4th gadget, the ajax call is not working and the page starts to reload again. After reloading the page, I can add a new gadget again and it works, but the next time it stops working again, and it refreshes the page. I cannot understand what the problem is. BTW, when I remove iframes and I print the links themselves, the program works without any problem. Here is my code :

<h:panelGrid columns="2" >
    <p:outputLabel value="${msg.dashboard_dashboard}" />
    <p:selectOneMenu value="#{dashboardDashletsManager.dashboard}" style="min-width: 200px" converter="#{dashboardConverter}" filter="true" filterMatchMode="contains" >
          <f:selectItems value="#{dashboardDashletsManager.dashboards}" var="item" itemLabel="#{item.description}" itemValue="#{item.value}" />
          <p:ajax update=":form" />
    </p:selectOneMenu>

    <p:outputLabel for="dashlet" value="${msg.dashboard_dashlet}" />
    <p:selectOneMenu id="dashlet"  value="#{dashboardDashletsManager.globalDashletToAdd}" style="min-width: 200px" converter="#{serviceProviderConverter}"  filter="true" filterMatchMode="contains">
          <f:selectItems value="#{dashletsController.globalDashlets}" var="provider" itemLabel="#{provider.description}" itemValue="#{provider}" />
    </p:selectOneMenu>

     <p:commandButton value="${msg.dashboard_add}" icon="ui-icon-plus" ajax="true" update=":form:dashboardPanel" process="dashlet @this"  actionListener="#{dashboardDashletsManager.addToDashboard}" />
</h:panelGrid>

 <p:outputPanel id="dashboardPanel">
        <ui:repeat value="#{dashboardDashletsManager.dashlets}" var="dashlet">
            <object width="400" height="400" type="text/html" data="#{dashlet.restUrl}"></object>
        </ui:repeat>
 </p:outputPanel>

回答1:

Probably a problem of the content you want to embed in the 4th dashlet taking too much time to load. Apart from that, in your example you update the whole form (don't know if you intend to do so), so JSF renders the whole of it again and also the browser has to recover the content for the first three dashlets plus the 4th one.

Anyway, this small test case works properly for me with Mojarra JSF 2.2.7 and Primefaces 5:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head />
<h:body>

    <h:form>
        <p:commandButton value="Add dashlet"
            action="#{dashboardManager.addDashlet}" update=":dashboardPanel" />
    </h:form>

    <p:outputPanel id="dashboardPanel">
        <ui:repeat value="#{dashboardManager.dashlets}" var="dashlet">
            <object width="400" height="400" type="text/html"
                data="#{dashlet.restUrl}"></object>
        </ui:repeat>
    </p:outputPanel>
</h:body>
</html>
@ManagedBean
@ViewScoped
public class DashboardManager {

    private static final String url = "http://www.w3schools.com";

    public class Dashlet {
        private String restUrl;

        public Dashlet(String url) {
            restUrl = url;
        }

        public String getRestUrl() {
            return restUrl;
        }

    }

    public DashboardManager() {
        dashlets.add(new Dashlet(url));
        dashlets.add(new Dashlet(url));
    }

    public List<Dashlet> dashlets = new ArrayList<Dashlet>();

    public List<Dashlet> getDashlets() {
        return dashlets;
    }

    public void addDashlet() {
        dashlets.add(new Dashlet(url));
    }

}

Here you can see there's no problem rendering a set of dynamic object tags into your board.