Bootstrap Modal Re-use in Laravel

modal.md

#Basic Idea( Source code)

• Uses of Modal
• What are needed
• Modal file

---

Uses of Modal:

Generally we use modal for confirmation message and to laod a form to edit or update an item.

---

What are needed:

• Laravel
• jQuery
• Bootstrap

Modal File:

• form-modal.blade.php

<div class="modal fade" id="form-modal" tabindex="8" role="dialog" aria-labelledby="form-modal" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <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="form-modal">{{$title}}</h4>
            </div>
            <div class="modal-body" >
                @yield('body')
            </div>
        </div>
    </div>
</div>

The body of this form-modal will be loaded by using the followinng button's data-url :

  <button class="btn btn-info load-form-modal" data-url="{{your url}}" data-toggle ="modal" data-target='#form-modal' >
                        Edit
                    </button>

• confirmation-modal.blade.php

<div class="modal fade" id="confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="confirmation-modal-title">
    <div class="modal-dialog modal-md" role="document">
        <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="confirmation-modal-title">{{ $title }}</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure about this action?</p>
            </div>
            <div class="modal-footer">
                <!-- delete form -->
                {!! Form::open(['url' => '', 'method' => 'delete']) !!}
                <button type="button" class="btn btn-primary" data-dismiss="modal">close</button>
                <button type="submit" class="btn btn-danger">confirm</button>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>

The action of modal's will be replaced by using the followinng button's data-url :

  <button class="btn btn-danger load-confirmation-modal" data-url="{{ item delete url }}" data-toggle ="modal" data-target='#confirmation-modal' >
                        Delete
                    </button>

js Script:

load-confirmation-modal and load-form-modal class of button are used to handle the functionality.

• script.js file is

/**
 * Created by mahbub on 8/5/15.
 */
var Modal = {
    init: function () {
        this.initEditModal();
        this.initConfirmationModal();
    },
    initEditModal: function() {
        $(document).on('click', '.load-form-modal', function(event){
            console.log('Modal: '+ $(this).attr('data-url'));
            $('#form-modal .modal-body').load($(this).attr('data-url'));
            event.preventDefault();
        });
    },
    initConfirmationModal: function() {
        $(document).on('click', '.load-confirmation-modal', function(event){
            $('#confirmation-modal form').attr('action', $(this).attr('data-url'));
            event.preventDefault();
        });
    }
};

Modal.init();

Thank you :)

Hi,
Im using load-form-modal insight foreach loop but when i click Edit button it is passing first data for all ids.
how to solve that ???
<button class="btn btn-info btn-xs load-form-modal" data-url="{{'employees/'.$user->id.'/tasks/'.$t->id }}" data-toggle ="modal" data-target='#form-modal' > Edit</button>

<div class="modal fade" id="form-modal" tabindex="8" role="dialog" aria-labelledby="form-modal" aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <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="form-modal">{{$t->task}}</h4>
                                    </div>
                                    <div class="modal-body" >
                                        @yield('body')
                                    </div>
                                </div>
                            </div>
                        </div>

i will get first task for all task :( why is that ? i think data-url is rong ???