I am a lover of the Prototype Javascript framework, I must say. But today I found a rather irritating little tidbit that diverted my attention from "real" work. Thought I'd share it just in case it saves someone else a little hair pulling.
The Scenario: You have a button that, onClick, performs an Ajax.Updater call. For aesthetic reasons, you have a hidden div with a spinner gif in it that you unhide while the call is working, then when complete, you hide it again. A common practice, right?
Well, when I initially laid out my page I just put my css styles inline until I got them the way I wanted. Afterwards I moved the styles out to an external file. That's when I noticed that my "working" div was no longer showing during the ajax call. The call was taking place, the JS function that performed the call hadn't been touched, yet no spinner. Here's my Ajax call:
Manipulating the display setting more directly, NOW I get my spinner again. Sheesh, so what's the Element.show method doing, anyway? I dig through prototype.js and find that, while the 'hide' method is setting the element's display property to 'none', the 'show' method is simply setting the display property to ''; nothing, empty string. Which works fine as long as my style is defined inline, but moving to an external style sheet breaks it. I observed this behavior in both IE and Firefox, current versions, so I don't believe it's a browser compatibility issue.
method:'post',
onCreate:function(){
Element.hide('container1');
Element.show('working');},
onComplete:function(){
Element.hide('working');
Element.show('container1');
}
}
);
Having nothing else to try, I removed the style from my external file ( #working{display:none;} ) and put it back inline with my div tag (<div id="working" style="display:none;">...) and voila! I get my spinner again. Ah, one more thing to try...let me put the style back in the external sheet and then modify my onCreate callback function a little:
Element.hide('container1');
$('working').style.display = 'inline';}
The short quick answer is, you have three options for being able to properly show/hide elements using Prototype:
If you let Prototype do the hiding, it shows and hides just fine.
1. keep the display style inline for elements you want to show/hide';
2. move your style external, then use the more direct method of swapping display styles ($('mydiv').style.display = 'inline');
3. move your style external, omitting the 'display:none' item, and use Prototype itself to hide the element on page load, like so:
Element.observe(window,'load',function(){Element.hide('loginWorking');});
</script>
Thoughts?
You are not logged in, so your subscription status for this entry is unknown. You can login or register here.
Seems jQuery handles this with ease, not so Prototype. I ended up hiding the element "onload" which smells a bit to me, particularly if the .js file takes a little while to download and parse/execute etc for first time visitors.
These days I use inline css as I want the immediacy css provides, but your method #2 looks interesting. I must admit I never tried that.