selecting div's with dynamic id's

[Kris-37]

Whats the best way to provide functionality (eg. toggle an 'additional
information' div) when dealing with records with unique id's.

For example lets say we are dealing with product records each one has
a unique id which is a number, so the HTML might look something like
this:

<div class="products">
  <div class="product" id="product_1">
    <p>Name: Red Widget</p>
    <p>Price: 22.00</p>
    <p><a href="">Show description</a></p>
    <p id="description_1" style="display:none;">sadasdasdasdasd</p>
  </div>

  <div class="product" id="product_2">
    <p>Name: Blue Widget</p>
    <p>Price: 24.00</p>
    <p><a href="">Show description</a></p>
    <p id="description_2" style="display:none;">sadasdasdasdasd</p>
  </div>

etc. etc.
</div>

I want to place unobtrusive jquery that will allow the 'show
description' link to display the correct description div...

Many thanks, K.

[Diego A.]

Hi Kris,

The best way is to not use an ID, or to use a class.

Based on the HTML you posted, you could just use this:
$(this).parent().next().show().end().remove();
... which will show the description and remove the "show description" link

EXAMPLE:
<div class="products">
 <div class="product" id="product_1">
   <p>Name: Red Widget</p>
   <p>Price: 22.00</p>
   <p><a href="javascript:;" onclick="$(this).parent().next().show().end().remove();">Show description</a></p>
   <p id="description_1" style="display:none;">sadasdas
dasdasd</p>
 </div>

Cheers,
Diego A.

2008/7/4 Kris <kris.leech@...>:

Whats the best way to provide functionality (eg. toggle an 'additional
information' div) when dealing with records with unique id's.

For example lets say we are dealing with product records each one has
a unique id which is a number, so the HTML might look something like
this:

<div class="products">
 <div class="product" id="product_1">
   <p>Name: Red Widget</p>
   <p>Price: 22.00</p>
   <p><a href="">Show description</a></p>
   <p id="description_1" style="display:none;">sadasdasdasdasd</p>
 </div>

 <div class="product" id="product_2">
   <p>Name: Blue Widget</p>
   <p>Price: 24.00</p>
   <p><a href="">Show description</a></p>
   <p id="description_2" style="display:none;">sadasdasdasdasd</p>
 </div>

etc. etc.
</div>

I want to place unobtrusive jquery that will allow the 'show
description' link to display the correct description div...

Many thanks, K.

--
Cheers,
Diego A.

[Karl Swedberg-2]

Hi Kris,

I'd give the "show description" links a common class -- for example,  
"show-description"  That way you can use a basic selector to apply to  
all of those links.

Then, I'd use the "this" keyword to find the appropriate description  
relative to the clicked link.

Adding "return false" will prevent the link's default event from being  
triggered.

So, given your markup, it might look like this:

$('a.show-description').click(functino() {
        $(this).parent().next().show();
        return false;
});


--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 4, 2008, at 10:36 AM, Kris wrote:

>
> Whats the best way to provide functionality (eg. toggle an 'additional
> information' div) when dealing with records with unique id's.
>
> For example lets say we are dealing with product records each one has
> a unique id which is a number, so the HTML might look something like
> this:
>
> <div class="products">
>  <div class="product" id="product_1">
>    <p>Name: Red Widget</p>
>    <p>Price: 22.00</p>
>    <p><a href="">Show description</a></p>
>    <p id="description_1" style="display:none;">sadasdasdasdasd</p>
>  </div>
>
>  <div class="product" id="product_2">
>    <p>Name: Blue Widget</p>
>    <p>Price: 24.00</p>
>    <p><a href="">Show description</a></p>
>    <p id="description_2" style="display:none;">sadasdasdasdasd</p>
>  </div>
>
> etc. etc.
> </div>
>
> I want to place unobtrusive jquery that will allow the 'show
> description' link to display the correct description div...
>
> Many thanks, K.
>
>

[Diego A.]

Hi Karl,

Of course, you're right. Javascript should be kept separate from the HTML.

Cheers,
Diego A.

2008/7/4 Karl Swedberg <karl@...>:

Hi Kris,

I'd give the "show description" links a common class -- for example, "show-description"  That way you can use a basic selector to apply to all of those links.

Then, I'd use the "this" keyword to find the appropriate description relative to the clicked link.

Adding "return false" will prevent the link's default event from being triggered.

So, given your markup, it might look like this:

$('a.show-description').click(functino() {
       $(this).parent().next().show();
       return false;
});


--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com

On Jul 4, 2008, at 10:36 AM, Kris wrote:

Whats the best way to provide functionality (eg. toggle an 'additional
information' div) when dealing with records with unique id's.

For example lets say we are dealing with product records each one has
a unique id which is a number, so the HTML might look something like
this:

<div class="products">
 <div class="product" id="product_1">
  <p>Name: Red Widget</p>
  <p>Price: 22.00</p>
  <p><a href="">Show description</a></p>
  <p id="description_1" style="display:none;">sadasdasdasdasd</p>
 </div>

 <div class="product" id="product_2">
  <p>Name: Blue Widget</p>
  <p>Price: 24.00</p>
  <p><a href="">Show description</a></p>
  <p id="description_2" style="display:none;">sadasdasdasdasd</p>
 </div>

etc. etc.
</div>

I want to place unobtrusive jquery that will allow the 'show
description' link to display the correct description div...

Many thanks, K.

--
Cheers,
Diego A.

[Michael Geary-3]

For anyone who is wondering, "functino" is Italian for "tiny function."

Here's another way to write the code, using only a single event handler
(event delegation) instead of individual event handlers on every link. This
will be faster if there are a lot of product descriptions. I'd also put an
ID on the parent DIV - <div class="products" id="products"> - to make it
even faster:

    $('#products').click( function( event ) {
        var $target = $(event.target);
        if( $target.is('a.show-description') ) {
            $target.parent().next().show();
            return false;
        }
    });

-Mike

> From: Karl Swedberg
>
> Hi Kris,
>
> I'd give the "show description" links a common class -- for
> example, "show-description"  That way you can use a basic
> selector to apply to all of those links.
>
> Then, I'd use the "this" keyword to find the appropriate
> description relative to the clicked link.
>
> Adding "return false" will prevent the link's default event
> from being triggered.
>
> So, given your markup, it might look like this:
>
> $('a.show-description').click(functino() {
> $(this).parent().next().show();
> return false;
> });
>
>
> --Karl
> ____________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
>
> On Jul 4, 2008, at 10:36 AM, Kris wrote:
>
> >
> > Whats the best way to provide functionality (eg. toggle an
> 'additional
> > information' div) when dealing with records with unique id's.
> >
> > For example lets say we are dealing with product records
> each one has
> > a unique id which is a number, so the HTML might look something like
> > this:
> >
> > <div class="products">
> >  <div class="product" id="product_1">
> >    <p>Name: Red Widget</p>
> >    <p>Price: 22.00</p>
> >    <p><a href="">Show description</a></p>
> >    <p id="description_1" style="display:none;">sadasdasdasdasd</p>
> >  </div>
> >
> >  <div class="product" id="product_2">
> >    <p>Name: Blue Widget</p>
> >    <p>Price: 24.00</p>
> >    <p><a href="">Show description</a></p>
> >    <p id="description_2" style="display:none;">sadasdasdasdasd</p>
> >  </div>
> >
> > etc. etc.
> > </div>
> >
> > I want to place unobtrusive jquery that will allow the 'show
> > description' link to display the correct description div...
> >
> > Many thanks, K.
> >
> >
>

[Karl Swedberg-2]

D'oh! silly typo. You crack me up, Michael. :-)

--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com




On Jul 4, 2008, at 3:04 PM, Michael Geary wrote:

>
> For anyone who is wondering, "functino" is Italian for "tiny  
> function."
>
> Here's another way to write the code, using only a single event  
> handler
> (event delegation) instead of individual event handlers on every  
> link. This
> will be faster if there are a lot of product descriptions. I'd also  
> put an
> ID on the parent DIV - <div class="products" id="products"> - to  
> make it
> even faster:
>
>    $('#products').click( function( event ) {
>        var $target = $(event.target);
>        if( $target.is('a.show-description') ) {
>            $target.parent().next().show();
>            return false;
>        }
>    });
>
> -Mike
>
>> From: Karl Swedberg
>>
>> Hi Kris,
>>
>> I'd give the "show description" links a common class -- for
>> example, "show-description"  That way you can use a basic
>> selector to apply to all of those links.
>>
>> Then, I'd use the "this" keyword to find the appropriate
>> description relative to the clicked link.
>>
>> Adding "return false" will prevent the link's default event
>> from being triggered.
>>
>> So, given your markup, it might look like this:
>>
>> $('a.show-description').click(functino() {
>> $(this).parent().next().show();
>> return false;
>> });
>>
>>
>> --Karl
>> ____________
>> Karl Swedberg
>> www.englishrules.com
>> www.learningjquery.com
>>
>>
>>
>>
>> On Jul 4, 2008, at 10:36 AM, Kris wrote:
>>
>>>
>>> Whats the best way to provide functionality (eg. toggle an
>> 'additional
>>> information' div) when dealing with records with unique id's.
>>>
>>> For example lets say we are dealing with product records
>> each one has
>>> a unique id which is a number, so the HTML might look something like
>>> this:
>>>
>>> <div class="products">
>>> <div class="product" id="product_1">
>>>   <p>Name: Red Widget</p>
>>>   <p>Price: 22.00</p>
>>>   <p><a href="">Show description</a></p>
>>>   <p id="description_1" style="display:none;">sadasdasdasdasd</p>
>>> </div>
>>>
>>> <div class="product" id="product_2">
>>>   <p>Name: Blue Widget</p>
>>>   <p>Price: 24.00</p>
>>>   <p><a href="">Show description</a></p>
>>>   <p id="description_2" style="display:none;">sadasdasdasdasd</p>
>>> </div>
>>>
>>> etc. etc.
>>> </div>
>>>
>>> I want to place unobtrusive jquery that will allow the 'show
>>> description' link to display the correct description div...
>>>
>>> Many thanks, K.
>>>
>>>
>>
>