중첩 된 div 태그 안에 Jqplot 그래프가 표시되지 않습니다.

Question

탭보기가있는 JSF2.2 템플릿 클라이언트 xhtml 페이지에서 jqplot 혼합 막대 및 선 그래프를 테스트하고 있습니다. 그래프를 탭보기 안에 넣으면 표시되지 않습니다. 내가보기의 바깥에 놓으면 :

<div id="datanalytics"> 
<div class="w3-layout-container"> 
<div id="chart2"> </div> 
</div> 
</div> 

위의 내용은 그래프가 있어야하는 빈 영역으로 나옵니다. Chrome 또는 Firefox (Firebug)에서 JS 오류가 표시되지 않습니다. 나는이 같은 주요 사업부 외부 그래프를 넣어 경우, 그것은 완벽하게 보여줍니다 :

<div id="chart2"> </div> 
<div id="datanalytics"> 
<div class="w3-layout-container"> 
</div> 
</div> 

을 나는 XHTML 페이지 하단에 다음과 같은 JS를 포함하고있다 : 내 XHTML 템플릿 페이지에서

<script> 
$(document).ready(function() { 
    var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
    ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
    ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]]; 
    var line2 = [['Nickle', 28], ['Aluminum', 13], ['Xenon', 54], ['Silver', 47], 
    ['Sulfer', 16], ['Silicon', 14], ['Vanadium', 23]]; 

    var plot2 = $.jqplot('chart2', [line1, line2], { 
    series: [{renderer: $.jqplot.BarRenderer}, {xaxis: 'x2axis', yaxis: 'y2axis'}], 
    axesDefaults: { 
    tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
    tickOptions: { 
    angle: 30 
    } 
    }, 
    axes: { 
    xaxis: { 
    renderer: $.jqplot.CategoryAxisRenderer 
    }, 
    x2axis: { 
    renderer: $.jqplot.CategoryAxisRenderer 
    }, 
    yaxis: { 
    autoscale: true 
    }, 
    y2axis: { 
    autoscale: true 
    } 
    } 
    }); 

    }); 

    </script> 

나는 $를 사용하지 않는 경우

가

<h:outputScript name="js/jqplot/jqplot.canvasAxisTickRenderer.js"/> 
    <h:outputScript name="js/jqplot/jqplot.dateAxisRenderer.js"/> 
    <h:outputScript name="js/jqplot/chartExtender.js" /> 
    <h:outputScript name="js/jqplot/excanvas.js" /> 
    <h:outputScript name="js/jqplot/chartExtender.js" /> 
    <h:outputScript name="js/jqplot/jqplot.categoryAxisRenderer.js" /> 
    <h:outputScript name="js/jqplot/jqplot.barRenderer.js" /> 

문제가 해결 (DOCUME을 (스크립트가 페이지 로딩 후 실행하도록 body 태그의 끝에서) 내가 추가 한 다음 라이브러리를 NT) .ready (함수() 대신 사용 :

function processChartAsClick() { 

....... 
} 

나는 탭보기는 별도의 JQuery와 UI 이벤트 때문에 스크립트가 탭보기 내에서 해고되지 않기 때문에이 생각하지만 외부 퍼팅 탭이 달린보기는 문서가로드 될 때 이벤트를 시작합니까? 이 점에 대해 명확히 설명해 주시면 감사하겠습니다. 고맙습니다!

Answer 1

대답은 문서 준비 메소드가 페이지로드시 시작되므로 스크립트에 자체 (자율) 기능을 제공하는 것입니다. 즉, JS/Jquery 스크립트가 자체 JS UI 함수를 사용하는 div 안에 있으면 스크립트가 중첩 된 div JS 함수의 일부가 아닌 한 무시됩니다.

나는 버튼과 해당 기능을 추가하고 차트 지금 보여주고있다 :

<button type="button" class="button" onclick="showChart()">Show the chart </button> 

<script> 

function showChart() { 
JS code here 
....... 
} 
</script> 

이 그것이 JSF 응용 프로그램에서 중첩 된 div의 이벤트를 처리하는 방법에 대한 몇 가지 질문을 더 던져 차트를 렌더링하는 동안,하지만 그 별도로 게시해야합니다.