使用bootstrap动态模态进行删除确认(laravel blade)

时间:2017-04-01 10:10:20

标签: javascript php jquery twitter-bootstrap laravel

我的目标是使用bootstrap模式作为删除确认。但问题是我需要将动态变量(其中包含项目ID)值传递给bootstrap模式以提交发布请求以删除该特定项目。
请检查现在设置value="foo"的模态部分告诉我如何将此“foo”作为动态变量,它将来自 laravel 刀片模板部分(“<td><a href="{{'#'}}" data-toggle="modal" data-target="#myModal">Delete</a></td>” ) 什么是解决方案?我更喜欢javascript解决方案。

Bootstrap模态部分

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
                </div>
                <form method="post">
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" name="delete_dividend" value="foo">Delete</button>
                </div>
                </form>
            </div>
        </div>
    </div>

Laravel Blade模板部件

@foreach($dividends_10 as $_dividend_data)
                    <tr>
                      <td>{{Portfolio\StockModel::select('short_name')->where('id',$_dividend_data['stock_id'])->value('short_name')}}</td>
                      <td>{{$_dividend_data['amount']}}</td>
                      <td>{{$_dividend_data['date']}}</td>
                      <td><a href="{{'dividends'}}">Edit</a></td>
                      <td><a href="{{'#'}}" data-toggle="modal" data-target="#myModal">Delete</a></td>
                    </tr>
                  @endforeach

1 个答案:

答案 0 :(得分:1)

假设id字段为表格的主键。
首先用下面的代码::

替换 Laravel Blade模板部件
@foreach($dividends_10 as $_dividend_data)
<tr>
  <td>{{Portfolio\StockModel::select('short_name')->where('id',$_dividend_data['stock_id'])->value('short_name')}}</td>
  <td>{{$_dividend_data['amount']}}</td>
  <td>{{$_dividend_data['date']}}</td>
  <td><a href="{{'dividends'}}">Edit</a></td>
  <td><a href="{{'#'}}" class="delete-mdoal" data-value="{{$_dividend_data['id']}}" data-toggle="modal" data-target="#myModal">Delete</a></td>
</tr>
@endforeach

之后使用 jQuery 以使删除按钮值动态:

$(document).ready(function (e) {
    $(document).on("click", ".delete-mdoal", function (e) {
        var delete_id = $(this).attr('data-value');
        $('button[name="delete_dividend"]').val(delete_id);
    });
});