CODEWITHSUNDEEP
laravellaravel-5eloquent
user10945543
user10945543

Reputation: 65

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

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>

Upvotes: 1

Views: 5250

Answers (4)

saleh shokouhi
saleh shokouhi

Reputation: 545

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

Upvotes: 0

user8990125
user8990125

Reputation:

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>

Upvotes: 1

Ankush Sood
Ankush Sood

Reputation: 421

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

Upvotes: 0

ankith vishwakarma
ankith vishwakarma

Reputation: 104

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

Upvotes: 0

Related Questions