How to get dynamic data in bootstrap modal by using Laravel?

Question

I am developing an app which requires to show the data at every click on my different list of icon. The problem is how to display data in to bootstrap modal according to id. Thanks in advance.

Here, I have tried with, but not working all..

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

user8990125 · Accepted Answer · 2019-08-16 12:31:19Z

1

Html should like this

<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

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

call function with 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');

Controller.php

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

getdata.blade.php file

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

answered Aug 16, 2019 at 12:31

user8990125

Sign up to request clarification or add additional context in comments.

1 Comment

user10945543 Over a year ago

@thanks Greg, I tried with but still nothing happening

ankith vishwakarma · Accepted Answer · 2019-08-16 10:47:47Z

0

You will need to hit a get api containing the data you need, when the response is received fill the values with javascript and then display the modal

answered Aug 16, 2019 at 10:47

ankith vishwakarma

1043 bronze badges

1 Comment

user10945543 Over a year ago

thanks, how to do that, do you have a example code so can go through it

Ankush Sood · Accepted Answer · 2019-08-16 10:51:03Z

0

Just write the function in th script tag

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

where /admin/edit_location is the route to load view and below is the function of the route:

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

answered Aug 16, 2019 at 10:51

Ankush Sood

4314 silver badges13 bronze badges

1 Comment

Ankush Sood Over a year ago

Yes if you want you can pass id as an argument. Upvote answer if it helped you

saleh shokouhi · Accepted Answer · 2019-08-19 22:56:13Z

use javascript or js framework like vuejs or library like jquery

axios|ajax call to controller->controller send back corresponding data ->show in modal

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

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

sorry my english is not good but i help as i can.

update

look at this example you will get the idea

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');

controller

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

        }

    }

}

maybe you want send response from controller according to current user id. then use auth()->user()->id

Collectives™ on Stack Overflow

How to get dynamic data in bootstrap modal by using Laravel?

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related