QuackFuzed [ Ramblings of a Con..ColdFuzed Mind ]

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();
10. $(this).next().dialog( 'open' );
11. });

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' );
3. $(this).nextAll().dialog( 'open' );
4. $(this).nextAll( 'div.tip' ).dialog( 'open' );
6. $(this).siblings().dialog( 'open' );
7. $(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();
10. $( $(this).attr( 'href' ) ).dialog( 'open' );
11. });

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');

[Add Comment]