Reload and submit forms via AJAX - WEBSALE Dokumentation

An inquiry form doesn’t have to sit on a page of its own. With AJAX, you load it with a click into the page the customer is currently on and submit it from there without leaving the page. The example shows a “Question about the product” form that is loaded from the product detail view. The procedure is not limited to INQUIRY, however; it applies to every template you include via WS-ExternInclude().

The form template is built so that it supports both ways. It can still be called via a normal link, even if no JavaScript is running in the browser.

Guide: AJAX functions

Starting point

There is a template page_inquiry.htm that can be reached via a link from the product detail view ws_product.htm.

<a href="~PR-DepVarLink~&tpl=page_inquiry.htm">Frage zum Produkt stellen</a>

The form sits on page_inquiry.htm:

~WS-ExternInclude(https://ihre-domain.de/cgi/inquiry4.cgi?inq4=ihre-shopid&ini=anfrage.config)~

The PR-DepVarLink parameter ensures that the data of the product in question is passed to the form. Without it, the form doesn’t know what the question refers to.

Reference: WS-ExternInclude()

Step 1: Include the JavaScript library

In the head section of the product detail view, include the WEBSALE system library and the associated design component. If it is already included, it must be at least version 1.8.1.

<script src="/$WS/ws_sysdata/js/ws-system-1.8.1.js"></script>
<script src="../js/ws-design-1.8.1.js"></script>

Materials: WEBSALE JavaScript library Guide: Including new JavaScript files

Step 2: Create the three containers

Create three areas on the product detail view. The script always shows exactly one of them.

<div id="ws_inq_loading" style="display:none;">
   <img src="loading.gif" alt="Wird geladen">
</div>

<div id="ws_inq_error" style="display:none;">
   Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.
</div>

<div id="ws_inq_content">
   <!-- hierhin wird das Formular geladen -->
</div>

The content container has the same name as the AJAX bracketing in step 5. The script uses this name to find the place where the loaded content belongs.

Step 3: Set the triggering link

<a href="" onclick="return ws_AJAXloadTemplate(
      '~PR-DepVarLink~&tpl=page_inquiry.htm',
      '~WS-Charset~',
      ws_AJAXloadInqStart,
      ws_AJAXloadInqError,
      'ws_AJAXloadInqResponseSuccess()',
      'ws_AJAXloadInqResponseError()');">
   Frage zum Produkt stellen
</a>

The first two callback functions are passed without quotation marks, the last two as a string with parentheses. This is not a mistake; it is how the library is designed.

Step 4: Write the four callback functions

These functions belong in the design component of the system library, not in the library itself.

// vor dem Absetzen der Anfrage: Ladeanzeige einblenden
function ws_AJAXloadInqStart() {
   $('#ws_inq_error').hide();
   $('#ws_inq_content').hide();
   $('#ws_inq_loading').show();
}

// Nachladen erfolgreich
function ws_AJAXloadInqResponseSuccess() {
   $('#ws_inq_error').hide();
   $('#ws_inq_loading').hide();
   $('#ws_inq_content').show();
}

// Formular kam mit Eingabefehlern zurück
function ws_AJAXloadInqResponseError() {
   $('#ws_inq_error').hide();
   $('#ws_inq_loading').hide();
   $('#ws_inq_content').show();
}

// die Verbindung selbst ist fehlgeschlagen
function ws_AJAXloadInqError() {
   $('#ws_inq_loading').hide();
   $('#ws_inq_content').hide();
   $('#ws_inq_error').show();
}

The third function shows the same container as the second. This is intentional: a form with input errors is not a connection error, and the customer should see their input along with the error messages. Only the fourth function shows the error container.

In this example, loading and submitting use the same four functions. If you want different effects for the two operations, you need two separate sets of functions.

Step 5: Bracket the area to be loaded

On page_inquiry.htm, place an AJAX bracketing around the area that should go into the container. The markers themselves are additionally bracketed with ST-Ajax so that they don’t end up in the source code when the page is called normally via a link.

{ST-Ajax}
   <WS-Ajax-ws_inq_content>
{/ST-Ajax}

~WS-ExternInclude(https://ihre-domain.de/cgi/inquiry4.cgi?inq4=ihre-shopid&ini=anfrage.config)~

{ST-Ajax}
   </WS-Ajax-ws_inq_content>
{/ST-Ajax}

The name in the marker must match the container ID from step 2 exactly. If it doesn’t match, the container stays empty without any error message appearing.

Step 6: Give the form a unique ID

<form action="~FORM-Template(page_inquiry.htm)~" method="POST" id="inq_form">

Step 7: Trigger submission via AJAX

Attach an event to the submit button. Because the button has to look different for a normal call than for an AJAX call, it exists twice.

{!ST-Ajax}
   <input type="submit" name="absenden" value="Frage zum Produkt absenden">
{/!ST-Ajax}

{ST-Ajax}
   <input type="submit" name="absenden" value="Frage zum Produkt absenden"
          onclick="return ws_AJAXsendFormTemplate(
             'inq_form',
             '~WS-Charset~',
             ws_AJAXloadInqStart,
             ws_AJAXloadInqError,
             'ws_AJAXloadInqResponseSuccess()',
             'ws_AJAXloadInqResponseError()');">
{/ST-Ajax}

ST-Ajax applies if the current request was an AJAX request. The negated form !ST-Ajax applies to a normal page call. This way, one template supports both ways without you having to maintain it twice.

The first parameter is the form ID from step 6. If it differs, the function sends nothing and the customer’s click goes nowhere.

Reference: ST-Ajax · WEBSALE JavaScript system library

Tracking

If you use the tracking interface, follow its notes on AJAX-based functions. An area loaded via AJAX does not trigger a page view and is therefore not counted unless you take action. Guide: Description of the tracking interface

Guide: Forms for customer inquiries
Guide: AJAX functions
Guide: Description of the tracking interface

​Starting point

​Step 1: Include the JavaScript library

​Step 2: Create the three containers

​Step 3: Set the triggering link

​Step 4: Write the four callback functions

​Step 5: Bracket the area to be loaded

​Step 6: Give the form a unique ID

​Step 7: Trigger submission via AJAX

​Tracking

​Related topics

Starting point

Step 1: Include the JavaScript library

Step 2: Create the three containers

Step 3: Set the triggering link

Step 4: Write the four callback functions

Step 5: Bracket the area to be loaded

Step 6: Give the form a unique ID

Step 7: Trigger submission via AJAX

Tracking

Related topics