2 Replies Latest reply on May 18, 2009 1:10 PM by Bas Couwenberg

    Javascript error HtmlExtendedDataTable

    Bas Couwenberg Newbie

      I have created a custom component which consists out of a HtmlExtendedDataTable in a HtmlModalPanel. The HtmlModalPanel is shown when a certain buton is pressed. The table has a footer with a Ok and Cancel button. The problem arises when I use a org.richfaces.component.html.HtmlColumn in the table (which I do need) and the Ok or Cancel button is pressed which hides the HtmlModalPanel. This action creates a javascript error in IE7: Illegal argument, line 23. When I use the Microsoft Script Editor it highlights the following line in extended-data-table.js: c[c.length-2].width-=(totalWidth-maxWidth). The error causes a suggestionbox on my page to not fire the suggestion action again. My component looks like this:

      // create extendeddatatable which holds the code list <rich:extendedDataTable>
       HtmlExtendedDataTable extendedDataTable = new HtmlExtendedDataTable();
       extendedDataTable.setValueExpression("value", ExpressionUtils.createValueExpression(context, ExpressionUtils
       .getExpressionName("#{extendedTableBean.getCodeTableDataModel('" + entityName + "')}", null),
       ExtendedTableDataModel.class));
       extendedDataTable.setValueExpression("selection", ExpressionUtils.createValueExpression(context, ExpressionUtils
       .getExpressionName("#{extendedTableBean.codeSelection}", null), Selection.class));
       extendedDataTable.setVar(CODE);
       extendedDataTable.setSelectionMode(EXTDATATABLE_SELECTIONMODE);
       extendedDataTable.setWidth(EXTDATATABLE_WIDTH);
       extendedDataTable.setHeight(EXTDATATABLE_HEIGHT);
       extendedDataTable.setId(id + "Table");
      
      // create code column for the extendeddatatable <rich:column>
       org.richfaces.component.html.HtmlColumn codeColumn = new org.richfaces.component.html.HtmlColumn();
       codeColumn.setId(id + "TableCode");
       codeColumn.setValueExpression("sortBy", ExpressionUtils.createValueExpression(context, ExpressionUtils
       .getExpressionName("#{code.code}", null), String.class));
       codeColumn.setValueExpression("filterBy", ExpressionUtils.createValueExpression(context, ExpressionUtils
       .getExpressionName("#{code.code}", null), String.class));
       codeColumn.setFilterEvent("onkeyup");
       codeColumn.setWidth(EXTDATATABLE_CODE_WIDTH);
       codeColumn.setLabel(EXTDATATABLE_CODE_LABEL);
       HtmlOutputText outputTextCode = new HtmlOutputText();
       outputTextCode.setValue(EXTDATATABLE_CODE_LABEL);
       codeColumn.getFacets().put("header", outputTextCode);
       HtmlOutputText outputCode = new HtmlOutputText();
       outputCode.setValueExpression("value", ExpressionUtils.createValueExpression(context, ExpressionUtils
       .getExpressionName("#{code.code}", null), String.class));
       codeColumn.getChildren().add(outputCode);
       extendedDataTable.getChildren().add(codeColumn);
      
      // create cancel and ok buttons <h:panelGroup>
       HtmlPanelGroup panelGroupButtons = new HtmlPanelGroup();
       HtmlCommandButton cancelButton = new HtmlCommandButton();
       cancelButton.setValue(CANCELBUTTON_TEXT);
       cancelButton.setStyle("float: right;");
       cancelButton.setOnclick("Richfaces.hideModalPanel('" + id + "ModalPanel');return false;");
       panelGroupButtons.getChildren().add(cancelButton);
       HtmlCommandButton confirmButton = new HtmlCommandButton();
       confirmButton.setValue(OKBUTTON_TEXT);
       confirmButton.setStyle("float: right;");
       confirmButton.setOnclick("Richfaces.hideModalPanel('" + id + "ModalPanel');" + id
       + "ConfirmSelection();return false;");
       panelGroupButtons.getChildren().add(confirmButton);
       extendedDataTable.getFacets().put("footer", panelGroupButtons);
      
      // create the form <a4j:form>
       AjaxForm form = new AjaxForm();
       form.getChildren().add(extendedDataTable);
      
       // create queue component to work around concurrent call to conversation errors <a4j:queue>
       HtmlQueue queue = new HtmlQueue();
       queue.setIgnoreDupResponses(true);
       queue.setRequestDelay(200);
       form.getChildren().add(queue);
      
       // create the function which invokes a method after the ok button is pressed <a4j:jsFunction>
       HtmlAjaxFunction ajaxFunction = new HtmlAjaxFunction();
       ajaxFunction.setId("a4jfunction");
       ajaxFunction.setReRender(inputCodeId + "," + outputDescriptionId);
       ajaxFunction.setName(id + "ConfirmSelection");
       ajaxFunction.setActionExpression(new ConfirmSelectionMethodExpression(this));
       form.getChildren().add(ajaxFunction);
      
       // create the actual popup modalpanel <rich:modalPanel>
       HtmlModalPanel modalPanel = new HtmlModalPanel();
       modalPanel.setId(id + "ModalPanel");
       modalPanel.setWidth(MODALPANEL_WIDTH);
       modalPanel.setHeight(MODALPANEL_HEIGHT);
      
       // create the title of the popup modalpanel <h:panelGroup> and <h:outputText>
       HtmlPanelGroup panelGroupName = new HtmlPanelGroup();
       HtmlOutputText outputName = new HtmlOutputText();
       String name = (String) getAttributes().get("name");
       outputName.setValue(name);
       panelGroupName.getChildren().add(outputName);
       modalPanel.getFacets().put("header", panelGroupName);
      
       modalPanel.getChildren().add(form);