0

I am trying to use Ajax to post some data to a php script. I want the ajax request to be triggered when the delete button is clicked, and then delete the div where the click button was clicked.

Here is the code:

<div class="container content">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-blue margin-bottom-40">
                    <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
                    </div>                                     
                    <table class="table">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Care Home</th>
                                <th>Last Login</th>
                                <th>Number of Log-ins</th>
                                <th>Last Data Upload</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                        @foreach($employees as $employee)
                            <tr id="tr{{$employee->email}}">
                                <td class="fn">{{$employee->username}}</td>
                                <td class="ln">{{$employee->username}}</td>
                                <td class="email">{{$employee->email}}</td>
                                <td class="carehome_name">{{$employee->carehome_name}}</td>
                                <td class="last_login">{{$employee->last_login}}</td>
                                <td class="n_sessions">{{$employee->n_sessions}}</td>
                                <td class="last_upload">{{$employee->last_upload}}</td>
                                <td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>                          
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>          
    </div>

And here is the Javascript:

<script type="javscript">

  $('.btn-danger').on('click', function(e){

    e.preventDefault();
    var id = $(this).attr('id');
    alert(id);

    $.ajax({
      url: '../../controllers/userManagementAjax.php',
      type: 'post',
      data: {'action': 'delete', 'email': id},
      success: function(data, status) {
        if(data == "ok") {
          $('#tr'+'id').remove();
        }
      },

      error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
      }


    }); // end ajax call
  });

</script>

I've tried a number of things and nothing works, the click event is not event logged to the the console.

Thank you all for your suggestions!

2
  • 1
    This can't be good: ` url: '../../controllers/userManagementAjax.php',`, you have to call the HTTP uri in the ajax request and I don't think you want to access your controller like that.
    – Stefan
    Jul 23, 2014 at 18:22
  • Even with relative paths ajax request should be made (please see this fiddle: jsfiddle.net/xCAaQ). Possible problem might lay with not having your script within $(document).ready() block. Bear in mind that script is evaluated as soon as it's encountered within DOM, so if your HTML code is later on I'd say that's the cause.
    – eithed
    Jul 23, 2014 at 18:35

1 Answer 1

0

Please take a look here.

http://jsfiddle.net/py6PJ/

I removed your PHP loop, it seems to click just fine. Please confirm.

<div class="container content">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-blue margin-bottom-40">
                    <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-tasks"></i>Management Panel</h3>
                    </div>                                     
                    <table class="table">
                        <thead>
                            <tr>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Email</th>
                                <th>Care Home</th>
                                <th>Last Login</th>
                                <th>Number of Log-ins</th>
                                <th>Last Data Upload</th>
                                <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr id="tr{{$employee->email}}">
                                <td class="fn">{{$employee->username}}</td>
                                <td class="ln">{{$employee->username}}</td>
                                <td class="email">{{$employee->email}}</td>
                                <td class="carehome_name">{{$employee->carehome_name}}</td>
                                <td class="last_login">{{$employee->last_login}}</td>
                                <td class="n_sessions">{{$employee->n_sessions}}</td>
                                <td class="last_upload">{{$employee->last_upload}}</td>
                                <td><button class="btn btn-danger btn-xs" id="{{$employee->email}}"><i class="fa fa-trash-o"></i> Delete</button></span></td>                          
                            </tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>          
    </div>

Javascript is the same.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.