jQuery next()/nextAll()/siblings() + dialog() Gotcha

Posted on June 16, 2012 at 10:31 PM in General, jQuery

So today I was writing up a simple little form hint with a jQuery UI dialog popup with more details on the hint. The code was actually quite simple:

  1. <!-- the relevant HTML -->
  2. <div class="fieldHint">
  3. <a href="##" class="tip-opener">View a full description</a>
  4. <div class="tip" title="Type Descriptions">{content}</div>
  5. </div>
  6. <!-- the relevant jQuery -->
  7. $( 'a.tip-opener').click(function(e){
  8. e.preventDefault();
  9. $(this).next().dialog( 'open' );
  10. });

Easy enough, right? Wrong. The dialog never opened. Time to debug. I tried each of the following as well, but they all returned 'undefined'.

  1. $(this).next( 'div.tip' ).dialog( 'open' );
  2. $(this).nextAll().dialog( 'open' );
  3. $(this).nextAll( 'div.tip' ).dialog( 'open' );
  4. $(this).siblings().dialog( 'open' );
  5. $(this).siblings( 'div.tip' ).dialog( 'open' );

Lots of searching and reading led me nowhere. Frustration was mounting. And then I had a thought:

Hmm. I wonder... maybe jQuery is ignoring the 'tip' div because it is currently hidden??

So I decided to slightly alter the code, resulting in the following:

  1. <!-- the relevant HTML -->
  2. <div class="fieldHint">
  3. <a href="##type-descriptions" class="tip-opener">View a full description</a>
  4. <div class="tip" id="type-descriptions" title="Type Descriptions">{content}</div>
  5. </div>
  6. <!-- the relevant jQuery -->
  7. $( 'a.tip-opener').click(function(e){
  8. e.preventDefault();
  9. $( $(this).attr( 'href' ) ).dialog( 'open' );
  10. });

Bingo! The dialog now opened as expected.

Hopefully this little post helps someone else, but I really I remember about it the next time I forget the lesson learned today. :-)

Comments
(Comment Moderation is enabled. Your comment will not appear until approved.)

On 6/18/12 at 3:46 PM, James Moberg said:

Try this:

$(this).next('div').dialog('open');
CodeBassRadio

Latest Articles

Eventually something really brilliant and witty will appear right here.

Calendar

September 2014
S M T W T F S
« Aug  
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        

Subscribe

Enter a valid email address.

The Obligatory Wish List