从数据库和表中删除行但保留在同一页面Laravel

Question

hi all I've got a table displaying data in my view in laravel-4 . When the user selects a row to delete a pop up displays asking them are they sure they want to delete this row. When they click confirm I remove the row and I would also like to remove the data from the database

However this is my problem, How can I do this without navigating away from my current view and back again. I'd like the user to stay on the page.

I know it's not a good idea to call controller methods from within the view so I'd like to avoid that. I'm at a loss, I also put the code into my route thinking maybe it would execute and stay on the page but that did not work.

This is my view

    <div class="panel panel-default">
        <div class="panel-heading">
            All Tweets
            <div class="pull-right btn-toolbar">
                <a href="#" class="btn btn-danger" id="delete_selected">Delete Selected</a>
            </div>
        </div>
        <div class="panel-body">
            <table class="table table-hover" id="tweets_table">
                <thead>
                    <tr>
                        <th>Select</th>
                        <th>Tweet</th>
                        <th>Username</th>
                        <th>Name</th>
                        <th>Tweeted at</th>
                    </tr>
                </thead>
                @foreach(Tweet::orderBy('created_at', 'DESC')->get() as $tweet)
                    <tr id="{{$tweet->tweet_id}}">
                        <td><a class="btn btn-danger" id="delete">Delete</a></td>
                        <td id="tweet_text">{{$tweet->tweet_text}}</td>
                        <td id="tweet_user">{{$tweet->screen_name}}</td>
                        <td>{{$tweet->name}}</td>
                        <td id="tweet_date">{{$tweet->created_at}}</td>
                    </tr>
                @endforeach
            </table>
        </div>
    </div>

    <!-- Twitter Bootstrap Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Warning: Delete Tweet</h4>
        </div>
        <div class="modal-body">
          <p>Are you sure you would like to delete this Tweet from the database?</p>
          <br/>
          <strong>Tweet: </strong><p class="modal_tweet_text"></p>
          <strong>Username: </strong><p class="modal_tweet_user"></p>
          <strong>Tweet Date: </strong><p class="modal_tweet_date"></p>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">No</a>
          <a href="{{action('AdminBaseController@deleteTweet')}}" class="btn btn-primary" id="confirm_btn">Yes</a>
        </div>
      </div>
    </div>
</div>
    <!-- PUT THIS INTO EXTERNAL JS -->
    <script>
        //When the delete button is clicked open the pop up.
        $('#delete').click(function(){
            $('#myModal').modal({show:true});
            //Get the clicked row
            var row = $(this).closest('tr');
            //Get the tweet, user and date
            var tweet = row.find('#tweet_text');
            var user = row.find('#tweet_user');
            var date = row.find('#tweet_date');

            //Display details in the pop up
            $('.modal_tweet_text').text(tweet.text());
            $('.modal_tweet_user').text(user.text());
            $('.modal_tweet_date').text(date.text());

            //Confirm Action 
            $('#confirm_btn').click(function(){
                row.remove();                   //remove the row
                $('#myModal').modal('hide');//Hide the popup
            });
        });
    </script>

This is my routes.php

Route::get('dashboard/delete-tweet', 'AdminBaseController@deleteTweet');//delete tweet from db - dashboard.

This is the controller

public function deleteTweet(){

        //Id of tweet to delete


        //return to dashboard


    }

I know I've not got any logic in the action, I just want to know how I could call this logic without navigating away from the view.

Answer 1

You could take a look at JSON (get)-requests that perform these sorts of actions without having the need of reloading or redirecting back to the page. For instance, you could attach click events to your delete buttons. That event will trigger a JSON get-request to the url ./dashboard/delete-tweet/{id} . Based on that ID, your 'tweet' can be deleted. After that, you would normally use

return Redirect::to('page');

at the end of your controller, but in this case you can use

return Response::json(array('message' => 'Success, or w/e'));

In your JSON requests, you can check wether it was executed successfully - so that you can also delete the row from your view. See this page for more information on how to setup these JSON requests.

Answer 2

You are going to need to fire an ajax call which will make a request to Laravel which will delete the record, and then probably return some kind of success message.

One issue I see currently is all of your element ids should be unique, so you will probably want to change that as well for this to work correctly. I added a class to the delete rows called tweet_delete to give you something to grab and modified the jquery, as well as added the relevant ajax and a data-id attribute which will hold the id of the tweet so we know which one to delete.

<div class="panel panel-default">
    <div class="panel-heading">
        All Tweets
        <div class="pull-right btn-toolbar">
            <a href="#" class="btn btn-danger" id="delete_selected">Delete Selected</a>
        </div>
    </div>
    <div class="panel-body">
        <table class="table table-hover" id="tweets_table">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Tweet</th>
                    <th>Username</th>
                    <th>Name</th>
                    <th>Tweeted at</th>
                </tr>
            </thead>
            @foreach(Tweet::orderBy('created_at', 'DESC')->get() as $tweet)
                <tr id="{{$tweet->tweet_id}}">
                    <td><a class="btn btn-danger tweet_delete" data-id="{{ $tweet->tweet_id }}">Delete</a></td>
                    <td id="tweet_text">{{$tweet->tweet_text}}</td>
                    <td id="tweet_user">{{$tweet->screen_name}}</td>
                    <td>{{$tweet->name}}</td>
                    <td id="tweet_date">{{$tweet->created_at}}</td>
                </tr>
            @endforeach
        </table>
    </div>
</div>

<!-- Twitter Bootstrap Modal -->
<div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Warning: Delete Tweet</h4>
        </div>
        <div class="modal-body">
          <p>Are you sure you would like to delete this Tweet from the database?</p>
          <br/>
          <strong>Tweet: </strong><p class="modal_tweet_text"></p>
          <strong>Username: </strong><p class="modal_tweet_user"></p>
          <strong>Tweet Date: </strong><p class="modal_tweet_date"></p>
        </div>
        <div class="modal-footer">
          <a href="#" data-dismiss="modal" class="btn">No</a>
          <a href="{{action('AdminBaseController@deleteTweet')}}" class="btn btn-primary" id="confirm_btn">Yes</a>
        </div>
      </div>
    </div>
</div>
<!-- PUT THIS INTO EXTERNAL JS -->
<script>
    //When the delete button is clicked open the pop up.
    $('.tweet_delete').click(function(){
        $('#myModal').modal({show:true});
        //Get the clicked row
        var row = $(this).closest('tr');
        //Get the tweet, user and date
        var tweet = row.find('#tweet_text');
        var user = row.find('#tweet_user');
        var date = row.find('#tweet_date');

        //Display details in the pop up
        $('.modal_tweet_text').text(tweet.text());
        $('.modal_tweet_user').text(user.text());
        $('.modal_tweet_date').text(date.text());

        //Confirm Action 
        $('#confirm_btn').click(function() {
            row.remove();                   //remove the row
            $('#myModal').modal('hide');    //Hide the popup

            // Fire ajax call to delete row from database.
            $.post('dashboard/delete-tweet', {id: $(this).attr('data-id')}, function(data, textStatus, xhr) {
                if(data.success)
                    alert('Tweet successfully deleted');
                else
                    alert('Something went wrong!');
            });
        });
    });
</script>

And your route would look something like this...

Route::post('dashboard/delete-tweet', function()
{
    $tweet = Tweet::find(Input::get('id'));
    $tweet->delete();
    return Response::json(array('success' => true));
})