for my laravel app on bootstrap 3 I am attempting to do a basic application wide confirm dialog box using the code below:
<button type="button" class="btn btn-default"
data-toggle="modal"
data-target="#confirmActionModal"
data-backdrop="false"
data-title="Cancel Subscription"
data-body="Please confirm the cancellation of your subscription."
data-modal-primary-button-text="Cancel Subscription"
>
Cancel Subscription
</button>
Modal:
<div class="modal fade" id="confirmActionModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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">×</span></button>
<h4 class="modal-title" id="modalTitle"> Default Title </h4>
</div>
<div class="modal-body" id="modalBody">
Default 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">Default Button Text</button>
</div>
</div>
</div>
</div>
JS:
$('#confirmActionModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) ;// Button that triggered the modal
var modalTitle = button.data('title'); // Extract info from data-* attributes
var modalBody = button.data('body');
var modalActionButtonText = button.data('modal-primary-button-text');
var modal = $(this);
modal.find('.modal-title').text(modalTitle);
modal.find('.modal-body').text(modalBody);
modal.find('.btn-primary').text(modalActionButtonText);
})
Since the confirm dialog is generic across the application, I would like the ability to pass in the call back ajax function name also. So for instance when someone clicks the primary action button (in this case cancel subscription), I would like to also pass in the ajax call back as I am passing in title and body for a javascript function like cancelSubscription() that basically does the action. Any tips or is my approach flawed?
You have the ability to pass variables to the either the JQuery function or the html markup via your controllers. For example:
PageController.php
public function page()
{
return view('template', [
'ajax-function' => "myAjaxFunctionName"
]);
}
template.blade.php
<button type="button" class="btn btn-default"
data-toggle="modal"
data-target="#confirmActionModal"
data-backdrop="false"
data-title="Cancel Subscription"
data-body="Please confirm the cancellation of your subscription."
data-modal-primary-button-text="Cancel Subscription"
data-ajax-function="{!! $ajax-function !!}"
>
Cancel Subscription
</button>
You could therefore use your controller to determine the name of each function you wish to use.