javascript xy图表在JSF primefaces中的页面加载时消失

Question

I have a xy chart with data plots that are numbers in a jsf primefaces page. You select the type of chart you want and the js creates a chart with the plotted points but when the JSF displays a datatable of the info being plotted the chart disappears. I have debugged the chart display and as long as the chart is being created the chart shows on the screen but as soon as the chart is finished it disappears which I think is when the dataable is being created. any ideas how to keep the chart on the screen? The chart is displayed in the "mycube" div element when the user clicks the submit botton using showCubeChart() js call.

    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://primefaces.org/ui"
            template="/template/_Decorator.xhtml">
<f:metadata>
    <f:viewAction action="#{eventListMatrixModel.onPageLoad}" />
</f:metadata>

<ui:define name="bodyContent">
    <h:outputStylesheet name="/cube.css" library="css"/>
    <h:outputScript library="js" name="CubeIt.js" />
    <h:outputScript library="js" name="bignumber.js" />
    <h:head>
        <script>
            var cubeConfig;
            var cubeConfigCache;
            function getCubeData(){

                // $cubeName = $("#form\\:cubeName").val();
                $cubeName= "#{eventListMatrixModel.getCubeConfigName()}"
                //$cubeType= "#//{eventListMatrixModel.getCubeConfigType()}"
                $cubeType=$("#form\\:cubeTypeSelectOne_label").text();
                $cubeType=$cubeType.substr(0,1)
                $projectId="#{eventListMatrixModel.getProjectIdToString()}";
                alert("ajax call"+$cubeName+"  CubeType="+$cubeType+"="+" PID="+$projectId);
                if ($cubeType==null || $cubeType=="") return;
                 alert('making ajax call');
                var infoHTML='';
                $.ajax({
                    url: '/pm2App/CubeServlet',
                    dataType: 'json',
                    data: {cubeName: $cubeName,cubeType:$cubeType,projectId:$projectId},
                    type: 'get',
                    cache: false,
                    success: function(response)
                    {
                        //  alert("success"+response);

                        cubeConfig=response;
                        makeCubeChart();
                        var infoHTML = '';
                        var name = response.name;
                    },
                    error: function(request, textStatus, errorThrown)
                    {
                        alert("error:" + textStatus);
                        cubeConfig=null;
                    },
                    complete: function(request, textStatus)
                    {
                        //   alert("complete1" + request.responseText);
                        //   alert("complete2" + textStatus);
                    }
                });
            }
            function showCubeChart() {
                //  alert('Simple Dialog displayed successfully');
                // use cacche cubeConfig
                //alert(cubeConfig);
              //  if (cubeConfig == null || cubeConfig == '') {
                    getCubeData();
               // } else {
                    //alert('test');
                    makeCubeChart();
               // }
            }
            function makeCubeChart()
            {
                //  if (! cubeConfigCache) {
                  alert(cubeConfig.CubeConfig.name);
                var xSize = cubeConfig.CubeConfig.xAxisCubeSize;
                var ySize = cubeConfig.CubeConfig.yAxisCubeSize;
                var midLowRange = cubeConfig.CubeConfig.midLowRange;
                var midHighRange = cubeConfig.CubeConfig.midHighRange;
                var reductionType = cubeConfig.CubeConfig.reductionType;
                var cubeType = cubeConfig.CubeConfig.cubeType;
                 alert("Call Back "+xSize+"_"+ySize);
                document.getElementById('mycube').innerHTML = createCubeTable(xSize, ySize);
                var yLabels = new Array(ySize);
                var yFactors = new Array(ySize);
                var yCubeValueIds = new Array(ySize);
                var yAxisNumbers = new Array(ySize);
                var xLabels = new Array(xSize);
                var xFactors = new Array(xSize);
                var xCubeValueIds = new Array(xSize);
                var xAxisNumbers = new Array(ySize);
                for (i = 0; ySize > i; i++) {
                    yCubeValueIds[i] = cubeConfig.YAxis[i].cubeValueId;
                    yAxisNumbers[i] = cubeConfig.YAxis[i].axisNumber;
                    yLabels[i] = cubeConfig.YAxis[i].axisLabel;
                    yFactors[i] = cubeConfig.YAxis[i].axisFactor;
                }
                for (i = 0; xSize > i; i++) {
                    xCubeValueIds[i] = cubeConfig.XAxis[i].cubeValueId;
                    xAxisNumbers[i] = cubeConfig.XAxis[i].axisNumber;
                    xLabels[i] = cubeConfig.XAxis[i].axisLabel;
                    xFactors[i] = cubeConfig.XAxis[i].axisFactor;
                }

                setCubeLabels(xSize, ySize, xLabels, yLabels);
                setCubeFactors(xSize, ySize, xFactors, yFactors);
                setCubeCalcs(xSize, ySize);
                showCubeZeroCounts(xSize,ySize,cubeType,midLowRange,midHighRange);
                i=0;
                while (cubeConfig.MatrixCount[i]){
                    pExposure=cubeConfig.MatrixCount[i].riskexposure;
                    pCount=cubeConfig.MatrixCount[i].count;
                    showCubeCount(xSize,ySize,pExposure,pCount)
    // ALERT HERE ON EACH DATAPOINT SLOWS DOWN THE DISPLAY SO YOU CAN SEE THE CHART BEING DRAWN
                    alert(cubeConfig.MatrixCount[i].riskexposure);

                    i=i+1;

                }

                setXAxisLegend(cubeConfig.CubeConfig.xAxisName);
                setYAxisLegend(cubeConfig.CubeConfig.yAxisName);
                cubeConfigCache=1;
            }
        </script>

    </h:head>

    <h:form id="form">
        <p:growl showDetail="true" />
        <p:panelGrid header="Event List" closable="true"  >
            <p:row>
                <p:column><h:outputText value="Cube Type: " /></p:column>
                <p:column>
                    <p:selectOneMenu id="cubeTypeSelectOne" value="#{eventListMatrixModel.cubeType}"  panelStyle="width:180px"
                                     effect="fade"  style="width:160px"  update="@form">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItems value="#{eventListMatrixModel.cubeTypes.entrySet()}" var="c" itemLabel="#{c.value}" itemValue="#{c.key}" />
                    </p:selectOneMenu>
                </p:column>
                <p:column>
                    <p:commandButton value="Submit" id="submitButton" update="@form:matrixPanelGrid" onclick="showCubeChart()"
                                     actionListener="#{eventListMatrixModel.buttonAction}" styleClass="ui-priority-primary" />
                </p:column>
            </p:row>

            <p:row>
            <p:column><div id="mycube"></div></p:column>
            </p:row>

            <p:row>
            <p:column colspan="5">

            <p:panelGrid id="matrixPanelGrid" >
                <p:row><p:column>
                <p:dataTable value="#{eventListMatrixModel.projectEvents}" var="projectEvent"
                             selection="#{eventListEditModel.selectedEvents}"
                             rowKey="#{projectEvent.eventProjectId}"
                             sortMode="multiple"
                             resizableColumns="true"
                             widgetVar="eventsTable">
                    <f:facet name="header">
                        Cube Matrix #{eventListMatrixModel.pageName} Management
                    </f:facet>

                    <p:column selectionMode="multiple" style="width:2%" />
                    <p:column headerText="ID" >
                        <h:outputText value="#{projectEvent.projectEventId}" />
                    </p:column>
                    <p:column headerText="Project ID">
                        <h:outputText value="#{projectEvent.eventProjectId}" />
                    </p:column>
                    <p:column headerText="Event ID" sortBy="#{projectEvent.eventId}">
                        <h:outputText value="#{projectEvent.eventId}" />
                    </p:column>
                    <p:column headerText="Event Date" sortBy="#{projectEvent.eventDate}">
                        <h:outputText value="#{projectEvent.eventDate}">
                        <f:convertDateTime pattern="MM/dd/yyyy" />
                        </h:outputText>
                    </p:column>
                    <p:column headerText="Type" sortBy="#{projectEvent.eventType}">
                        <h:outputText value="#{projectEvent.eventType}" />
                    </p:column>
                    <p:column headerText="Type Description" sortBy="#{eventListMatrixModel.getEventTypeDescription(projectEvent.eventType)}">
                        <h:outputText value="#{eventListMatrixModel.getEventTypeDescription(projectEvent.eventType)}" />
                    </p:column>
                    <p:column headerText="Title" sortBy="#{projectEvent.title}" filterMatchMode="contains" width="120">
                        <h:outputText value="#{projectEvent.title} " />
                    </p:column>
                    <p:column headerText="State">
                        <h:outputText value="#{eventListMatrixModel.getStateDescription(projectEvent.state)}" />
                    </p:column>
                    <p:column headerText="Status">
                        <h:outputText value="#{eventListMatrixModel.getStatusDescription(projectEvent.statusId)}" />
                    </p:column>
                    <p:column headerText="Workflow">
                        <h:outputText value="#{eventListMatrixModel.getWorkflowDescription(projectEvent.workflow)}" />
                    </p:column>

                    <p:column headerText="Edit" style="width:50px;">
                        <p:commandButton id="editButton" action="#{eventListMatrixModel.edit}" update="@form"  icon="ui-icon-pencil" title="Edit">
                            <f:setPropertyActionListener value="#{projectEvent}"  target="#{eventListMatrixModel.editProjectEvent}"   />
                        </p:commandButton>
                    </p:column>
                    <f:facet name="footer">
                        <p:commandButton value="Delete Events" actionListener="#{eventListMatrixModel.delete}"  update="@form"/>
                    </f:facet>
                </p:dataTable>
                </p:column></p:row>
            </p:panelGrid>
            </p:column>
            </p:row>

        </p:panelGrid>
        <script>
            //call after page loaded
            //cubeConfig=null;
           // window.onload=showCubeChart();
        </script>

    </h:form>
</ui:define>

Answer 1

The problem exists only in firefox and has to do with an uncaught out of memory error that displays in the console when an ajax call and a page submit occur at the same time. My solution was to change the ajax request to not execute during a form submittal. This is specific to my webapp. However, you can google search for "firefox out of memory javascript" to get some ideas on possible fixes.