Document Properties
Kbid295V86
Last Modified11-Aug-2020
Added to KB11-Aug-2020
Public AccessEveryone
StatusOnline
Doc TypeReferences
Product
  • ICM 7.6
  • ICM 7.7
  • ICM 7.8
  • ICM 7.9
  • ICM 7.10

Reference - Responsive Starter Store - Dialog

1 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 ).

Info

This functionality is not related to the ICM backoffice dialog control. For details on this functionality refer to Cookbook - Dialog.

2 Javascript Class - Dialog

Options
url: 'http... | jQuery_selector',
callback: false | function() { ... },
formData: false
Methods
.options({...});
.create(<url|jQuery_selector>, <callback>);
.open();
.init(<modalHTMLcontent>);

3 Usage

3.1 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.

3.2 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.

Example dialog HTML content structure
<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.

3.3 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.

3.4 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>

3.5 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:

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();
});

4 Further Documentation

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

Disclaimer

The information provided in the Knowledge Base may not be applicable to all systems and situations. Intershop Communications will not be liable to any party for any direct or indirect damages resulting from the use of the Customer Support section of the Intershop Corporate Web site, including, without limitation, any lost profits, business interruption, loss of programs or other data on your information handling system.

Customer Support
Knowledge Base
Product Resources
Tickets