Combining jQuery with PHP

Question

I have some simple jQuery toggle script like this:

<script type="text/javascript">
$(document).ready(function() {
  $('#clickedit').click(function() {
    $('#st').toggle();
  });
});
</script>

And, of course, in my HTML I have some

<div id="clickedit">CLICK ITEM TO TOGGLE</div>
<div id="st">content to show/hide</div>

Now... If I am working with PHP and I am iterating through few 'items' and each 'item' has his content to show/hide I cannot set static ids to my divs because script just won't work. I can assign some item's id to my divs (something like echo "<div id='clickedit".$id."'>"; and echo "<div id='st".$id."'>";) but I don't know how to handle them in my jQuery script! I am just discovering jQuery and it is brilliant, but still confusing to me :) So any help would be great!
Thanks in advance!

pilsetnieks · Accepted Answer · 2010-11-05 22:50:03Z

2

I don't know your particular case but something like this should do the trick:

<div class="clickedit" id="clickedit123">CLICK ITEM TO TOGGLE</div>
<div class="st" id="st123">content to show/hide</div>

you set the class name to be able to assign the click events to all of them at once, but use the ID to have a specific ID for each item.

$('.clickedit').click(function() {
    var id = this.id.replace('clickedit', '');
    $('#st' + id).toggle();
}

And on the click event take the ID, take the generic part off the ID and use the ID to find the necessary element to toggle.

answered Nov 5, 2010 at 22:50

pilsetnieks

10.4k12 gold badges51 silver badges61 bronze badges

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

1 Comment

errata Over a year ago

wow! :) jQuery <3 thanks a lot to both of you, going to read jquery documentation little deeper :)

Dustin Laine · Accepted Answer · 2010-11-05 22:58:11Z

1

Use a class selector, and some jQuery sweetness!

<script type="text/javascript">
$(document).ready(function() {
  $('.div1').click(function() {
    $(this).next('.div2').toggle();
  });
});
</script>

Then your PHP would change to, you could remove your ID's:

echo "<div class='div1' id='clickedit".$id."'>"; and echo "<div class='div2' id='st".$id."'>";

edited Nov 5, 2010 at 22:58

answered Nov 5, 2010 at 22:48

Dustin Laine

38.7k10 gold badges90 silver badges125 bronze badges

2 Comments

pilsetnieks Over a year ago

It's quite possible that the div he needs to toggle isn't adjacent to the clickable div. (I know it is in the example, but the whole thing just breaks down when it isn't).

Dustin Laine Over a year ago

Yes of course, this could be handled with selector wildcards and appending and ID to the ID's when looping in PHP.

Collectives™ on Stack Overflow

Combining jQuery with PHP

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related