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