12 Replies - 2432 Views - Last Post: 26 June 2013 - 09:25 AM

#1 NoRemorse   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 26-January 11

Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 04:08 AM

So I need to keep a portion of info hidden until the user clicks on a button to display it.
The problem is that there are several Items displayed on the page and all of them have different info hidden.

<div>
             <button class="btn btn-small" id="moreInfo1">More info</button>
             <div style="display: none;" id="moreInfoPanel1">
                 HERE IS SOME INFO
             </div>
</div>
<div>
             <button class="btn btn-small" id="moreInfo2">More info</button>
             <div style="display: none;" id="moreInfoPanel2">
                 HERE IS SOME  OTHER INFO
             </div>
</div>

<script>
    $('#moreInfo1').click(function(){
        $('#moreInfoPanel1').slideToggle('fast');
    });
</script>



The script applies to a single element nicely, and I put it here to show what I wanted to do.
Can someone please help me figure out how to do the same thing for auto-generated id/class - s?

Is This A Good Question/Topic? 0
  • +

Replies To: Problem, how to check the click() of an auto-generated id/class

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4252
  • View blog
  • Posts: 13,480
  • Joined: 08-June 10

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 04:33 AM

I’d just pass the display’s id to the handler.
function showInfo(evt)
{
  $(evt.data.id).slideToggle('fast');
}
 $('#moreInfo1').on("click", { id: '#moreInfoPanel1' }, showInfo);

alternately, put the info into the data attribute of the button.
Was This Post Helpful? 1
  • +
  • -

#3 NoRemorse   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 26-January 11

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 04:37 AM

Thank you very much, but still the problem exists, that I do not know, what the id will exactly be, for instance it can be: Computer1 or Laptop3. I can make it so that the panel and button have the same id-s or different by a number, but I cant predict the id-s fully. Is there a way I could recognize which button was pressed?

This post has been edited by NoRemorse: 26 June 2013 - 04:41 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6834
  • View blog
  • Posts: 28,366
  • Joined: 12-December 12

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 04:56 AM

IDs must be unique on the page.

Is the class-name "btn-small" reliable? If it is then you could use:

    $('.btn-small').click(function () {
        var ind = $('.btn-small').index(this);
        $('#moreInfoPanel' + (ind+1)).slideToggle('fast');
    });

That is, use the index number of the btn to work out the id's suffix, 1,2, etc. (Indexes start from zero).

If 'moreInfoPanel' is, as you suggest, not reliable, then you could instead find the first DIV which is a sibling to the button:

    $('.btn-small').click(function () {
        $(this).siblings('div').first().slideToggle('fast');
    });

Was This Post Helpful? 1
  • +
  • -

#5 NoRemorse   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 26-January 11

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 05:10 AM

What if I do not know what the id-s of the buttons are going to be?
There could be 30 buttons with different id-s and there could only 1. They are generated dynamically. How could I then control the panel?
Thank you for sibling idea, it makes things easier.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4252
  • View blog
  • Posts: 13,480
  • Joined: 08-June 10

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 05:12 AM

$('button')?

of course any other selector (e.g. by class name, all buttons in a certain div) would work as well.
Was This Post Helpful? 1
  • +
  • -

#7 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6834
  • View blog
  • Posts: 28,366
  • Joined: 12-December 12

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 05:33 AM

@OP Be aware that $('button') would apply to ALL buttons on the page. So, as Dormilich advises, you need some way to narrow this down. Hopefully, the class-names "btn" or "btn-small" can be relied upon, or some containing element.
Was This Post Helpful? 1
  • +
  • -

#8 NoRemorse   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 26-January 11

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 07:01 AM

Thank you for your help.
Was This Post Helpful? 0
  • +
  • -

#9 NoRemorse   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 26-January 11

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 07:26 AM

