Laravel - How to reuse modal code and open different modals according to button click

Question

So I have a few buttons that open the same modal but different content. I don't want to copy/paste the modal code each time I need to open a new model. I want to use the same modal code and according to the button clicked load different content in the modal. How can I do that? Here is my modal code:

<div class="dialogs-holder">
    <div class="dialog new_file">
        <div class="dialog-header clearfix">
            <a class="flaticon stroke maximize-4" href="/"></a>
            <div class="dialog-title"><span class="gray-bckg">{{ //different according to button }}</span></div>
            <div class="flaticon stroke x-1"></div>
        </div>
        <div class="dialog-content clearfix">
            @include('includes.modals.' . //different template according to button )
        </div>
    </div>
</div>

How can I do that?

Answer 1

It's a late answer and adapted for Laravel but it might interest someone.

I created a modal.blade.php

<div id="{{ $id or 'modal' }}" class="modal fade" role="dialog">                
    <div class="vertical-alignment-helper">
        <div class="modal-dialog vertical-align-center">
            <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-header text-center">
                    <h2>{{ $title }}</h2>
                </div>

                <div class="modal-body">
                    <div class="panel-body"></div>                              
                </div>

            </div>                    
        </div>
    </div>                
</div>

And now when I want to pop-up a modal I use this

@component('whereyourmodalisplaced.modal', [
    'id' => 'task-show', //If you use multi modal on same page, always use ID
    'title' => 'Edit a task'])
@endcomponent

I'm updating the modal contact with ajax when needed with this kind of behaviour

<a  href=""
data-endpoint="{{ route('tasks.show' , ['tasks' => $task->id]) }}" 
data-target="task-show .modal-content .panel-body"
data-modal="task-show"
data-cache="false"
data-async="true"
data-toggle="modal" >{{ $task->name }}</a>

And make sure to always have this in your code

$('body').on('click', 'a[data-async="true"]', function(e)
{
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('target'),                
        modal = self.data('modal');

    $.ajax({
        url: url,
        type: self.data('method'),
        cache : self.data('cache'),
        success: function(data)
        { 
           if (target !== 'undefined'){ $('#'+target).html( data ); }
           if (modal !== 'undefined'){ $('#'+modal).modal( 'show' ); }
        }
    });
});

Answer 2

follow bellow steps and you will got output which near your requirements.

Step 1. Create Routes like bellow in routes.php

Route::get('test_model1',['as'=>'test_model1', 'uses'=>'TestController@test_model1']);
Route::get('test_model2',['as'=>'test_model2', 'uses'=>'TestController@test_model2']);

Step 2. Setup Testcontroller with bellow code in Testcontroller.php

class TestController extends Controller {

        public  $param=array();

        public function __construct(){
            //$this->middleware('auth');
        }

        public function test_model1(){
            $this->param['content']="Model 1 body.";
            return view('test.model',$this->param);
        }

        public function test_model2(){
            $this->param['content']="Model 2 body.";
            return view('test.model',$this->param);
        }
    }

Step 3. setup model body content view. in resources/test/model.blade.php

<div class="row">
    <div class="col-xs-12">
        <p><?php echo $content; ?></p>
    </div>
</div>

Step 4. setup bello code in any of your view file.

<a href="<?php echo route('test_model1'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-primary">
        Launch Modal 1
    </a>
    <a href="<?php echo route('test_model2'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-danger">
        Launch Modal 2
    </a>


    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <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">Modal title</h4>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $("#myModal").on("show.bs.modal", function(e) {
            var link = $(e.relatedTarget);
            $(this).find(".modal-body").load(link.attr("href"));
        });
    </script>

Answer 3

You have to use the javascript to do that.

first you have handle the each event when the buttons are clicked. then you can set the content by dynamically to the title and content of modal using javascript.

eg.

 // give the id to title tag of modal
 <span class="gray-bckg" id="modal_title"></span>
 //give the id to content tag of modal
 <div class="dialog-content clearfix" id="content"></div>

now add the script

 //with script
 $("#button1").on("click",function(e){
      $("#content").val("this is button1 content");
      $(".modal").open();
 });
 $("#button2").on("click",function(e){
      $("#content").val("this is button2 content");
      $(".modal").open();
 });