Jsf 2 使用primefaces命令按钮重新加载/更新JSF2.0自定义组件不起作用

提前感谢您的关注

我已经创建了一个JSF2.0自定义组件来呈现GoogleArts。因此，渲染器只是在最后编写一些javascript和一个div

组件可以很好地工作。但我的要求是，GeoArt应该使用ajax请求更改其值。为此，我使用了一个primefaces命令按钮，在其属性“update”中输入艺术的id

问题在于，单击“comand”按钮时，地图没有更新

我正在使用maven原型（myfaces-archetype-jsfcomponents20），允许自动生成一些配置文件。所以，我只需要编写类和注释。这些类是UIComponent和渲染器

我在GlassFish 3.1和Mojarra 2.1.6中运行此代码

这些类别的代码：

UIC组件：

@JSFComponent(
    name = "processum:geochart",
    clazz = "org.processum.component.gchart.GoogleChart",
    tagClass = "org.processum.component.gchart.GoogleChartTag")

abstract class AbstractGoogleChart extends UIComponentBase {

        public static final String COMPONENT_TYPE = "org.processum.GoogleChart";
        public static final String DEFAULT_RENDERER_TYPE = "org.processum.GoogleChartRenderer";
        public static final String COMPONENT_FAMILY = "javax.faces.Output";

    /**
    *
    * GoogleChartModel
    */
    @JSFProperty
    public abstract GoogleGeoChartModel getModel();        
}

渲染器：

@JSFRenderer(
    renderKitId = "HTML_BASIC",
    family = "javax.faces.Output",
    type = "org.processum.GoogleChartRenderer")
public class GoogleChartRenderer extends Renderer {

@Override
public void encodeEnd(FacesContext context, UIComponent component) throws IOException {
    GoogleChart chart = (GoogleChart) component;
    String divId = (String) component.getClientId() + "chartDiv";
    GoogleGeoChartModel model = chart.getModel();
    ResponseWriter writer = context.getResponseWriter();
    writer.write("<script type='text/javascript'>"
            + "google.load('visualization', '1', {'packages': ['geochart']});"
            + "google.setOnLoadCallback(initGeoMap);"
            + "function initGeoMap() {"
            + "var data = google.visualization.arrayToDataTable(["
            + "[");
    StringBuilder data = new StringBuilder();
    for (String header : model.getHeaders()) {
        data.append("\'").append(header).append("\'").append(",");
    }
    data.deleteCharAt(data.length() - 1).append("],");

    for (String[] value : model.getValues()) {
        data.append("[");
        for (int i = 0; i < value.length; i++) {
            if (i == 0) {
                data.append("\'").append(value[i]).append("\'");
            } else {
                data.append(value[i]);
            }
            data.append(",");
        }
        data.deleteCharAt(data.length() - 1).append("],");
    }
    data.deleteCharAt(data.length() - 1);
    writer.write(data.toString());
    writer.write("]);");
    writer.write("var options = {"
            + "region: 'CO',"
            + "displayMode: 'markers'"
            + "};"
            + "var chart = new google.visualization.GeoChart(document.getElementById(\'" + divId + "\'));"
            + "chart.draw(data, options);"
            + "};"
            + "</script>"
            + "<div id=\"" + divId + "\"/>");
}
}

@jsf渲染器(
renderKitId=“HTML\u BASIC”，
family=“javax.faces.Output”，
type=“org.processum.GoogleChartRenderer”）
公共类GoogleChartRenderer扩展了渲染器{
@凌驾
public void encodeEnd（FacesContext上下文，UIComponent）引发IOException{
谷歌图表=（谷歌图表）组件；
String divId=（String）component.getClientId（）+“chartDiv”；
GoogleModel=chart.getModel（）；
ResponseWriter=context.getResponseWriter（）；
作者：写（“）
+“google.load（'visualization'、'1'、{'packages'：['geochart']}）；”
+“google.setOnLoadCallback（initGeoMap）；”
+“函数initGeoMap（）{”
+“var data=google.visualization.arrayToDataTable（[”
+ "[");
StringBuilder数据=新的StringBuilder（）；
for（字符串头：model.getHeaders（））{
data.append（“\”）.append（header.append（“\”）.append（“，”）；
}
data.deleteCharAt（data.length（）-1）.追加（“]，”）；
对于（字符串[]值：model.getValues（））{
数据。追加（“[”）；
for（int i=0；i

XHTML：

<h:form>            
        <div id="anotherContent" style="width: 900px; height: 500px;">
            <h:panelGroup id="chartCont" layout="block">
                <processum:geochart id="chart" model="#{chartBackBean.model}"/>                   
            </h:panelGroup>
        </div>  
        <p:commandButton id="change" value="Cambio" actionListener="#{chartBackBean.change}" update="chart"/>            
    </h:form>

一些调试：

ajax请求被充分触发。托管bean用新值更新GoogleArtModel。 接下来，控制流转到渲染器，渲染器对图表的新值进行“编码”（这意味着再次调用encondend）。但是，浏览器中没有绘制这种新的“重唱”

---

html有两个JSF组件。我的自定义组件和一个h:panelGroup。如果在primefaces按钮的“update”属性中输入图表div的id，然后触发ajax请求，那么图表不会改变。但是我把h:panelGroup的id放进去，图表的div消失了

你能检查一下浏览器上是否有JavaScript问题吗？此外，您能否验证响应中是否发送了来自encodeEnd的内容？Hi@HarshaR。非常感谢您的关注。关于你的第一个问题，我想现在还不能搜索js问题，因为浏览器中没有出现应该是渲染器的“新js”（我使用的是Chrome的inspector）。关于你的第二个问题，我不知道如何验证新的js是否在响应中发送。Hi@Ephyras，我更多的是从以下角度进行讨论-web控制台（Firefox/Chrome）是否显示任何js错误？看起来自定义组件无法重新渲染自身。在发送更新之前，您可能需要卸载脚本，或者修改正在发送的脚本。