<ul style="list-style-type: none;">
          <li><b style="font-size: 20px;">ASUS ZENBOOK Prime UX51VZ DB104H - 15.6'' - Core i7 3632QM - Windows 8 64-bit - 8 GB RAM - 256 GB SSD + 256 GB SSD</b></li>
          <li><span style="font-size: 14px;">Ultrabooks</span></li>
          <li><span style="font-size: 14px;">ASUSTeK Computer</span></li>
          <li><b style="font-size: 14px;">2&nbsp;573.16</b></li>
          <li><a>http://www.markit.eu/ee/et/asus-zenbook-prime-ux51vz-db104h-ultrabook-core-i7/v2p7447139c110201</a></li>
          <li><div style="text-align: center;padding: 6px;">
                  <button class="btn btn-small" id="moreInfo">More info</button>
               </div>
          </li>
          <div style="display: none;" id="moreInfoPanel">
                                
              <li><span style="font-size: 14px;">System Type: Ultrabook </span></li>
                                
              <li><span style="font-size: 14px;">Operating System: Windows 8 64-bit </span></li>
                                
              <li><span style="font-size: 14px;">Processor: Intel Core i7 (3rd Gen) 3632QM / 2.2 GHz </span></li>
                                
              <li><span style="font-size: 14px;">Memory: 8 GB DDR3 </span></li>
                                
              <li><span style="font-size: 14px;">Storage: 256 GB SSD </span></li>
                                
              <li><span style="font-size: 14px;"> 256 GB SSD </span></li>
                                
              <li><span style="font-size: 14px;">Optical Drive: DVD-Writer </span></li>
                                
              <li><span style="font-size: 14px;">Display: 15.6'' LED backlight 2880 x 1620 / WQHD</span></li>
                                
               <li><span style="font-size: 14px;"> </span></li>
                                
              <li><span style="font-size: 14px;">Graphics: NVIDIA GeForce GT 650M - 2 GB GDDR5 </span></li>
                                
              <li><span style="font-size: 14px;">Networking: 802.11n, Bluetooth 4.0 , Gigabit Ethernet </span></li>
                                
               <li><span style="font-size: 14px;">Battery: 8-cell - up to 7 hours </span></li>
                                
               <li><span style="font-size: 14px;">Dimensions (WxDxH): 38 cm x 25.4 cm x 2 cm </span></li>
                                
               <li><span style="font-size: 14px;">Weight: 2.2 kg </span></li>
                                
                <li><span style="font-size: 14px;">Manufacturer Warranty: 2 years warranty </span></li>
                                
             </div>
             <hr>
        </ul>
<script>
$('button').click(function(){
        $(this).siblings('div').first().slideToggle('fast');
    });
</script>




So this is the code I got right now, but the siblings property does not work. What is the reason?

This post has been edited by NoRemorse: 26 June 2013 - 07:29 AM

Was This Post Helpful? 0
  • +
  • -

#10 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4252
  • View blog
  • Posts: 13,480
  • Joined: 08-June 10

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 07:31 AM

well, obviously. you have a completely different HTML that in post #1. (and the problem seems to be different as well)
Was This Post Helpful? 0
  • +
  • -

#11 NoRemorse   User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 65
  • Joined: 26-January 11

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 07:35 AM

Well I would like to toggle the next div after the button that was clicked. Is that not what the siblings property should help me do, when i put it like this:

$(this).siblings('div').first().slideToggle('fast');

Was This Post Helpful? 0
  • +
  • -

#12 laytonsdad   User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,992
  • Joined: 30-April 10

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 09:15 AM

it does not look like the div is a sibling of the button.
<div> //parent
  <div></div> //child
  <div></div> //siblinng to child
</div>




it looks like you would have to get the previous li and then get the sibling
Was This Post Helpful? 0
  • +
  • -

#13 andrewsw   User is online

  • never lube your breaks
  • member icon

Reputation: 6834
  • View blog
  • Posts: 28,366
  • Joined: 12-December 12

Re: Problem, how to check the click() of an auto-generated id/class

Posted 26 June 2013 - 09:25 AM

@OP Why did you decide to post DIFFERENT HTML in your original post? It means people have been answering a completely different question to the one you need an answer to!
(See my recent blog entry, linked in my signature.)

BTW It doesn't help that the HTML is malformed: ULs should only contain LI-elements as children.

As laytonsdad advises, you need to look into jQuery Tree Traversal.

This post has been edited by andrewsw: 26 June 2013 - 09:27 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1