[richfaces-issues] [JBoss JIRA] (RF-12057) IE 8 rich:toolTip client side toolTip has problems rendering upon ajax request

Brian Leathem (JIRA) jira-events at lists.jboss.org
Wed Mar 21 16:22:49 EDT 2012


     [ https://issues.jboss.org/browse/RF-12057?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Brian Leathem updated RF-12057:
-------------------------------

    Description: 
Rich:Tooltip in client mode does not refresh upon an ajax event specifically in IE 8. A large part of external clients utilize IE 8 unfortunately. The tool tip is working correctly in IE 9, chrome and FF 7+.

The tool tip is refreshed on next ajax request with "previous" ajax response. 

{code:title=TOOL TIP CODE:}
<rich:tooltip id="ttPriceBreakDown" styleClass="toolTip" for="totalPrice" mode="client">
    <table class="toolTipTable1" border="0" cellpadding="2" cellspacing="0">				          						
        <tr>
            <td><h:outputText id="lblBase1" value="Base" styleClass="fieldLabel" /></td>
            <td></td>
            <td><h:outputText id="basePrice1" value="#{pp_.baseRate.price.total}">
                <f:convertNumber type="currency" currencySymbol="$" maxFractionDigits="2" />
            </h:outputText></td>
        </tr>
        <a4j:repeat id="rptFactors1" value="#{pp_.factorInputs}" var="factor">
            <tr>
                <td><h:outputText id="factorDisplayName1" value="#{factor.displayName}" /></td>
                <td><h:outputText id="factorValue1" value="#{factor.value}" /></td>
                <td></td>
            </tr>
        </a4j:repeat>
        <a4j:repeat id="rptModifiers1" value="#{pp_.modifierPrices}" var="modifier">
            <tr>
                <ui:fragment rendered="#{modifier.isDiscount()}">
                    <td><h:outputText id="priceDisc" rendered="#{modifier.calculated}" value="#{modifier.displayName}" styleClass="fieldLabel" /></td>
                </ui:fragment>
                <ui:fragment rendered="#{modifier.isRider()}">
                    <td><h:outputText id="priceRider" rendered="#{modifier.calculated}" value="#{modifier.displayName}" styleClass="fieldLabel" /></td>
                </ui:fragment>
                <ui:fragment rendered="#{not modifier.isRiderOrDiscount()}">
                    <td><h:outputText id="priceOther" rendered="#{modifier.calculated}" value="#{modifier.modifierType.name}" styleClass="fieldLabel" /></td>
                </ui:fragment>
                <td><h:outputText id="minFlag1" value="#{m_.min}" rendered="#{modifier.calculated}, #{modifier.applied.minimum}" /> <h:outputText id="maxFlag1" value="#{m_.max}"
                    rendered="#{modifier.calculated}, #{modifier.applied.maximum}" /></td>
                <td><h:outputText id="modifierPriceTotal1" rendered="#{modifier.calculated}" value="#{modifier.price.total}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText></td>
            </tr>
        </a4j:repeat>

        <a4j:outputPanel>
            <tr>
                <td><h:outputText id="lblTotal" value="Total" styleClass="fieldLabel" /></td>
                <td></td>
                <td><h:outputText id="ttTotalPrice" value="#{pp_.price.total}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText></td>
            </tr>
        </a4j:outputPanel>

        <a4j:outputPanel>
            <tr>
                <td><h:outputText id="lblRated1" value="Rated" styleClass="fieldLabel" /></td>
                <td></td>
                <td><h:outputText id="ratedPrice1" value="#{pp_.lockable.target.ratedPrice.total}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText></td>
            </tr>
            <tr>
                <td><h:outputText id="lblCharged1" value="Charged" styleClass="fieldLabel" /></td>
                <td></td>
                <td><h:outputText id="chargedPrice1" value="#{pp_.price.total}">
                    <f:convertNumber type="currency" currencySymbol="$" />
                </h:outputText></td>
            </tr>
        </a4j:outputPanel>
    </table>
</rich:tooltip>
{code}

{code:title=AJAX REQUEST CODE, SELECTABLE CHECKBOX WHICH RE-RENDERS TOOLTIP}
<h:selectBooleanCheckbox value="#{pp_.selected}" rendered="#{pp_.hasCoverageAssigned()}" disabled="#{pp_.selectDisabled}" id="cbInsured">
    <a4j:ajax listener="#{pp_.selectionChanged}" execute="@this" render="#{renderIds},#{selectionChangeRenderIds}"/>
</h:selectBooleanCheckbox>
{code}

  was:
Rich:Tooltip in client mode does not refresh upon an ajax event specifically in IE 8. A large part of external clients utilize IE 8 unfortunately. The tool tip is working correctly in IE 9, chrome and FF 7+.

The tool tip is refreshed on next ajax request with "previous" ajax response. 

TOOL TIP CODE:
===============
<rich:tooltip id="ttPriceBreakDown" styleClass="toolTip" for="totalPrice" mode="client">
						<table class="toolTipTable1" border="0" cellpadding="2" cellspacing="0">				          						
							<tr>
								<td><h:outputText id="lblBase1" value="Base" styleClass="fieldLabel" /></td>
								<td></td>
								<td><h:outputText id="basePrice1" value="#{pp_.baseRate.price.total}">
									<f:convertNumber type="currency" currencySymbol="$" maxFractionDigits="2" />
								</h:outputText></td>
							</tr>
							<a4j:repeat id="rptFactors1" value="#{pp_.factorInputs}" var="factor">
								<tr>
									<td><h:outputText id="factorDisplayName1" value="#{factor.displayName}" /></td>
									<td><h:outputText id="factorValue1" value="#{factor.value}" /></td>
									<td></td>
								</tr>
							</a4j:repeat>
							<a4j:repeat id="rptModifiers1" value="#{pp_.modifierPrices}" var="modifier">
								<tr>
									<ui:fragment rendered="#{modifier.isDiscount()}">
										<td><h:outputText id="priceDisc" rendered="#{modifier.calculated}" value="#{modifier.displayName}" styleClass="fieldLabel" /></td>
									</ui:fragment>
									<ui:fragment rendered="#{modifier.isRider()}">
										<td><h:outputText id="priceRider" rendered="#{modifier.calculated}" value="#{modifier.displayName}" styleClass="fieldLabel" /></td>
									</ui:fragment>
									<ui:fragment rendered="#{not modifier.isRiderOrDiscount()}">
										<td><h:outputText id="priceOther" rendered="#{modifier.calculated}" value="#{modifier.modifierType.name}" styleClass="fieldLabel" /></td>
									</ui:fragment>
									<td><h:outputText id="minFlag1" value="#{m_.min}" rendered="#{modifier.calculated}, #{modifier.applied.minimum}" /> <h:outputText id="maxFlag1" value="#{m_.max}"
										rendered="#{modifier.calculated}, #{modifier.applied.maximum}" /></td>
									<td><h:outputText id="modifierPriceTotal1" rendered="#{modifier.calculated}" value="#{modifier.price.total}">
										<f:convertNumber type="currency" currencySymbol="$" />
									</h:outputText></td>
								</tr>
							</a4j:repeat>

							<a4j:outputPanel>
								<tr>
									<td><h:outputText id="lblTotal" value="Total" styleClass="fieldLabel" /></td>
									<td></td>
									<td><h:outputText id="ttTotalPrice" value="#{pp_.price.total}">
										<f:convertNumber type="currency" currencySymbol="$" />
									</h:outputText></td>
								</tr>
							</a4j:outputPanel>

							<a4j:outputPanel>
								<tr>
									<td><h:outputText id="lblRated1" value="Rated" styleClass="fieldLabel" /></td>
									<td></td>
									<td><h:outputText id="ratedPrice1" value="#{pp_.lockable.target.ratedPrice.total}">
										<f:convertNumber type="currency" currencySymbol="$" />
									</h:outputText></td>
								</tr>
								<tr>
									<td><h:outputText id="lblCharged1" value="Charged" styleClass="fieldLabel" /></td>
									<td></td>
									<td><h:outputText id="chargedPrice1" value="#{pp_.price.total}">
										<f:convertNumber type="currency" currencySymbol="$" />
									</h:outputText></td>
								</tr>
							</a4j:outputPanel>
						</table>
					</rich:tooltip>


AJAX REQUEST CODE, SELECTABLE CHECKBOX WHICH RE-RENDERS TOOLTIP
===============================================================
<h:selectBooleanCheckbox value="#{pp_.selected}"  rendered="#{pp_.hasCoverageAssigned()}"  disabled="#{pp_.selectDisabled}" id="cbInsured">
					<a4j:ajax listener="#{pp_.selectionChanged}" execute="@this" render="#{renderIds},#{selectionChangeRenderIds}" />
				</h:selectBooleanCheckbox>


    
> IE 8 rich:toolTip client side toolTip has problems rendering upon ajax request
> ------------------------------------------------------------------------------
>
>                 Key: RF-12057
>                 URL: https://issues.jboss.org/browse/RF-12057
>             Project: RichFaces
>          Issue Type: Bug
>      Security Level: Public(Everyone can see) 
>          Components: component-output
>    Affects Versions: 4.1.0.Final
>         Environment: Windows 7, IE 8
>            Reporter: Gurinder Randhawa
>             Fix For: 4.3-Tracking
>
>
> Rich:Tooltip in client mode does not refresh upon an ajax event specifically in IE 8. A large part of external clients utilize IE 8 unfortunately. The tool tip is working correctly in IE 9, chrome and FF 7+.
> The tool tip is refreshed on next ajax request with "previous" ajax response. 
> {code:title=TOOL TIP CODE:}
> <rich:tooltip id="ttPriceBreakDown" styleClass="toolTip" for="totalPrice" mode="client">
>     <table class="toolTipTable1" border="0" cellpadding="2" cellspacing="0">				          						
>         <tr>
>             <td><h:outputText id="lblBase1" value="Base" styleClass="fieldLabel" /></td>
>             <td></td>
>             <td><h:outputText id="basePrice1" value="#{pp_.baseRate.price.total}">
>                 <f:convertNumber type="currency" currencySymbol="$" maxFractionDigits="2" />
>             </h:outputText></td>
>         </tr>
>         <a4j:repeat id="rptFactors1" value="#{pp_.factorInputs}" var="factor">
>             <tr>
>                 <td><h:outputText id="factorDisplayName1" value="#{factor.displayName}" /></td>
>                 <td><h:outputText id="factorValue1" value="#{factor.value}" /></td>
>                 <td></td>
>             </tr>
>         </a4j:repeat>
>         <a4j:repeat id="rptModifiers1" value="#{pp_.modifierPrices}" var="modifier">
>             <tr>
>                 <ui:fragment rendered="#{modifier.isDiscount()}">
>                     <td><h:outputText id="priceDisc" rendered="#{modifier.calculated}" value="#{modifier.displayName}" styleClass="fieldLabel" /></td>
>                 </ui:fragment>
>                 <ui:fragment rendered="#{modifier.isRider()}">
>                     <td><h:outputText id="priceRider" rendered="#{modifier.calculated}" value="#{modifier.displayName}" styleClass="fieldLabel" /></td>
>                 </ui:fragment>
>                 <ui:fragment rendered="#{not modifier.isRiderOrDiscount()}">
>                     <td><h:outputText id="priceOther" rendered="#{modifier.calculated}" value="#{modifier.modifierType.name}" styleClass="fieldLabel" /></td>
>                 </ui:fragment>
>                 <td><h:outputText id="minFlag1" value="#{m_.min}" rendered="#{modifier.calculated}, #{modifier.applied.minimum}" /> <h:outputText id="maxFlag1" value="#{m_.max}"
>                     rendered="#{modifier.calculated}, #{modifier.applied.maximum}" /></td>
>                 <td><h:outputText id="modifierPriceTotal1" rendered="#{modifier.calculated}" value="#{modifier.price.total}">
>                     <f:convertNumber type="currency" currencySymbol="$" />
>                 </h:outputText></td>
>             </tr>
>         </a4j:repeat>
>         <a4j:outputPanel>
>             <tr>
>                 <td><h:outputText id="lblTotal" value="Total" styleClass="fieldLabel" /></td>
>                 <td></td>
>                 <td><h:outputText id="ttTotalPrice" value="#{pp_.price.total}">
>                     <f:convertNumber type="currency" currencySymbol="$" />
>                 </h:outputText></td>
>             </tr>
>         </a4j:outputPanel>
>         <a4j:outputPanel>
>             <tr>
>                 <td><h:outputText id="lblRated1" value="Rated" styleClass="fieldLabel" /></td>
>                 <td></td>
>                 <td><h:outputText id="ratedPrice1" value="#{pp_.lockable.target.ratedPrice.total}">
>                     <f:convertNumber type="currency" currencySymbol="$" />
>                 </h:outputText></td>
>             </tr>
>             <tr>
>                 <td><h:outputText id="lblCharged1" value="Charged" styleClass="fieldLabel" /></td>
>                 <td></td>
>                 <td><h:outputText id="chargedPrice1" value="#{pp_.price.total}">
>                     <f:convertNumber type="currency" currencySymbol="$" />
>                 </h:outputText></td>
>             </tr>
>         </a4j:outputPanel>
>     </table>
> </rich:tooltip>
> {code}
> {code:title=AJAX REQUEST CODE, SELECTABLE CHECKBOX WHICH RE-RENDERS TOOLTIP}
> <h:selectBooleanCheckbox value="#{pp_.selected}" rendered="#{pp_.hasCoverageAssigned()}" disabled="#{pp_.selectDisabled}" id="cbInsured">
>     <a4j:ajax listener="#{pp_.selectionChanged}" execute="@this" render="#{renderIds},#{selectionChangeRenderIds}"/>
> </h:selectBooleanCheckbox>
> {code}

--
This message is automatically generated by JIRA.
If you think it was sent incorrectly, please contact your JIRA administrators: https://issues.jboss.org/secure/ContactAdministrators!default.jspa
For more information on JIRA, see: http://www.atlassian.com/software/jira

        


More information about the richfaces-issues mailing list