modalPanel won't close on IE8

[benma]

Hello.

I'm using richfaces 3.3.3

The problem is that my modalPanel won't close when clicking on the X button in IE 8.

I'm doing the closing with rich:componentControl as done in the richfaces example.

What is to be done?

[ilya_shaikovsky]

please show complete page code. and check if there are any js Errors on the page,.

[benma]

The errors are:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET4.0C; .NET4.0E)

Timestamp: Wed, 17 Nov 2010 11:28:56 UTC

Message: Object doesn't support this property or method

Line: 223

Char: 380

Code: 0

URI: http://localhost:8080/tmss-web/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js.jsf

Message: Object doesn't support this property or method

Line: 5

Char: 246

Code: 0

URI: http://localhost:8080/tmss-web/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/script/controlUtils.js.jsf

Message: Object doesn't support this property or method

Line: 24

Char: 482

Code: 0

URI: http://localhost:8080/tmss-web/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js.jsf

Message: Object doesn't support this property or method

Line: 15

Char: 1

Code: 0

URI: http://localhost:8080/tmss-web/opportunityListView.jsf

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET4.0C; .NET4.0E)

Timestamp: Wed, 17 Nov 2010 11:28:56 UTC

Message: Object doesn't support this property or method

Line: 223

Char: 380

Code: 0

URI: http://localhost:8080/tmss-web/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js.jsf

Message: Object doesn't support this property or method

Line: 5

Char: 246

Code: 0

URI: http://localhost:8080/tmss-web/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/script/controlUtils.js.jsf

Message: Object doesn't support this property or method

Line: 24

Char: 482

Code: 0

URI: http://localhost:8080/tmss-web/a4j/g/3_3_3.Finalorg/richfaces/renderkit/html/scripts/jquery/jquery.js.jsf

Message: Object doesn't support this property or method

Line: 15

Char: 1

Code: 0

URI: http://localhost:8080/tmss-web/opportunityListView.jsf

and the code is:

<div 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:rich="http://richfaces.org/rich"

xmlns:a4j="http://richfaces.org/a4j">

<a4j:outputPanel ajaxRendered="true">

<a4j:form style="display:none" prependId="false">

<h:inputHidden id="hasMessages" value="#{airController.hasMessages}" />

</a4j:form>

</a4j:outputPanel>

<rich:modalPanel id="airlineModalPanel" width="400" height="250">

        <f:facet name="header">

            <h:panelGroup>

                <h:outputText value="#{msg.EDIT_AIRLINES}" />

            </h:panelGroup>

        </f:facet>

        <f:facet name="controls">

            <h:panelGroup>

                <h:graphicImage value="/includes/images/close.gif" styleClass="hidelink" id="hidelink"/>

                <rich:componentControl for="airlineModalPanel" attachTo="hidelink" operation="hide" event="onclick"/>

                <!-- a4j:form>

                <a4j:commandButton image="/includes/images/close.gif" oncomplete="Richfaces.hideModalPanel('airlineModalPanel');"

                ajaxSingle="true"/>

                </a4j:form-->

            </h:panelGroup>

        </f:facet>

        <a4j:form id="editForm">

        <h:panelGrid columns="1">

        <h:panelGrid columns="2">

        <h:outputText value="#{msg.AIRLINE_NAME}" />

        <h:inputText id="airlineName" value="#{airController.selectedAirline.name}" />

        <h:outputText value="#{msg.IATA_CODE}" />

        <h:inputText id="iataCode" value="#{airController.selectedAirline.iataCode}" />

        <h:outputText value="#{msg.ICAO_CODE}" />

        <h:inputText id="icaoCode" value="#{airController.selectedAirline.icaoCode}"  />

        <h:outputText value="#{msg.COMPANY_NAME}" />

        <h:inputText value="#{airController.selectedAirline.companyName}" />

        <h:outputText value="#{msg.COUNTRY}" />

        <h:selectOneMenu id="country"

value="#{airController.selectedAirline.country}"

converter="countryIdConverter" >

<f:selectItem itemDisabled="true" />

<f:selectItems value="#{globalSelectItems.countries}" />

</h:selectOneMenu>

        </h:panelGrid>

        <h:panelGroup>

        <a4j:commandButton id="save" value="#{msg.SAVE}"

reRender="airlinesForm,editForm" action="#{airController.saveAirline}"

oncomplete="if (document.getElementById('hasMessages').value=='false') Richfaces.hideModalPanel('airlineModalPanel');" />

<a4j:commandButton id="delete" value="#{msg.DELETE}"

reRender="airlinesForm" action="#{airController.deleteAirline}"

oncomplete="Richfaces.hideModalPanel('airlineModalPanel');" />

<a4j:commandButton id="cancel" value="#{msg.CANCEL}"

oncomplete="Richfaces.hideModalPanel('airlineModalPanel');"

ajaxSingle="true" />

</h:panelGroup>

<rich:messages styleClass="errorMessage"/>

</h:panelGrid>

</a4j:form>

   </rich:modalPanel>

</div>

[qaelbdj]

Why dont you try the following instead of rich:componentControl

<h:graphicImage value="/includes/images/close.gif" styleClass="hidelink" id="hidelink" onclick="Richfaces.hideModalPanel('airlineModalPanel')"/>

[benma]

Thanks, this works.

But isn't it the older method of doing it?

Weird that componentControl not working on IE8.

[ilya_shaikovsky]

It not works because of js errors. and those errors not related to component control funcitonality. works fine for me at demo environment.

The cause could be usage of some external js libraries (prototype, jquery or others which depends on them and conflicts with bundled ones..)

[benma]

Seems logical.

Thanks.

But after a quick check - i don't use any other libraries. Only jquery that came with richfaces...

[ilya_shaikovsky]

please copy <link>'s section from generated html to check.

If you will create simple war sample to run locally - would be great for investigation.

[benma]

The generated html source is:

<IMG id=hidelink class=hidelink src="http://localhost:8080/tmss-web/includes/images/close.gif">

<SCRIPT type=text/javascript>//<![CDATA[

Richfaces.componentControl.attachAvailable('#hidelink','onclick','#airlineModalPanel','hide')

//]]>

</SCRIPT>

<IMG id=hidelink class=hidelink src="http://localhost:8080/tmss-web/includes/images/close.gif">

<SCRIPT type=text/javascript>//<![CDATA[

Richfaces.componentControl.attachAvailable('#hidelink','onclick','#airlineModalPanel','hide')

//]]>

</SCRIPT>

To generate a war is a bit of a problem, because this page has access to a local oracle DB.

[benma]

So how about this problem?