Laravel: Jquery on click function issue

Question

I am trying to alert something but on click function is running only once on the first button. but I have buttons on many rows.

I am fetching Data through Laravel from Database in a table. Only one button runs a function, then nothing happens with other buttons.

Jquery:

jQuery(document).ready(function(e)  {
    $('#restore-data').on('click', function(e) {
    var val = $("#thisr").attr('value');
    alert(val);

    });
});

View:

<table id="recover-table" class="table" >
    <thead>
    <tr class="bg-info">
        <th>Teacher Name</th>
        <th>Date</th>
        <th>Action</th>
    </tr>
    </thead>
    <tbody>

    @foreach($trashs as $trash)

    <tr id="thisr" value="{{$trash->id}}">
    <td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>

    <td class="text-nowrap ">{{$trash->deleted_at}}</td>

    <td class="text-nowrap "><button type="submit"  class="" name="id" 
    value="{{$trash->id}}" id="restore-data">Delete</button></td>

    </tr>

    @endforeach </tbody></table>

Right now even alert is not working, but I want to achieve Refresh table after a record is deleted from Table.

Update: Now Alert is working fine, but when I delete a record by pressing a button, only one row is deleting. the function runs once.

Complete Js:

jQuery(document).ready(function(e)  {

    $('#restore-data').on('click', function(e) {

    let teacher_id=$(this).attr('value');
    console.log('Restore button clicked!')
    e.preventDefault();

    $.ajax(
    {
      url: "/teachers/recover/" + $('#restore-data').attr("value"),
      type: 'GET', // Just delete Latter Capital Is Working Fine
      headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
      data: teacher_id,

     success: function (data) {
     console.log(data.msg);
     console.log(teacher_id);

     if(data.msg){
         $('#thisr').remove();
         $('#response').empty();
         $(".toast").toast('show');
         $('#response').append(data.msg);
      }
    },
    error: function (xhr) {
    console.log("Error Restoring Record");
    //console.log(xhr.responseText);
    },
   });
  });
});

Saleem · Accepted Answer · 2019-11-06 07:40:10Z

3

You can try to use class 'restore-data'

$(document).ready(function(e)  {
    $(document).on('click', '.restore-data', function(e) {
        var val = $('#thisr').val();
        alert(val);
    });
});

As id should be unique for each element.

You can try something like

@foreach($trashs as $trash)

<tr>
<td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>

<td class="text-nowrap ">{{$trash->deleted_at}}</td>

<td class="text-nowrap ">
    <button type="button" data-trash-id="{{$trash->id}}" class="restore-data">Delete</button>
</td>

</tr>

@endforeach

and JS as

$(document).on('click', '.restore-data', function(e) {
    var trash_id = $(this).attr('data-trash-id');
    alert(trash_id);
});

edited Nov 6, 2019 at 7:40

answered Nov 6, 2019 at 6:07

Saleem

1,05914 silver badges27 bronze badges

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

5 Comments

Fayakon Over a year ago

please check my edited answer last portion. if you can help thanks.

Saleem Over a year ago

I have updated the answer, You need to use unique ids, you can use laravel blade loop variables

Fayakon Over a year ago

deleting only first row.

Saleem Over a year ago

Please let me know if the alert shows the correct value?

Saleem Over a year ago

As you can add attr to the button there is no need for them on tr. I have added data-trash-id attribute. If you need to remove parent tr tag then you can use $(this).parent('tr').remove(); or $(this).closest('tr').remove();

Poldo · Accepted Answer · 2019-11-06 06:36:47Z

3

Change this line.

var val = $("#thisr").attr('value');

to (since you have value attribute in button):

var val = $(this).attr('value');

or (since you have value attribute td):

var val = $(this).parent('tr#thisr').attr('value')

To remove a row.

$('#restore-data').on('click', function(e) {

 var _this = $(this);
 ...

if(data.msg){
  _this.parent('tr#thisr').remove();
....

Also change button type to button.

<button type="button"  class="" name="id" 
    value="{{$trash->id}}" id="restore-data">Delete</button></td>

edited Nov 6, 2019 at 6:36

answered Nov 6, 2019 at 6:03

Poldo

1,9321 gold badge15 silver badges27 bronze badges

8 Comments

Fayakon Over a year ago

Thank you, it's working for alert, but how can i reload only table after alert.

Fayakon Over a year ago

please check my edited answer last portion. if you can help thanks.

Fayakon Over a year ago

still running only once. please check

Fayakon Over a year ago

added _this.parent('tr#thisr').remove(); but still only one row removed, not second. :(

Fayakon Over a year ago

i added alert(1) in start and that too runs once.

|

Karan · Accepted Answer · 2019-11-06 06:56:12Z

1

You gave same id to all button and id must be unique of particular button so you can define unique id with key of array and pass it to Function

@foreach($trashs as $key=>$trash)

<tr id="thisr{{$key}}">
    <td class="text-nowrap ">{{$trash->efirst}} {{$trash->esecond}}</td>
    <td class="text-nowrap ">{{$trash->deleted_at}}</td>
    <td class="text-nowrap ">
        <button type="button"  class="" name="id" value="{{$trash->id}}" id="restore-data{{$key}}" onclick="restoreData({{$key}})">Delete</button>
    </td>
</tr>
@endforeach

function restoreData(key){
    var val = $("#restore-data"+key).attr('value');
    alert(val);
    // you can use either
    $("#restore-data"+key).closest('tr').remove();
    // OR
    $('#thisr'+key).remove();
}

edited Nov 6, 2019 at 6:56

answered Nov 6, 2019 at 6:09

Karan

1,1561 gold badge10 silver badges24 bronze badges

9 Comments

Fayakon Over a year ago

please check my edited answer last portion. if you can help thanks.

Fayakon Over a year ago

Thankyou so much can you modify code to delete rows?

Karan Over a year ago

try last line of the function i modified to delete row

Fayakon Over a year ago

i am using $('#restore-data').on('click', function(e), how can i pass key in it instead of using onclick.

Karan Over a year ago

Check this line

<button type="button"  class="" name="id" value="{{$trash->id}}" id="restore-data{{$key}}" onclick="restoreData({{$key}})">Delete</button>

|

Collectives™ on Stack Overflow

Laravel: Jquery on click function issue

3 Answers 3

5 Comments

8 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

8 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related