Document Tree
Document Properties
Kbid
295V86
Last Modified
26-May-2023
Added to KB
11-Aug-2020
Public Access
Everyone
Status
Online
Doc Type
References
Product
ICM 7.10
Reference - Responsive Starter Store - Dialog

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.

Javascript Class - Dialog

Options
url: 'http... | jQuery_selector',
callback: false | function() { ... },
formData: false
Methods
.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.

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.

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:

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 .

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.
The Intershop Knowledge Portal uses only technically necessary cookies. We do not track visitors or have visitors tracked by 3rd parties. Please find further information on privacy in the Intershop Privacy Policy and Legal Notice.
Home
Knowledge Base
Product Releases
Log on to continue
This Knowledge Base document is reserved for registered customers.
Log on with your Intershop Entra ID to continue.
Write an email to supportadmin@intershop.de if you experience login issues,
or if you want to register as customer.