如何自动将新博客添加到现有页面?

时间:2017-04-12 05:52:54

标签: bootstrap-modal

我最近开始使用bootstrap模式,并试图在@foreach循环内的按钮时钟上创建一个模态,但每当我按下按钮启动模态时,同样的模态出现,它甚至编辑同一地址的内容。 当我从数据库中将模态id更改为id时,模态不再出现。 这是循环的代码:

    <div class="container">
<div class="panel-group" style="width: 100%;text-align: center;text-transform: capitalize">
    <div class="panel-primary">
    @foreach($data as $datas)
        {{--@section('id','{{$datas->id}}')--}}
            <div class="panel panel-heading" style="text-align: left;" id="{{$datas->id}}"><label class="col-sm-2 control-label" for="blogTitle">{{$datas->title}}</label>
        </div>
        <div class="panel panel-body ">
            <label class="col-sm-2 col-md-offset-4 control-label" for="blogText">{{$datas->blogs}}</label>
            <div class="container" style="align-content: right;">
                <a href="{{url('/')}}/delete/{{$datas->id}}" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-remove"></span>Delete</a>
                <button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#{{$datas->id}}"><span class="glyphicon glyphicon-pencil"></span>Edit Blog</button>
            </div>
        </div>
        @section('modal')
            @parent
            <!--Modal2-->
            <div class="modal fade" id="{{$datas->id}}" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!--Modal Header-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times;</span>
                                <span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title" id="modalTitle">Type Your Blog Here</h4>
                        </div>
                        <!--Modal Body-->
                        <div class="modal-body">
                            <form class="form-horizontal" method="post" action="{{URL('/')}}/post/{{$datas->id}}" role="form">
                                {{csrf_field()}}
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="inputTitle3">Title</label>
                                    <div class="col-sm-10">
                                        <input type="text" name="title" class="form-control" id="inputTitle3" value="{{$datas->title}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="InputBlog3">Blog</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" name="New_Blog_Content" id="InputBlog3">{{$datas->blogs}}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span>Update</button>
                                        <button type="reset" class="btn btn-primary">Reset</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        {{--@endsection--}}
        @endforeach

1 个答案:

答案 0 :(得分:0)

似乎问题很简单就解决了。 这是解决方案:

        <div class="container">
        @foreach($data as $datas)
        <div class="panel-group" style="width: 100%;text-align: center;text-transform: capitalize">
            <div class="panel-primary">
                <div class="panel panel-heading" style="text-align: left; width:100%;align-content: stretch ;">
                    <label class="col-sm-2 control-label" for="blogTitle">{{$datas->title}}</label>
                </div>
                <div class="panel panel-body">
                    <label class="col-sm-2 control-label" style="width:100%;align-content: space-around;text-align: center" for="blogText">{{$datas->blogs}}</label>
                </div>
                <div class="panel-footer">
                    <a href="{{url('/')}}/delete/{{$datas->id}}" class="btn btn-danger btn-lg"><span class="glyphicon glyphicon-remove"></span>Delete</a>
                    <button class="btn btn-warning btn-lg" data-toggle="modal" data-target="#{{$datas->id}}"><span class="glyphicon glyphicon-pencil"></span>Edit</button>
                </div>
            </div>
        </div>
            <!--Modal-->
            <div class="modal fade" id="{{$datas->id}}" role="dialog" aria-labelledby="{{$datas->id}}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <!--Modal Header-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">
                                <span class="glyphicon glyphicon-remove"></span>
                                <span class="sr-only">close</span>
                            </button>
                            <h4 class="modal-title" id="modalTitle{{$datas->title}}">Edit Your Blog Here</h4>
                        </div>
                        <!--Modal Body-->
                        <div class="modal-body">
                            <form class="form-horizontal" method="post" action="{{url('/')}}/edit/{{$datas->id}}" role="form">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="InputBlogTitle">Title</label>
                                    <div class="col-sm-10">
                                        <input class="form-control" type="text" id="inputBlogTitle" value="{{$datas->title}}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" for="inputBlogContent">Blog</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" id="inputBlogContent">{{$datas->blogs}}</textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-warning btn-wide"><span class="glyphicon glyphicon-check"></span>Update </button>
                                    <button type="reset" class="btn btn-primary btn-lg">Reset<span class="glyphicon glyphicon-repeat"></span></button>
                                </div>
                            </form>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-warning close" data-dismiss="modal">Close<span class="glyphicon glyphicon-remove"></span></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach