Displaying CSS images in div updated by Ajax

@Martin1Mar 12.2009

Hello

I wonder if anyone can help. An HTML div in a page of mine contains a tree control which is shown or hidden depending upon a button pressed by a user. The button triggers an Ajax event which sets a variable on the server to show or hide the tree so that the state is persisted.

But here’s the problem; when the tree is re-displayed, the icons for expanding / collapsing brances are not present. So far, I’ve not been able to work out why this is the case.

The tree’s HTML is built on the server as a list and each list item has a class reference to CSS as follows:

ul.tree li.liOpen .bullet {
background: url(myApp_Minus.png) center left no-repeat;
cursor: pointer;
}
ul.tree li.liClosed .bullet {
background: url(myApp_Plus.png) center left no-repeat;
cursor: pointer;
}
ul.tree li.liBullet .bullet {
background: url(myApp_Hyphen.png) center left no-repeat;
cursor: pointer;
}

Can anyone advise a method of showing the icons when the tree is re-displayed?

I’ve tried putting a link to the CSS file in the div, inline CSS elements and so on but without success.

Any help would be welcome.

to post a comment

CSS

10 Comments(s) _↴

@KDLAMar 12.2009 — #Have you checked the browser's rendering to see if the proper classes are being applied?

@Martin1authorMar 12.2009 — #In the tree I'm using, the icons are displayed correctly when the page loads or is manually refreshed.

The icons are only failing to reappear when the div containing the tree is updated via an Ajax call to the server.

The icons are defined inline in the CSS like this:

ul.tree li.liOpen .bullet {

background: url(myApp_Minus.png) center left no-repeat;

cursor: pointer;

}

ul.tree li.liClosed .bullet {

background: url(myApp_Plus.png) center left no-repeat;

cursor: pointer;

}

ul.tree li.liBullet .bullet {

background: url(myApp_Hyphen.png) center left no-repeat;

cursor: pointer;

}

So I believe that the browser rendering is correct and that the proper classes are being applied.

@KDLAMar 12.2009 — #Is the problem occurring only in IE? It could be a haslayout problem. Try adding:
ul.tree li .bullet {position: relative; display: block;}

@Martin1authorMar 12.2009 — #That's definitely something I will try later on today; but from what I recall of this problem, it was occurring in Firefox as well as IE so I would assume it will occur in Opera, Safari and the others

@KDLAMar 12.2009 — #Ah...

I've had that happen in IE, where the background comes and goes; and strange enough a manual refresh makes it appear.

If it's happening everywhere, I'd make sure to validate your coding. It could be that the Ajax call is missing something little, like an end quote for the class.

@Martin1authorMar 12.2009 — #I'm certain that the code returned by the Ajax is good because the tree's HTML is generated on the server by the same method.

But I will double check this. Thanks.

@Martin1authorMar 12.2009 — #I tried ul.tree li .bullet {position: relative; display: block;}

Umfortunately the problem is still there.

@KDLAMar 13.2009 — #Can you send a link to the page, or post the entire code (css/html/ajax) so that we can see the behavior?

@Martin1authorMar 13.2009 — #The Ajax code follows:

[CODE]<script language="Javascript">    function xmlhttpPost(strURL) {        var xmlHttpReq = false;        var self = this;        // Mozilla / Safari.        if (window.XMLHttpRequest) {            self.xmlHttpReq = new XMLHttpRequest();        }        // IE.        else if (window.ActiveXObject) {            self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");        }        self.xmlHttpReq.open('POST', strURL, true);        self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');        self.xmlHttpReq.onreadystatechange = function() {            if (self.xmlHttpReq.readyState == 4) {                updatePage(self.xmlHttpReq.responseText);                                                               }        }        self.xmlHttpReq.send(getQueryStr());    }    function getQueryStr() {        queryStr = "action=toggleTree";        return queryStr;    }    function updatePage(str) {                    if (str == "false") {           // Hide tree buttons and tree.           document.getElementById("tree").style.visibility = "hidden";           document.getElementById("expColTreeButtons").style.visibility = "hidden";        }        else {           // Show tree buttons.           document.getElementById("expColTreeButtons").style.visibility = "visible";           // Show tree.           document.getElementById("tree").style.visibility = "visible";           document.getElementById("tree").innerHTML = str;        }    }    function toggleTree() {        // Make call to server to toggle tree.        document.getElementById("tree").innerHTML = "<img src='/myDataSharer/images/myDataSharer_Wait.gif' alt='Growing tree' />"        xmlhttpPost("/myDataSharer/toggleTree");   }[/CODE]

The Ajax above is triggered from a form which has three buttons. The 'Show / hide' button sees to things; the other two of the buttons are also enclosed within a div but they are alright.

The HTML is a JSP called page_left.jsp included inside another JSP using <jsp:include page = "/includes/page/page_left.jsp" />:

[code=html]<form>                <input class = "treeButton" type="submit" value="Show / hide" onClick = "toggleTree(); return false;">                <div id = "expColTreeButtons">                    <input class = "treeButton" type="submit" value="Expand all" onClick = "expandTree('navTree'); return false;">                    <br />                    <input class = "treeButton" type="submit" value="Collapse all" onClick = "collapseTree('navTree'); return false;">                    <br />                </div>            </form>[/code]

But I've tried the page on its own and it still fails.

And the CSS is:

/* Tree. */

/* With thanks to http://www.javascripttoolbox.com/lib/mktree/. */

@media screen{

/* Turn off list "bullets". */

ul.tree li {list-style: none;}

/* Control how "spaced out" the tree is. */

ul.tree, ul.tree ul, ul.tree li {margin-left: 2px; padding: 2px;}

/* Provide space for our own "bullet" inside the LI. */

ul.tree li .bullet {padding-left: 15px;}

/* Show "bullets" in the links, depending on the class of the LI that the link is in. */

ul.tree li.liOpen .bullet {background-image: url("http://localhost:8084/myDataSharer/images/myDataSharer_Minus.png");}

ul.tree li.liClosed .bullet {background-image: url("http://localhost:8084/myDataSharer/images/myDataSharer_Plus.png");}

ul.tree li.liBullet .bullet {background-image: url("http://localhost:8084/myDataSharer/images/myDataSharer_Hyphen.png");}

/* Sublists are visible or not based on class of parent LI. */

ul.tree li.liOpen ul {display: block;}

ul.tree li.liClosed ul {display: none;}

/* Format menu items differently depending on what level of the tree they are in. */

ul.tree li {font-size: 10px;} /* Community. */

ul.tree li ul li {font-size: 10px;} /* Dataset. */

ul.tree li ul li ul li {font-size: 10px;} /* QAV. */

/* ul.tree li ul li ul li ul li {font-size: 8px;}

ul.tree li ul li ul li ul li ul li {font-size: 6px;} */

}

I should add that the tree is a Javascript control. If the JS is needed, can you let me know? I don't believe that the JS is at fault though, I see the problem as being that either the JS or the CSS isn't being reapplied correctly when the HTML div contining the tree is refreshed.

Any help would be welcome.

Hope this helps as I'm thoroughly confused by this.

@Martin1authorMar 13.2009 — #This problem has now been resolved; all I had to do was re-process the Javascript tree control after the div was updated from Ajax.

Thanks KDLA for your help.

Also in #CSS _↴

mouse over dropdown links menu align an image inside a div in the middle of the page vertically ?Div positioning / resolution problem

Success!

Help @Martin1 spread the word by sharing this article on Twitter...

Tweet This

Displaying CSS images in div updated by Ajax

10 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Displaying CSS images in div updated by Ajax

10 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #CSS _↴