【问题标题】:How to get dynamic data in bootstrap modal by using Laravel?如何使用 Laravel 在引导模式中获取动态数据?
【发布时间】:2019-08-16 10:30:57
【问题描述】:

我正在开发一个应用程序,该应用程序需要在每次点击我的不同图标列表时显示数据。问题是如何根据 id 在引导模式中显示数据。提前致谢。

在这里,我试过了,但没有全部工作..

       <div class="col-xs-12 col-sm-6 col-md-3">

                @foreach($Play as $post)
                <div class="member">
                    <div class="member-img">
                        @if ($post->new_game)
                            <img src="{{ $post->new_game}}" alt="member" />@endif

                    </div>
                    <!-- .member-img end -->
                    <div class="member-info">
                        <h5>{{$post->friendly}}</h5>
                        <h6>{{$post->enemy}}</h6>
                        <div class="divider--line divider--center"></div>
                        <p>{{ $post->weapon }}</p>

                        <button type="button" class="btn btn--primary btn--link" href="#" data-toggle="modal" data-target="#myModal" id="{{$post->id }}" onclick="showDtails">Get more weapon detials</button>

                    </div>


                </div>
                @endforeach

                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog">


                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
                            </div>
                            <div class="modal-body">
                                <img src="/app/assets/images/team/thumb/1.jpg">
                                <p>{{$post->full_weapon}}</p>
                            </div>

                        </div>

                    </div>
                </div>

            </div>



        </div>

【问题讨论】:

    标签: laravel laravel-5 eloquent


    【解决方案1】:

    HTML 应该是这样的

    <div id="myModal" class="modal fade" role="dialog">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title" id="myModalLable">{{$post->id}}</h5>
             </div>
             <div class="modal-body">
    
             </div>
          </div>
       </div>
    </div>
    

    按钮

    <button type="button"  data-toggle="modal" data-target="#myModal" onclick="showDtails({{$post->id }})">Get more weapon detials</button>
    

    用ajax调用函数

    function showDtails(postid){
        $.ajax({
                    url : '{{ route("getdata") }}',
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data:{postid:postid},
                    success:function(data){
    
                        $('.modal-body').html(data)
    
                    },
    
                });
    }
    

    Route.php

    Route::post('/getdata', 'HomeController@getdata')->name('getdata');
    

    控制器.php

    public function getdata(Request $request){
        $postid = $request->postid;
        $post = Post::where('id',$postid)->first();
        return view('getdata',compact('post'));
    }
    

    getdata.blade.php 文件

    <div>
        //whatever you write here or display here you'll get this data to your bootstrap model.
    </div>
    

    【讨论】:

    • @thanks Greg,我试过了,但仍然没有任何反应
    【解决方案2】:

    你需要点击一个包含你需要的数据的get api,当收到响应时,用javascript填充值,然后显示模态

    【讨论】:

    • 谢谢,怎么做,有没有示例代码可以看一下
    【解决方案3】:

    只需在脚本标签中编写函数

    function showDtails(){
        $( ".modal-body" ).load("/admin/edit_location", function() {
            $( "#myModal" ).modal('show');
        });
    }
    

    /admin/edit_location 是加载视图的路径,下面是路径的功能:

    public function GetEditLocationsModal(){
        return view('modals.admin_edit_current_location');
    }
    

    【讨论】:

    • 是的,如果您愿意,您可以将 id 作为参数传递。如果对您有帮助,请点赞回答
    【解决方案4】:

    使用 javascript 或 js 框架(如 vuejs)或库(如 jquery)

    axios|ajax 调用控制器->控制器发回相应数据->模态显示

    //show modal 
    $('#myModal').modal('show');
    
    //hide modal
    $('#myModal').modal('hide')
    

    对不起,我的英语不好,但我可以提供帮助。

    更新

    看看这个例子你就会明白

    welcome.blade.php

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
         <!-- Styles -->
         <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    
          <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    
         <!-- CSRF Token -->
         <meta name="csrf-token" content="{{ csrf_token() }}">
    
         <title>{{ config('app.name', 'Laravel') }}</title>
    
        <title>Document</title>
    </head>
    <body>
    
        <ul class="list-group">
    
            <li ><button type="button" id="btn1" class="btn btn-primary m-3" onclick="get('btn1')">button 1</button></li>
            <li ><button type="button" id="btn2" class="btn btn-primary m-3" onclick="get('btn2')">button 2</button></li>
            <li ><button type="button" id="btn3" class="btn btn-primary m-3" onclick="get('btn3')">button 3</button></li>
    
        </ul>
    
        <div class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p id="modalBody">Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary">Save changes</button>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>
    
    </body>
    </html>
    
    <script>
    
    function get(btn) {
    
    // send data and recive response from controller
    
    axios.post('/getData',{ // send
    
        btnClick:btn 
    
    }).then(res =>{ // recive
    
        $('.modal').modal('show'); // open modal
    
        $('#modalBody').empty().append(res.data); // append data in modal body
    
    
    });
    
    }
    
    </script>
    

    web.php

    Route::post('/getData', 'apiController@index');
    

    控制器

    <?php
    
    namespace App\Http\Controllers;
    
    use Illuminate\Http\Request;
    
    class apiController extends Controller
    {
    
        public function index(Request $request)
        {
    
            switch( $request->btnClick){
    
                case 'btn1':
    
                    return 'data for button 1';
    
                    break;
    
                    case 'btn2':
    
                    return 'data for button 2';
    
                    break;
    
                    case 'btn3':
    
                    return 'data for button 3';
    
                    break;
    
            }
    
        }
    
    }
    

    也许您想根据当前用户 ID 从控制器发送响应。然后使用 auth()->user()->id

    【讨论】:

    • 谢谢@shsaleh 我经历了这个但仍然显示错误
    猜你喜欢
    • 2021-01-29
    • 2021-04-03
    • 2018-06-10
    • 2021-07-19
    • 2017-04-21
    • 2014-10-04
    • 2017-10-14
    • 1970-01-01
    • 2020-08-19
    相关资源
    最近更新 更多