以编程方式在 JSF 2.2/PrimeFaces 5.1 中使用 AJAX 从 Google 图表更新图表

Question

。大家好！

我使用从 Java 方法检索的 JSON 数据对 geochart 进行了编码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

google.load('visualization', '1', {'packages':['corechart','geochart','table']}, {"callback" : drawMapStates});
google.setOnLoadCallback(drawMapStates);

function drawMapStates() {
    var dataStates = new google.visualization.DataTable();
    var scoreStates = #{managerialDashboardMB.scoreStatesJson};
    console.log(scoreStates);
    // etc
    geoChartStates = new google.visualization.GeoChart(document.getElementById('pnl-row-1-col-1-chart'));
    geoChartStates.draw(dataStates, options);
}

此页面中的每个组件都会相应地更新数据，因为 p:dataTable 会使用正确的值进行更新，但是 Java脚本内容保持不变 - 在更糟之前：它们曾经只是简单地消失了。

例如这个按钮：

<p:selectOneMenu id="states" disabled="#{empty managerialDashboardMB.states}" value="#{managerialDashboardMB.state.id}" styleClass="oneMenu client_#{managerialDashboardMB.clientId}" filter="true" filterMatchMode="contains">
    <f:selectItem itemValue="0" itemLabel="- Select -" />
    <f:selectItems value="#{managerialDashboardMB.getStatesByCountryId(1)}" var="state" itemLabel="#{state.name}" itemValue="#{state.id}" />
    <p:ajax event="change" listener="#{managerialDashboardMB.onChange('states')}" />
</p:selectOneMenu>

它的 Ajax 侦听器方法调用另一个名为 drawMaps:

statesScores = new ArrayList<>();
statesNames = new ArrayList<>();

if (state != null) {
    if (state.getId() == null) {
        statesNames.add("Acre");
        statesNames.add("Alagoas");
        statesNames.add("Amapá");
        // etc
    } else {
        State s1 = stateSB.findById(state.getId());
        statesNames.add(s1.getNome());
    }
}

if (statesNames != null && statesNames.isEmpty() == false) {
    statesNames.parallelStream().forEach((name) -> {
        State s2 = stateSB.findByName(name);
        if (e2 != null) {
            Number valueNumber = geoChartSB.fromResultByClientState("AVG", "integer_value", "state", CLIENT_ID, s2.getId());
            double valueDouble = valueNumber.doubleValue();
            int valueInt = valueNumber.intValue();
            int valueShort = valueNumber.shortValue();
            Number value = valueInt;
            if (value.doubleValue() > 0.0) {
                scoreStates.add(new StringNumber(name, value));
            }
        }
    });
}

Gson gson = new Gson();
scoreStatesJson = gson.toJson(statesScores);
MESSAGES.info(scoreStatesJson);
LOG.info(scoreStatesJson);

并且，在该方法执行后：

RequestContext rc = RequestContext.getCurrentInstance();
Collection<String> ids = new ArrayList<>();
ids.add(":table");
ids.add("cities");
ids.add(":formMessages:messages");
ids.add(":layoutCenter:pnlCenter"); // the charts are inside this div
rc.update(ids);
rc.execute("drawMapStates()");
rc.execute("resizeComponentsFrom('layoutCenter')");

JS 控制台始终显示初始数据。只有 WildFly 显示正确的 JSON.

试图在 document.ready 中构建图表，但页面根本无法加载。尝试不更新“：layoutCenter：pnlCenter”并且没有任何变化。

Answer 1

通过将 javascript 包围起来解决：

<div jsf:id="javascript"></div>

在组件中：

update=":table cidades :formMessages:messages :javascript" oncomplete="drawMapaEstados()"

必须删除使用 RequestContext 的行，但程序更新已丢失。

以编程方式在 JSF 2.2/PrimeFaces 5.1 中使用 AJAX 从 Google 图表更新图表

Update charts from Google Charts using AJAX in JSF 2.2/PrimeFaces 5.1, programatically

ajax

jsf

google-visualization