Introduction

This reference is a copy of the Responsive Starter Stores Dialog functionality in-code documentation (see /app_sf_responsive/staticfiles/cartridge/static/default/js/dialog.js ).

Javascript Class - Dialog

url: 'http... | jQuery_selector',
callback: false | function() { ... },
formData: false

.options({...});
.create(<url|jQuery_selector>, <callback>);
.open();
.init(<modalHTMLcontent>);

Usage

Initialize a Dialog With a Link, a Clickable <div>, a Button or a Form Submit

Set the data-dialog attribute at a link to open the given href response in a dialog.

<a data-dialog href="http://...">Your Link</a>

Set the data-dialog attribute at a <div> and provide an additional data-dialog-href attribute whose response should be opened in a dialog.

<div data-dialog data-dialog-href="http://...">Your Link</div>

Set the data-dialog attribute at a button to open the surrounding forms action submit response in a dialog.
If an additional data-dialog-action is provided, the button will submit the surrounding form with that action.
With an additional data-dialog-form that has as value, a form ID, the button will trigger a submit of that given form instead of a surrounding one.

<button type="submit" data-dialog data-dialog-action="http://..." data-dialog-form="form_id">

Set the data-dialog attribute at a form to open the given action submit response in a dialog.

<isform data-dialog="true" action="http://..." method="post">

When using <isform> it is important to provide attributes always with a value.

Dialog Content HTML Structure Description

The dialog/modal HTML content that needs to be returned by the given reference is the same as documented by Bootstrap (https://getbootstrap.com/docs/3.4/javascript/#modals) except for the most outer <div class="modal"> hook which is created by the Javascript.

<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" title="<istext key="dialog.close.text">" aria-label="<istext key="dialog.close.text"/>"><span aria-hidden="true">×</span></button>
      <h2 class="modal-title">Modal title</h2>
    </div>
    <div class="modal-body">
        ...
    </div>
    <div class="modal-footer">
        ...
    </div>
  </div>
</div>

This way one can add forms around any parts (e.g. content and footer) of the dialog content, or leave out unwanted parts (e.g. footer).
It is also possible to control for example the dialog size through the HTML of the returned content.

Display the Result of a Dialog Interaction Within the Dialog

To render the result of an interaction again in the current dialog, the data-hijax attribute is introduced.
Adding this attribute to any form or link within the dialog content will result in rendering the response content again in the current dialog.

<a data-hijax href="http://...">Open link in current dialog</a>

<isform data-hijax="true" action=""http://..." method="post">

When using <isform> it is important to provide attributes always with a value.

Display Local Content in a Dialog (non Ajax)

To display local modal content (not getting the content via Ajax from the server) the following HTML structure is used.
The relevant part is providing a jQuery selector within the href instead of an URL.
The jQuery selector has to point to a hidden div that includes the complete <div class="modal-dialog">...</div> part as described earlier.

<a data-dialog href="[data-local-modal-content]">

<div class="hidden" data-local-modal-content>
  <div class="modal-dialog">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Initializing non Standard Dialogs via JavaScript, e.g. with a Callback Function

In case a specific callback function is required once the dialog content is loaded, relying on the data-dialog functionality will not work. In that case a specific handler needs to be used that uses the provided dialog methods.

Example dialog handling via JavaScript:

$(document).on('submit', '[my-form-selector]', function(event){
    event.preventDefault();
    
    Dialog = new dialog();
    Dialog.options({
        formData: form.serialize()
    });
    Dialog.create(form.attr('action'), function() {
        // some callback function code
    });
    Dialog.open();
});

Further Documentation

For further documentation refer to the in-code documentation and comments of /app_sf_responsive/staticfiles/cartridge/static/default/js/dialog.js .