load form in bootstrap modal dynamically using laravel

Question

I am working on app, which required a form in bootstrap modal and also load the form dynamically. i am facing the problem all of the page is loaded in modal again. Anybody here provide any example for this..?

// Controller

public function loadJsModalForm() {
    return View::make('frmModals.frmProject');
}

// index.blade

@section('Modal')
<!-- Modal -->
<div class="modal fade" id="ProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="frmAddProject"></div>
    </div>
</div>
@stop

// form Modal

{{ Form::open(array('url'=>'projects/jsModal', 'class'=>'frmCreateProject')) }}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Create Project</h4>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                {{ Form::label('Project Title') }}
                {{ Form::text('project_title', null, array('class'=>'form-control', 'placeholder'=>'Project title')) }}
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    {{ Form::submit('Submit', array('class'=>'btn btn-primary')) }}
</div>
{{ Form::close() }}

// main.js

function openMdoal(link, div){
    $(link).on('click', function(e){
        e.preventDefault();
        $('#'+div).html('<div style="text-align:center;"><img src="../img/spinner.gif"/><br/><br/><h3 class="text-primary">Loading Form...</h3></div>');
        $(div).load(
            $(this).attr('href'),
            function(response, status, xhr) {
                if (status === 'error') {
                    //console.log('got here');
                    $(div).html('<p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                }
                return this;
            }
        );
    });
}

$(document).ready(function(){
    openMdoal('.addProjectModal', '#frmAddProject');
});

// Route

Route::get('projects/jsModal', 'ProjectsController@loadJsModalForm');  

Thanks

Answer 1

this is a late answer, but I wanted to load all modals dynamically instead of having them in markup, so I created views for each of them - for delete, edit, etc., just the inner part (content)

on index.blade.php I have a skeleton for modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content load_modal"></div>
    </div>
</div>

and buttons for different actions:

<button type="button" class="btn btn-danger" data-toggle="modal"  data-id="{{ $id  }}" data-post="data-php" data-action="delete">Delete </button>

and then call on button click content for different modals, having separated views for each modal, for example modal_delete.blade.php looks like that:

<div class="modal-body">
    <em>Are you sure that you want to delete</em>?
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>

   <button type="button" class="btn btn-danger photo-delete" data-slug="">Delete</button>
 </div>

in controller I made a method for all actions:

/**
     * load modals dynamically - for edit, delete,create
     * GET /folder/{id}/load-{action}
     * 
     * @param string $action
     * @param int $id
     * @return Response
     */
    public function loadModal($id, $action)
    {
       //return view for specified action
       //if action is delete, call this view, etc...
        return View::make('admin.photos.modal_delete')->render();
    }

in routes:

Route::get('photos/{id}/load-{action}','YourController@loadModal');

and finally JS to load the content:

$('button').on('click', function(){
    var this_id = $(this).attr('data-id');
    var this_action = $(this).attr('data-action');
    if(this_action == 'edit'){

        $.get( base_url + this_id + '/load-' + this_action, function( data ) {
            $('#myModal').modal();
            $('#myModal').on('shown.bs.modal', function(){
                $('#myModal .load_modal').html(data);
            });
            $('#myModal').on('hidden.bs.modal', function(){
                $('#myModal .modal-body').data('');
            });
        });
    }
});

This way my html is cleaner. I hope this will help someone, as well - I'm open to suggestions :)

Answer 2

Updated Angel M.'s answer for Laravel 5.4

on index.blade.php I have a skeleton for modal:

<div class="modal fade" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body load_modal">

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

and buttons for different actions:

<button type="button" title="View Profile" class="btn btn-info btn-simple btn-xs" data-toggle="modal" data-target="#user" data-id="{{ $user->id  }}" data-post="data-php" data-action="view" data-title="Mais sobre:"><i class="fa fa-user"></i></button>
<button type="button" title="Edit Profile" class="btn btn-success btn-simple btn-xs" data-toggle="modal" data-target="#user" data-id="{{ $user->id  }}" data-title="Editar" data-post="data-php" data-action="edit"><i class="fa fa-edit"></i></button>

in controller I made a method for all actions: $modal is name of view in data-action eg: delete.blade.php

public function loadModal($modal, $id, $action)
{
    $user = $user = User::findOrFail($id);
   //return view for specified action
   //if action is delete, call this view, etc...
    return view('admin.includes.modal.'.$modal, compact('user'));
}

in routes:

Route::get('{modal}/{id}/load-{action}','Admin\UserCtrl@loadModal');

and finally JS to load the content:

$('button').on('click', function(){
    var this_id = $(this).attr('data-id');
    var this_action = $(this).attr('data-action');
    var title = $(this).attr('data-title');
    var base_url = this_action+'/';
    if(this_action == this_action){
        $.get( base_url + this_id + '/load-' + this_action, function( data ) {
            $('#myModal').modal();
            $('#myModal').on('shown.bs.modal', function(){
                $('#myModal .load_modal').html(data);
                $('.modal-header .modal-title').html(title);
            });
            $('#myModal').on('hidden.bs.modal', function(){
                $('#myModal .modal-body').data('');
            });
        });
     }
});