NO MORE CAREER
POLITICIANS!
Get Out Of Our House: Replacing congress with TRUE citizens!
Contact Doug!
Learn About Doug!
View Doug Boude's online resume
updated 11/18/2009

View Doug Boude's profile on LinkedIn
Link to me!

Follow Doug Boude on Twitter
Follow me!

Be Doug's friend on Facebook
Befriend me!
(I promise not to follow you home)
OO Lexicon
Chat with Doug!
Recent Entries
You may also be interested in...
Web Hosting

best web hosting - top web hosting sites, thetop10bestwebhosting.com

Czech your Page Rank!
Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service
Surf's Up!
Visit Egosurf.org and massage YOUR web ego!
My Score: 9,001
Doug's Books

Read (and recommend)

  • Men are from Mars, Women are from Venus
  • The Wisdom of Crowds: Why the Many Are Smarter Than the Few and How Collective Wisdom Shapes Business, Economies, Societies and Nations
  • Blink: The Power of Thinking Without Thinking
  • Head First Design Patterns
  • Transact-SQL Programming
  • What's So Amazing About Grace?
  • Just So Stories (Rudyard Kipling collection)

Reading

  • Prayer: Does it Make Any Difference?
  • Data Mining (Practical Machine Learning Tools and Techniques)
<< February, 2009 >>
SMTWTFS
1234567
891011121314
15161718192021
22232425262728
Search Blog

Recent Comments
Re: Railo 3.1 on Windows Server 2008 and IIS7 - Part 3 of 3 (by Jon at 8/27 2:04 PM)
Re: Hosts File Changes Not Acknowledged on Vista 64 (by Spacy at 8/24 3:46 PM)
Re: THE DAY CFUNITED DIED (by ComboFusion at 8/23 10:50 AM)
Re: My Grandpa (by Tasha at 8/10 4:29 PM)
Re: Just What IS a 'Service Layer', Anyway? (by dougboude at 8/02 10:10 AM)
Re: Just What IS a 'Service Layer', Anyway? (by Isaac at 8/02 2:25 AM)
Re: PayPal IPN Coldfusion CFC (by Soyestudiambre at 7/25 6:12 PM)
Re: PHP vs COLDFUSION (by Tony Garcia at 7/17 11:24 AM)
Re: PHP vs COLDFUSION (by dougboude at 7/14 8:45 AM)
Re: PHP vs COLDFUSION (by Lola LB at 7/14 5:51 AM)
Categories
Archives
Photo Albums
Funnies (5)
Family (3)
RSS

Powered by
BlogCFM v1.11

10 December 2008
Element.show/hide anomoly in Prototype

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?

<div id="working" style="display:none;"><img src="images/spinner.gif" /></div>

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:

new Ajax.Updater('targetDiv','index.cfm?param1=bla),{
 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:

onCreate:function(){
Element.hide('container1');
$('working').style.display = 'inline';}

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.

 

The short quick answer is, you have three options for being able to properly show/hide elements using Prototype:


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:

<script>
 Element.observe(window,'load',function(){Element.hide('loginWorking');});
</script>

If you let Prototype do the hiding, it shows and hides just fine.

 

Thoughts?




Posted by dougboude at 2:49 PM | PRINT THIS POST! |Link | 1 comment
Subscription Options

You are not logged in, so your subscription status for this entry is unknown. You can login or register here.

Re: Element.show/hide anomoly in Prototype
Hmm I had this a little while ago (http://www.chapter31.com/2008/03/10/showing-and-hiding-elements-with-css-and-javascript/).

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.
Posted by Michael Sharman on December 11, 2008 at 3:10 PM

Name:   Required
Email:   Required your email address will not be publicly displayed.

Want to receive notifications when new comments are added? Login/Register for an account.

Time to take the Turing Test!!!

16 plus 16 equals
Type in the answer to the question you see above:

Your comment:

Sorry, no HTML allowed!