Passing an element id from PHP to Javascript

Question

I have some data from my mysql database. I am showing that data in table using foreach loop like below

<table> 
foreach($students as $row):?>
        <tr><td><i id="expand<?php echo $row['student_id'];?>" class="myclass fa fa-plus-square"></i></td>
        <td><?php echo $i; $i++;?></td>
            <td><?php echo $row['roll'];?></td>
            <td style="text-align:center;"><img src="<?php echo $this->crud_model->get_image_url('student',$row['student_id']);?>" class="img-circle" width="50" /></td>
            <td><?php echo $row['name'];?></td>

            <td><?php echo $row['address'];?></td>
            <td><?php echo $row['phone'];?></td></tr></table>

I have also a click event function in Javascript like below

$('#expand').click(function(){
    $('#dev').toggleClass('hidden');
});

This is I want to hide and show on clicked event. Please note that this row contains data of student whose student id is $row['student_id']

 <tr id="dev<?php echo $row['student_id'];?>" class="hidden">
            <td colspan="7">
            <table>
            <tr><td>Phone Number is <?php echo $row['phone'];?></td></tr>
            </table>
            </td>
            </tr>

I want to pass element id from php to javascipt so that when clicked on id expand it will execute some function like showing or hiding

Thanks.

What have you tried so far to accomplish this task? What went wrong with your solution? — Robert Rossmann, Jan 02 '15 at 12:49

David · Accepted Answer · 2015-01-02T13:04:44.737

You don't have an id called "expand", you have this:

id="expand<?php echo $row['student_id'];?>"

Assuming $row['student_id'] isn't empty (and it shouldn't be, at least for more than one record, since ids need to be unique), then the id won't be "expand". It will, however, begin with "expand". So you can select on that:

$('[id^="expand"]').click(function(){
    // handle the click event here
});

This will attach the same click handler to each matched item, which is any element on the page where the id begins with "expand". Note that the handler is going to do the same thing for each one, so your current logic targets one single element (with an id of "dev") to toggle its visibility. So, currently, every click will show/hide the same element. You might not want exactly that functionality, but that's not entirely included in the question. (There's no #dev element in your markup, so it's not entirely clear how you want it to behave.)

Edit

There are a number of ways to target the element you want to show/hide. Without having to change the markup, you can probably just get the numeric portion of the id and use that to build the target id. Potentially something like this:

$('[id^="expand"]').click(function(){
    var idNumber = $(this).attr('id').replace(/expand/g, '');
    $('#dev'+id).toggleClass('hidden');
});

Thanks David, Your answer works but it shows/hide only first hidden row. not other. Can u tell how to show/hide the element relative to button clicked — Cool Perfectionist, Jan 02 '15 at 12:57
@BWCreativePanipat: Where is that element in relation to that button? There are lots of jQuery selectors/functions for traversing the DOM to target a specific element. Your current selector is based on `id`, so it can only ever target one element because `id`s need to be unique. — David, Jan 02 '15 at 12:59
when user click on expand1 id then dev1 id will be show and when click on expand2 id, dev2 id will be shown like this. — Cool Perfectionist, Jan 02 '15 at 13:01
@BWCreativePanipat: I've updated the answer. If the `id` elements will always follow that same pattern of a known text portion followed by the same numeric portion then some quick string manipulation can do the job without having to change the markup. — David, Jan 02 '15 at 13:05

score 1 · Answer 2 · answered Jan 02 '15 at 13:06

1

Thanks to all participants

But special thanks to @david & @deacs

I have got it working as below

$('[id^="expand"]').click(function(){
var id = $(this).attr('data-id');
$('#dev'+id).toggleClass('hidden');

});

answered Jan 02 '15 at 13:06

Cool Perfectionist

205
1
3
18

score 0 · Answer 3 · answered Jan 02 '15 at 12:41

Add an attribute to the element.

<i id="expand<?php echo $row['student_id'];?>" data-id="<?php echo $row['student_id'];?>" class="myclass fa fa-plus-square"></i>

Call function on class not on id as there are multiple elements.

$('.myclass').click(function(){
  var id = $(this).attr('data-id');
  $('#dev-'+id).toggleClass('hidden'); // apply proper logic here.
});

deacs · Answer 4 · 2015-01-02T12:51:16.513

0

You could also use .myclass in the selector and then remove the string expand from the id which you retrieve from attr():

$('.myclass').click(function(){
    var id = $(this).attr('id').replace('expand','');
    $('#dev'+id).toggleClass('hidden');
});

edited Jan 02 '15 at 12:51

answered Jan 02 '15 at 12:45

deacs

4,259
2
27
37

Passing an element id from PHP to Javascript

4 Answers4