How to show() an id block

Question

I have this jquery code that will not reveal a content block that starts our as display: none

$(document).ready(function() {
  $(window).load(function() {

    $('#anId').hide(); // show section
    $('#anId').show(); // show section
    $('#anId').hide().show(); // show section
    $('#anId').css('display', 'block'); // show section

  }); // end .load()
}); // end .ready()

Any ideas of suggestions as to why?

Here's the markup:

<fieldset class="formField__marginTop formField__area" id="anId" style="display: none;">
<legend>Reservation Notes</legend>
<div class="formField__optional">
<label for="reservationNote">Optional Notes</label>
<textarea name="reservationNote" id="reservationNote" rows="5" cols="21" class="formField__text formField__textarea255" enabled="enabled" maxlength="255"></textarea>
<small class="formField__tip">Enter any additional and pertinent information relating to this reservation.</small>
</div>
<div class="formField__optional">
<label>Note Type</label>
<fieldset class="formField__list formField__inlineButtons" enabled="enabled">
<label for="reservationNoteType_746440">
<input type="radio" value="0" name="reservationNoteType" id="reservationNoteType_746440" class="formField__list" checked="checked"> Private (Internal Use Only)
</label>
<label for="reservationNoteType_445052">
<input type="radio" value="1" name="reservationNoteType" id="reservationNoteType_445052" class="formField__list"> Public (Customer Viewable)
</label>
</fieldset>
<small class="formField__tip">Choose whether this note is for internal or external use.</small>
</div>
</fieldset>

Yes, it will; proof: http://jsbin.com/silepazi/1. (Side note: There's no reason to wrap a `load` handler in a `ready` handler. And there's rarely any need for *either*; just put the script at the end.) — T.J. Crowder, Apr 23 '14 at 15:21
why have you put a `window.load` handler inside your `document.ready` handler? — Alnitak, Apr 23 '14 at 15:21
what are you trying to do? it works even without the last .css(..block..) statement cause .show() puts the element to display:block; or static have a look here: http://jsfiddle.net/GGQ39/ — caramba, Apr 23 '14 at 15:21
@H.Ferrence Looks like the selector is wrong, it should be `#myId` — Anton, Apr 23 '14 at 15:27
because of this suggestion @Alnitak --http://stackoverflow.com/questions/3008696/after-all-document-ready-have-run-is-there-and-event-for-that — H. Ferrence, Apr 23 '14 at 15:27
@H.Ferrence Don't put a window load handler in a document ready handler. — Jason P, Apr 23 '14 at 15:30
can you comment on why it was suggested at http://stackoverflow.com/questions/3008696/after-all-document-ready-have-run-is-there-and-event-for-that @JasonP? just so I understand...thanks — H. Ferrence, Apr 23 '14 at 15:31
@H.Ferrence that didn't suggest wrapping one inside the other, it suggested doing them one _after_ the other. — Alnitak, Apr 23 '14 at 15:32
@Alnitak The second answer does suggest nesting them. Just saw that. — Jason P, Apr 23 '14 at 15:33
but look at [at]Ian's answer -- the one with 16 up-votes. I was following it to get some of my code to work. — H. Ferrence, Apr 23 '14 at 15:34
@H.Ferrence That seems to be a way to execute some code only after all document ready handlers have completed. I don't think that's relevant for your issue. — Jason P, Apr 23 '14 at 15:34
@H.Ferrence your code appears valid, and others have apparently tried it out successfully. Check your JS console for errors. — Alnitak, Apr 23 '14 at 15:35
i did that already and nothing appears in the console viewport. that is what is so frustrating about this issue. — H. Ferrence, Apr 23 '14 at 15:39

Jeffery ThaGintoki · Accepted Answer · 2014-04-23T15:35:04.203

1

use only one of this handlers $(document).ready() or $(window).load and your script should work fine.

note that the $(window).ready run before the $(document).load().

edited Apr 23 '14 at 15:35

answered Apr 23 '14 at 15:22

Jeffery ThaGintoki

447
5
19

ok, I will try it @JefferyThaGintoki -- I use it because of what I found at http://stackoverflow.com/questions/3008696/after-all-document-ready-have-run-is-there-and-event-for-that – H. Ferrence Apr 23 '14 at 15:29
@JasonP sorry dude i was wrong yep the `ready` statment run after the page loads while the `load` statement run when all the page contents loads. – Jeffery ThaGintoki Apr 23 '14 at 15:34

edcs · Answer 2 · 2014-04-23T15:45:30.060

Your problem is that you've placed a window.load event inside a document.ready event. window.load should happen after document.ready so it will never fire. document.ready is better for this kind of effect because it fires when the DOM is ready for action.

Remove the $(window).load(function() { part and corresponding }); and your code should work.

Edit:

The window.load event will fire when the window object has finished loading. You can actually attach a load() event to anything, so you can fire it when an image has finished loading or similar. Further details are available here:

https://api.jquery.com/load-event/

The document.ready event will fire when the DOM is fully loaded - this is generally the point when the page is ready to accept manipulation by JavaScript. As @Jason P pointed out, this is in fact before window.load because that event fires when everything in the page has finished loading. There are more details here:

http://api.jquery.com/ready/

A practical example would be a simple page with a really big image in it which takes a few seconds to load. The document.ready event will fire when the DOM has been constructed by the browser, but the window.load function will only fire after the image has loaded so this could be a few seconds after the page has been displayed.

I did it becuase of what I found T http://stackoverflow.com/questions/3008696/after-all-document-ready-have-run-is-there-and-event-for-that @edcs — H. Ferrence, Apr 23 '14 at 15:29
Just realised that - I remember having a problem before where I needed to use window.load instead of document.ready because I needed to know the size of an image. Sorry! — edcs, Apr 23 '14 at 15:32
I'm not an advanced client-side scripter so I am following others suggestions to get my stuff too work. I am confused as to why it works... — H. Ferrence, Apr 23 '14 at 15:35

How to show() an id block

2 Answers2