Nested ListView problem in Firefox/Safari

I have a ListView in which I set the following: - the 'tr' of the ItemTemplate has an id set to 'credits<%#Eval("ID")%>' - the first column is an asp:Literal control named "literalTreeIcon".

In the OnItemDataBound event I am doing the following:

Literal treeIcon = e.Item.FindControl("literalTreeIcon") as Literal;

        if (treeIcon != null)
            treeIcon.Text = credits.Count() == 0
                                ? "<img src=\"../Images/treedot.gif\" alt=\"\" height=\"16\" width=\"16\" />"
                                : String.Format(
                                        "<img src=\"../Images/buttonplus.png\" alt=\"\" height=\"16\" width=\"16\" onclick=\"javascript:toggleGroup(this,'credits{0}');\" />",
                                    transaction.ID);

This checks if the 'credits' list has items in it. If it does it will change the icon to buttonplus.png and set the Text of the literal control to an 'img'. The onclick event of the 'img' is also set and this calls the following javascript function:

function toggleGroup(img, childName) {
        var src = img.src;
        var parentObject = document.getElementById(childName);

        if (parentObject == null) {
            if (src.endsWith('buttonplus.png')) {
                src = src.replace('buttonplus.png', 'treedot.gif');
            }
            else if (src.endsWith('buttonminus.png')) {
                src = src.replace('buttonminus.png', 'treedot.gif');
            }
        } else {
            var rowObject = parentObject.nextSibling;
            //  if the img src ends with plus, then we are expanding the rows.
            //  go ahead and remove the hidden class from the rows and update the image src
            if (src.endsWith('buttonplus.png')) {

                Sys.UI.DomElement.removeCssClass(rowObject, 'hidden');
                src = src.replace('buttonplus.png', 'buttonminus.png');
            }
            else if (src.endsWith('buttonminus.png')) {
                Sys.UI.DomElement.addCssClass(rowObject, 'hidden');
                src = src.replace('buttonminus.png', 'buttonplus.png');
            }
        }

        //  update the src with the new value
        img.src = src;
    }

The above opens/closes the Nested ListView and changes the icons as needed.

All of the above works in IE. But not in Firefox or Safari :(

If I open the ErrorConsole of FF I can see that there is an error with the message "Sys.ArgumentException: Value must be a DOM element. Parameter name: element.".

Does anyone have any idea on what's wrong here?

ansaurus

tags:

views:

answers:

Nested ListView problem in Firefox/Safari

related questions