djextListTextBox in IE8 not displaying close symbol

Question

I am using a <xe:djextListTextBox> to filter a view. In Firefox all works fine I can Select the filter values like Author + Date and it displays both separated in two boxes with an 'x' as close/delete symbol to remove it from the Filter list.

But if I try this in IE8 the 'x' symbol is not shown. The rest with onclick and selecting values works fine.

Looking at the Source code with the Developer tools I found out that the <span> element containing the 'x' in Firefox was missing in IE. I modified my code and removed all the <this.dojoAttributes> (see Code below) and I got the 'x' in IE 8 back but then the onclick full refresh was not working in both browsers anymore. The texbox disappears on Client Side but the view does not receive any refresh. Refreshing the site manual brings the box back, it seems that the onClick just hides the box on client side and does not delete the values from the input.

<xe:djextListTextBox id="filteredByValue" value="#{sessionScope.allDocsFilterColumnValue}">
    <xe:this.dojoAttributes>
        <xp:dojoAttribute name="enabledLinkStyle" value="font-weight:normal">
        </xp:dojoAttribute>
        <xp:dojoAttribute name="readOnly" value="false">
        </xp:dojoAttribute>
    </xe:this.dojoAttributes>
    <xp:eventHandler event="onclick" submit="true" refreshMode="complete">
        <xp:this.action>
            <xp:actionGroup>
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript://                                
                                        sessionScope.remove('allDocsFilterEnabled');
                                        sessionScope.remove('filterType');
                                        sessionScope.remove('allDocsFilterColumnValue');
                                        sessionScope.selectedTab = sessionScope.remove('filterOldSelectedTab');
                                        }]]></xp:this.script>
                </xp:executeScript>
                <xe:changeDynamicContentAction for="dynamicView">
                </xe:changeDynamicContentAction>
            </xp:actionGroup>
        </xp:this.action>
    </xp:eventHandler>
</xe:djextListTextBox>

With the code above the functionality works fine in both browsers but I need to get the'x' shown in IE8 because without it, my users will be confused.

Did I forgot a attribute? Or do I have to try adding the 'x' with some sort of CSS?

Michael Saiz Michael Saiz · Accepted Answer · 2013-06-10T12:03:02

ok.. i found the answer:

            <xp:eventHandler event="onchange" submit="true"
                refreshMode="complete">
                <xp:this.action>
                    <xp:actionGroup>
                        <xp:executeScript>
                            <xp:this.script><![CDATA[#{javascript://                                
                                sessionScope.remove('allDocsFilterEnabled');
                                sessionScope.remove('filterType');
                                sessionScope.remove('allDocsFilterColumnValue');
                                sessionScope.selectedTab = sessionScope.remove('filterOldSelectedTab');
                                }]]></xp:this.script>
                        </xp:executeScript>
                        <xe:changeDynamicContentAction
                            for="dynamicView">
                        </xe:changeDynamicContentAction>
                    </xp:actionGroup>
                </xp:this.action>
            </xp:eventHandler>

I changed the onClick to a onChange event and removed the dojo attributes.. now i have the 'x' in IE8 and Firefox and the funktion is still working in both browsers.

djextListTextBox in IE8 not displaying close symbol

1 Answers