Simple Open partial blade on bootstrap Modal

Submitted by sr2ds - 5 years ago

Instead of always having to include the button to open the modal, create the modal and all its contents, you can dynamically create the modal and load the route of the content you want to open in a very simple way. This allows you to still display the ever updated data without much effort in editing cases.

// Include dinamic modal creation on your js file
    
    $("body").on('click', "[data-custom='open_modal']", function (event) {
    	event.preventDefault();
    	var btn = $(this);
    	var link = $(this).attr('href');
    	var title = $(this).text();
    	$('#custom_modal_resource').remove();
    	var modal = '<div class="modal" id="custom_modal_resource">\
    	<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">'+ title + '</h4>\
    	</div>\
    	<div class="modal-body">\
    	\
    	</div>\
    	</div>\
    	</div>\
    	</div>';
    	$('body').append(modal);
    	$('#custom_modal_resource').modal('show');
    	$('#custom_modal_resource .modal-body').load(link);
    });
	
// for run modal:

	<a class="btn btn-default btn-flat btn-sm" data-custom='open_modal' href="/admin/your_route_path/{{$item->id}}/edit">
        <i class="fa fa-fw fa-pencil"></i>
    </a>
    
// On route edit, return only form for item edition and be happy