Homepage
Main navigation
Main content
Additional information
October Tricks
Login / Sign up
Quality Guidelines
About
GitHub
Propose new content
October CMS resources and help articles
Simple and to the point. Optimized by the community.
×
Login / Sign up
Quality Guidelines
About
GitHub
Propose new content
Edit trick
Changes will be published after manual review
Title
Give your trick a describing title. Do
not
start with «How to...».
Your trick
Keep it short and concise! Markdown is supported.
Creating a modal popup is very easy with Bootstrap. As best practises, you should use on sites about 1-2 modal windows at most inside the body tag. But what to do if you need more modal popups and those should be dynamically in the best case? In this tutorial, we show you how you to implement dynamic modal windows with Ajax in October CMS. Before you can create the modal popup using the Bootstrap Framework, the Bootstrap and jQuery library need to included those in your layout htm file. ``` <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> {% framework extras %} {% scripts %} ``` 1. Create a new component, for example, we name it: AjaxPopup: ``` php artisan create:component Algoriq.Backpack AjaxPopup ``` 2. Then we write our function to call our popup window partial: ``` public function onLoadPopupForm() { return [ 'popup' => $this->renderPartial('@popup.htm') ]; } ``` 3. Bootstrap Modal Button. The following example creates a button. This button (openBtn) triggers the ajax process to show the modal popup window, we will write it in the default.htm component template. ``` <a href="javascript:;" class="btn btn-primary" data-show-popup>Show popup</a> ``` 4. Bootstrap Modal Popup. As next step we will create a new modal popup window template and call it popup.htm in same directory where the default.htm is and put the following code inside this file: ``` <div class="modal fade" id="ajaxPopupForm" tabindex="-1" role="dialog" aria-labelledby="ajaxPopupFormLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="ajaxPopupFormLabel">Ajax Popup</h5> <button type="button" class="close" data-dismiss="modal" data-disable-on-ajax-start data-enable-on-ajax-always aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" data-disable-on-ajax-start data-enable-on-ajax-always> Close </button> <button type="submit" class="btn btn-primary" data-disable-on-ajax-start data-enable-on-ajax-always> Save changes </button> </div> </div> </div> </div> ``` 5. After we have created a button and our modal template, we need to create an ajax handler to utilize our dynamic modal popups and a script where we can initialise this handler. So in the next step, we create two javascript asset files the first one we name it, for example, ajaxUtils.js and put the following code inside this file: ``` $(function() { "use strict"; var ajaxUtils = function() { this.registerHandlers() }; ajaxUtils.prototype.registerHandlers = function() { var requestSenderSelector = 'form, a[data-request], input[data-request], select[data-request]'; $(document).on('ajaxPromise', requestSenderSelector, $.proxy(this.onFormAjaxInit)); $(document).on('ajaxFail', requestSenderSelector, $.proxy(this.onFormAjaxFail)); $(document).on('ajaxDone', requestSenderSelector, $.proxy(this.onFormAjaxSuccess)); $(document).on('shown.bs.modal', 'div.modal', $.proxy(this.onModalDisplayed, this)); $(document).on('hidden.bs.modal', 'div.modal', $.proxy(this.onModalHidden, this)); }; ajaxUtils.prototype.onFormAjaxInit = function(e) { var $form = $(e.currentTarget).closest('form'); if ($(e.target).attr('data-no-ajax-disable-effects') !== undefined) { return } $form.find('[data-disable-on-ajax-start]').prop('disabled', true).attr('disabled', 'disabled') }; ajaxUtils.prototype.onFormAjaxFail = function(e) { var $form = $(e.currentTarget).closest('form'); $form.find('[data-enable-on-ajax-fail], [data-enable-on-ajax-always]').prop('disabled', false).removeAttr('disabled') }; ajaxUtils.prototype.onFormAjaxSuccess = function(e) { var $form = $(e.currentTarget).closest('form'); $form.find('[data-enable-on-ajax-success], [data-enable-on-ajax-always]').prop('disabled', false).removeAttr('disabled') }; ajaxUtils.prototype.onModalDisplayed = function(e) { var $defaultFocus = $('[data-default-focus]', e.currentTarget); $defaultFocus.focus() }; ajaxUtils.prototype.onModalHidden = function(e) { $(e.currentTarget).remove() }; new ajaxUtils() }); ``` 6. Our second asset file with the name ajaxPopup.js should contain the following code: ``` $(function() { var PopupBuilder = function() { function init() { bindEventHandlers() } function bindEventHandlers() { $(document).on('click', 'a[data-show-popup]', onLoadAjaxPopup); } function onLoadAjaxPopup(e) { showAjaxPopup(e) } function showAjaxPopup(e) { $.oc.stripeLoadIndicator.show(); $(e.currentTarget).request('onLoadPopupForm', { data: {}, success: function(data) { $(data.popup).modal({ backdrop: 'static', keyboard: true }); } }).always(function() { $.oc.stripeLoadIndicator.hide(); }); e.preventDefault(); return false } init() }; new PopupBuilder() }); ``` Now you can place those files in your plugin assets folder for example (“assets/js/”) and initialize those assets scripts inside your plugin the following way: ``` public function onRun() { $this->addJs('/plugins/algoriq/backpack/assets/js/ajaxUtils.js'); $this->addJs('/plugins/algoriq/backpack/assets/js/ajaxPopup.js'); } ``` Thank you for your attention I hope you enjoyed this tutorial. However, if you have any suggestions or you probably see some room for improvements, then I would kindly ask you to drop me a line and I will get in touch with you as soon as possible!
References
Add additional online resources to your trick
×
Name
URL
+ Add reference
Topics
If your trick fits more than one topic select multiple. Select at least one.
Backend
Plugin Development
CMS
Twig
Themes
Deployment
Tags
You can use existing tags or create new ones. Add at least one.
Submit for review
Cancel
We use cookies to measure the performance of this website. Do you want to accept these cookies?
Accept
Decline