如何強制渲染使用jQuery和jqPlot庫的JSF複合組件

我使用優秀的庫Primefaces，但不幸的是我不得不創建自己的組件來定製它。如何強制渲染使用jQuery和jqPlot庫的JSF複合組件

問題是組件顯示在第一個選項卡上，但不是第二個。

如何在加載標籤時強制顯示組件？

這裏的自定義組件WM：dateLineChart：

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:cc="http://java.sun.com/jsf/composite" 
    xmlns:h="http://java.sun.com/jsf/html"> 

<!-- INTERFACE --> 
<cc:interface> 
</cc:interface> 

<!-- IMPLEMENTATION --> 
<cc:implementation> 
    <h:panelGroup rendered="true"> 
     <div id="#{cc.id}" 
      style="height:208px;"/> 
     <script type="text/javascript" > 
      var chartId = '<h:outputText value="#{cc.id}"/>'; 
      dateLineChart(chartId); 

      function dateLineChart(id) { 
       $(document).ready(function(){ 
        jQuery.jqplot (id, [[3,7,9,1,4,6,8,2,5]], { 
         title: 'Plot With Options', 
         axesDefaults: { 
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
         }, 
         axes: { 
          xaxis: { 
           label: "X Axis", 
           pad: 0 
          }, 
          yaxis: { 
           label: "Y Axis" 
          } 
         } 
        }); 
       }); 
      } 
     </script> 
    </h:panelGroup> 
</cc:implementation> 
</html>

在這裏，在這裏我使用它：

<p:tabView id="tabView" dynamic="true" cache="true"> 

    <p:tab id="homeView"> 
     <wm:dateLineChart id="chartOnFirstTab" /> 
    </p:tab> 

    <p:tab id="otherView" > 
     <wm:dateLineChart id="chartOnSecondTab" /> 
    </p:tab> 

</p:tabView>

請多關照您的幫助。

來源

2012-05-26 momsse

爲確保您的圖形正確繪製，您需要在第一次顯示該圖形時調用適當圖形的replot()方法（例如，單擊包含選項卡的圖形）。

這是我如何做到這一點的jQuery UI標籤：

$('#tabs').bind('tabsshow', function(event, ui) { 
     if (ui.index === 1 && plot1._drawCount === 0) { 
     plot1.replot(); 
     } 
     else if (ui.index === 2 && plot2._drawCount === 0) { 
     plot2.replot(); 
     } 
    });

The above code is presented here.的代碼示例是採取from this answer。如果您需要查找圖表的選項卡，那麼我在那裏使用的方法可能與您有關。

來源

2012-05-29 11:25:31 Boro

謝謝你，你的解決方案完美的作品，這個想法是切換標籤時發動重繪。由於我使用Primefaces，所以我會發佈一個適合的解決方案。 – momsse

適用於Primefaces的解決方案。希望它可以服務他人。

<p:tabView id="tabView" dynamic="true" cache="true" onTabShow="refreshDateLineChart()" > 
    //... 
</p:tabView>

的JS使用：

/** 
    * The date line chart reference. 
    */ 
var DATE_LINE_CHART; 

/** 
    * Draw the date line chart. 
    * @param id : the div id 
    */ 
function dateLineChart(id) { 
    $(document).ready(function(){ 
     DATE_LINE_CHART = jQuery.jqplot (id, [[3,7,9,1,4,6,8,2,5]]); 
    }); 
} 

/** 
    * Refresh the date line chart. 
    */ 
function refreshDateLineChart() { 
    if (DATE_LINE_CHART != null && DATE_LINE_CHART._drawCount === 0) { 
     DATE_LINE_CHART.replot(); 
    } 
}

來源

2012-06-02 22:40:43 momsse

如何強制渲染使用jQuery和jqPlot庫的JSF複合組件

回答

相關問題