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


Delete row from db and table but stay on same page Laravel

大家好,我有一个表,在laravel-4view中显示数据。当用户选择要删除的行时,会显示一个弹出窗口,询问他们是否确定要删除该行。当他们点击确认时,我删除了行,我也想从database 中删除数据

然而,这是我的问题,我如何在不离开当前view并再次返回的情况下做到这一点。我希望用户留在页面上。

我知道从view中调用controller方法不是一个好主意,所以我想避免这种情况。我不知所措,我还把代码放进了我的route中,以为它可能会执行并留在页面上,但这没有奏效。

这是我的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>

这是我的routes.php

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

这是controller

public function deleteTweet(){
        //Id of tweet to delete

        //return to dashboard

    }

我知道我在行动中没有任何逻辑,我只想知道如何在不偏离视图的情况下调用这个逻辑。

您可以查看JSON(get)-执行此类操作的请求,而无需重新加载或重定向回页面。例如,您可以将点击事件附加到删除按钮上。该事件将触发对url的JSON获取请求/仪表板/删除推文/{id}。根据该ID,您的"推文"可以被删除。在那之后,你通常会使用

return Redirect::to('page');

在控制器的末端,但在这种情况下,您可以使用

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

在您的JSON请求中,您可以检查它是否成功执行,这样您也可以从视图中删除该行。有关如何设置这些JSON请求的更多信息,请参阅本页。

您将需要启动一个ajax调用,该调用将向Laravel发出请求,Laravel将删除记录,然后可能返回某种成功消息。

我目前看到的一个问题是,您的所有元素ID都应该是唯一的,所以您可能也想更改这一点,以使其正常工作。我在删除行中添加了一个名为tweet_delete的类,以便获取和修改jquery,并添加了相关的ajax和一个data-id属性,该属性将保存推文的id,以便我们知道要删除哪一个。

<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>

你的路线会是这样的。。。

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