Find jobs - Debt Consolidation - Debt Consolidation - Submit articles - Debt Consolidation
PDA

View Full Version : Newbie: div color show/hide help!!!

gerry@outofchaos.com
Mar 13th 2008, 1:54 pm
Hi all - This is my first post here. Any help on this issue that has been puzzling me for hours would be greatly appreciated!!

Please see the very short attached HTML/Javascript code. This code just represents the concept behind what I'm doing, but it works to represent my real-life issue. In real life I'm revealing a particular div message in the browser after a Javascript event, then I'm doing a long process, then after the process I'm showing a different message. I've represented that long interim process here using a loop.

The problem is that the first message in red never shows. If I do an alert box immediately after the red box specification then it does show, indicating that the display change only flushes out to the browser if Javascript has something else to output.

Any tips on how I can circumvent this issue and get the first red box to show?

Many thanks!
rkquest
Mar 13th 2008, 3:46 pm
Use setTimeout..


<html>
<head>
<script type="text/javascript">
function changeDiv() {
// Show red box
changeBackground("#ff0000");
// Show blue box
setTimeout("changeBackground('#0000ff')", 3000);
return false;
}
function changeBackground(color) {
document.getElementById("mymessagediv").style.backgroundColor = color;
}
</script>
</head>
<body>
<div id="mymessagediv" style="display: block; width: 322px; height: 28px; background-color: rgb(0, 0, 255);">Initial Text</div>
<p><a href="#" onclick="return changeDiv();">ClickMe</a></p>
</body>
</html>


Hope that helps.
gerry@outofchaos.com
Mar 13th 2008, 5:52 pm
Thanks rkquest. So in my case, I'm applying this in an Ajax app that goes like this:
1) User clicks submit on a login form.
2) I display a "Attempting Login..." message. (Red in my example)
3) I kick off the Ajax task to log the user in.
4) When the Ajax call returns, I display an error message if an error occurs (blue in my example - yes I know the color scheme is backward), or when the login was a success, allow the form submission to continue to its inherent action page.

Based on this, a timer between #1 and #2 is a sticky proposition, as I will need to cancel the form submission at that time, until after receiving the thumbs up or down on the login, then resubmit the form programmatically if necessary, trying not to get into an endless loop.

Do you have any pointers or methodologies you could recommend to accomplish this?

Thanks!!
rkquest
Mar 13th 2008, 6:05 pm
If that is the case then I don't think you need a timer. All you need to do is execute a script (in your example the changing of div color to red) when an xmlHttpResponse has been received. Your action can be dependent on the response.
gerry@outofchaos.com
Mar 15th 2008, 8:16 am
Maybe I'm missing something there...as I don't see how the initial "Attempting Login..." message would be displayed.

In any case, I worked it out with the timer, thanks in part to your example code.

Thanks!