Dynamic ID between PHP, SQL and jQuery

Question

I have a SQL database that PHP is getting the contents of. It gets the info from each row of a table and displays it on a web page. There is also an anchor and a hidden div containing more details from that row of the SQL table. When the use clicks the anchor the jQuery needs to detect it and show the hidden div. The problem I have is that each anchor and hidden div have a dynamic id of:

'ev_a_' . $row['id']
'ev_' . $row['id']

the jQuery I assume needs to look something like this:

$('#ev_a_')[].click(function(){
    $('#ev_')[].show();
}

I'm not entirely sure how this works and I've never used dynamic ids before in jQuery. Any suggestions?

I should point out the PHP/SQL code is:

while($row = mysql_fetch_array($q_result)){
    echo "<br/><b>" . $row['a'] . "</b><br/>" . $row['b'] . ", " . $row['c'] . "<br/>" . $row['d'] . "<br/><a class='ev_event_a'>More Details</a><br/><div class='ev_event'>" . $row['e'] . "</div>";
}

use a css class to "group" your buttons/links, then apply a jquery click handler to the class, using the link's ID to figure out which dom element to show. — Populus
– Populus, Commented May 2, 2014 at 15:02
if you are dynamically assigning IDs with php then you can't access them using a any jQuery loop (such as .each). You should rather assign them a Class (ev_a and ev) and and Id ($row['id']). Then, loop through the classes and get their ID properties to build back what you need to do. — briosheje
– briosheje, Commented May 2, 2014 at 15:02

jeroen · Accepted Answer · 2014-05-02 15:10:25Z

1

I would use a class instead for these links instead and set the ID in a data attribute. Depending on your needs you don't even need the ID as you can show the next element if it is already part of the DOM.

A simple example (ID not used...):

<a href="#" class="show_more" data-id="xx">Toggle details</a>
<div class="initially_hidden">
  ...
</div>
....
<a href="#" class="show_more" data-id="x">Toggle details</a>
<div class="initially_hidden">
  ...
</div>
....

and the javascript:

$('.show_more').on('click', function(e) {
  e.preventDefault();
  $(this).next().slideToggle();
  // if you need the ID, you can get it via $(this).data('id')
});

edited May 2, 2014 at 15:10

answered May 2, 2014 at 15:04

jeroen

91.8k22 gold badges118 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rmalex Over a year ago

Thanks for the help, I couldn't get it to work directly so I ended up using $(this).parent().find('.ev_event').slideToggle('slow'); which now has it working

jeroen Over a year ago

@rmalex Great! Note that my example depends on the structure of the html, you could also add an ID to the initially_hidden class div to target it directly, something like #details_xx.

rmalex Over a year ago

Sorry, it still doesn't work. What I suggested shows/hides everything in one go. Using your code above only works when it's not in the format of the PHP/SQL code I added to the question. Any ideas on why it wouldn't work like that?

jeroen Over a year ago

@rmalex You should post your html, but by the look of it, there is a br tag between the link and the div so you could try my code but you'd have to change .next() to .next('.ev_event'). Using just .next() you'd be animating the br tag...

rmalex Over a year ago

That's done it, thanks. I moved the br to inside the div and it's working fine now.

Collectives™ on Stack Overflow

Dynamic ID between PHP, SQL and jQuery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related