CODEWITHSUNDEEP
javascriptjquerylaravel-4laravel-blade
Nanda Pandyatama
Nanda Pandyatama

Reputation: 101

JavaScript click function table cell only applied on the first row

I had a JavaScript click function on a table row, but when I click it, the function only works on the first row. How do I fix this?

<script type="text/javascript">
   $(document).ready(function(){  
        $('#detpanel').hide();
        $("#showdet").click(function(){
            $('#detpanel').slideDown(500);
        });
        $("#hidedet").click(function(){
            $('#detpanel').slideUp(500);
        });
        $('#showdet').hover(function(){
            $(this).divhover("background-color", "yellow");
        });
    });    
</script>

<tbody>
   <?php $i = 0; ?>
    @foreach ($auser as $res)
       <?php $i += 1; ?>
           <tr @if($i%2==0) class="bgcolor dihover" @endif id='showdet' class="dihover">
               <td>{{ $res->id }}</td>
               <td>{{ $res->name }}</td>
               <td>{{ $res->email }}</td>
               <td>
                   <a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a>&nbsp;|&nbsp;
                   <a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
               </td>
            </tr>
    @endforeach
</tbody>

Upvotes: 3

Views: 371

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

ID of an element must be unique, since you are creating the elements in a loop use class.

When using ID selector it will return only the first element with the said ID, so in your case the click handler is getting registered to only the first element

                <tbody>
                    <?php $i = 0; ?>
                    @foreach ($auser as $res)
                        <?php $i += 1; ?>
                        <tr @if($i%2==0) class="bgcolor dihover" @endif class='showdet' class="dihover">
                            <td>{{ $res->id }}</td>
                            <td>{{ $res->name }}</td>
                            <td>{{ $res->email }}</td>
                            <td>
                                <a class="default-btn" href="/pms/admin/user/edit/{{ $res->id }}">Edit</a>&nbsp;|&nbsp;
                                <a type="submit" class="default-btn del" data-id="admin-user" href="pms/admin/user/delete/{{ $res->id }}">Delete</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>

then use class selector to register the click handler

$(document).ready(function () {
    $('#detpanel').hide();
    $(".showdet").click(function () { //use class selector here
        $('#detpanel').slideDown(500);
    });
    $("#hidedet").click(function () {
        $('#detpanel').slideUp(500);
    });
    $('#showdet').hover(function () {
        $(this).divhover("background-color", "yellow");
    });
});

Upvotes: 2

Related Questions