Deleting Items from Table - Laravel

Question

In my code below, i am displaying a list of students in a table. Now when i delete the last student in the table, it rather deletes the first person. Why is this happening? Could it be i am not looping well to get the id's of each students?

When the delete button is clicked, a modal button pops up and i click on yes to do the deletion like below

PS: Laravel Beginner

Controller

 public function index()
    {
        $students= Student::where('user_id', Auth::user()->id)->get();
        return view('students.index',compact('students'));
    }

View

<tbody>
                      @foreach($students as $std)
                          <tr>
                           <td>{{$std->name}}</td>
                           <td>{{$std->phone}}</td>
                           <td>
                            <a  style="color:#000" href="/student/{{$std->id}}/edit" title="edit" ><i  style="font-size:16px" class="fa fa-edit"></i></a>
                        &nbsp;&nbsp;

             <a style="color:#000" data-toggle="modal" data-target="#myModal" title="delete" ><i style="font-size:16px"  class="fa fa-trash"></i></a>
                            </td>

                          </tr>
                          @endforeach
                        </tbody>


    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
      <!-- Modal content-->

      <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Warning</h4>
            </div>
            <div class="modal-body">
            <p>Do you wish to delete this student ?</p>
            </div>
            <div class="modal-footer">
            @if(!empty($std))
            <a href="/student/{{$std->id}}/delete" class=" modal-action waves-effect waves-light btn-flat red-text">Yes</a>
                    <a  data-dismiss="modal" class=" modal-action modal-close waves-effect waves-light green white-text btn">No</a>      
            @else     
            @endif
           </div>
          </div>

        </div>
      </div>

    </div>

update

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
      <!-- Modal content-->

      <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Warning</h4>
            </div>
            <div class="modal-body">
            <p>Do you wish to delete this student ?</p>
            </div>
            <div class="modal-footer">
            @if(!empty($std))
            <a href="/student/+userId+/delete" class=" modal-action waves-effect waves-light btn-flat red-text">Yes</a>
                    <a  data-dismiss="modal" class=" modal-action modal-close waves-effect waves-light green white-text btn">No</a>      
            @else     
            @endif
           </div>
          </div>


<script>
$('#myModal').on('show.bs.modal', function(e) {
    var $modal = $(this);
    var userId = e.relatedTarget.dataset.uid;

    // You can add the url with user ID to link href attribute
    $modal.find('.modal-footer a.red-text').attr('href', '/customer/' + userId + '/delete');
})
</script>

You have one modal window with one link to delete. Either create a modal for each student or pass data to modal dynamically. — u_mulder
– u_mulder, Commented Apr 18, 2018 at 6:52
@u_mulder i tried looping over the modal with @foreach($students as $std) (passing data dynamically) but that didnt do the trick. — user9653376
– user9653376, Commented Apr 18, 2018 at 7:00

TiTnOuK · Accepted Answer · 2018-04-18 09:22:57Z

2

In your case, the best practice is to send user ID to Bootstrap modal when you click on delete button.

First, add a data-attribute on your delete button to pass the user ID

<table>
    <tbody>
        @foreach($students as $std)
        <tr>
            <td>{{$std->name}}</td>
            <td>{{$std->phone}}</td>
            <td>
                <a style="color:#000" href="/student/{{$std->id}}/edit" title="edit">
                    <i style="font-size:16px" class="fa fa-edit"></i>
                </a>
                <a style="color:#000" data-toggle="modal" data-target="#myModal" data-uid="{{$std->id}}" title="delete">
                    <i style="font-size:16px" class="fa fa-trash"></i>
                </a>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

Then you need to add a bit of jQuery to retrieve your uid parameter

$('#myModal').on('show.bs.modal', function(e) {
    var $modal = $(this);
    var userId = e.relatedTarget.dataset.uid;

    // You can add the url with user ID to link href attribute
    $modal.find('.modal-footer a.red-text').attr('href', '/student/' + userId + '/delete');
})

So, you're sure the ID used for deletion will be the correct one.
Hope this helps you :)

Update :

I made a simple codepen to illustrate this
Codepen example

edited Apr 18, 2018 at 9:22

answered Apr 18, 2018 at 7:01

TiTnOuK

1731 silver badge9 bronze badges

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

2 Comments

user9653376 Over a year ago

check my update. i put the href in the modal as '/student/' + userId + '/delete' but that does not work

TiTnOuK Over a year ago

@JonathanFeud check my codepen example, it can help you ;)

Faraz Irfan · Accepted Answer · 2018-04-18 06:59:58Z

0

You are doing it in a wrong way, you have to assign std->id to each delete anchor and give an id to anchor id="del-anchor" like

<a   id='del-anchor' std-id={{$std->id}} style="color:#000" data-toggle="modal" data-target="#myModal" title="delete" ><i style="font-size:16px"  class="fa fa-trash"></i></a>

You also need to assign id to modal anchor and change it dynamically.

$(document).on('click', '#del-anchor', function () {
   var std-id = $(this).attr('std-id');
   var href = "/student/"+std-id+"/delete";
   $("your-model-anchor").attr("href",href);
   $('#myModal').modal();
 }

It will delete the corresponding student, you also need to call $("#myModal").hide when delete successful.

answered Apr 18, 2018 at 6:59

Faraz Irfan

1,3263 gold badges10 silver badges17 bronze badges

Collectives™ on Stack Overflow

Deleting Items from Table - Laravel

2 Answers 2

Update :

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update :

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related