Formulare per AJAX nachladen und absenden

In diesem Beispiel wird ein per ExternInclude eingebundenes Kundenanfrage-Formular (Frage zum Produkt) auf einer bestehenden Shopseite durch Klick auf einen Link per AJAX nachgeladen. Das Absenden des Formulars wird ebenfalls per AJAX realisiert.

Allgemeine Informationen zur Funktionsweise von AJAX-Integrationen finden Sie unter

Wegweiser: AJAX-Funktionen

Der Link zum Nachladen des Formulars wird auf der Produktdetailansicht (ws_product.htm) integriert. Das Template mit dem inkludierten Formular wird so angepasst, dass diese sowohl per AJAX nachgeladen als auch weiterhin normal aufgerufen werden kann.

Ausgangssituation

Es existiert ein Template page_inquiry.htm. Dieses kann durch einen Link auf der Produktdetailansicht (ws_product.htm) aufgerufen werden:

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

Referenz: WS-LoadTpl()

Auf der Seite page_inquiry.htm wird per ExternInclude ein INQUIRY-Formular eingebunden:

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

Referenz: WS-ExternInclude()

Integration

Die Shop-Integration erfolgt in sieben Schritten:

Schritt 1: Einbinden der benötigten JavaScripts im Headbereich des Produkt-Templates

Binden Sie zuerst die WEBSALE JavaScript Systembibliothek inklusive Designkomponente ein. Wenn Sie diese bereits eingebunden haben, achten Sie bitte darauf, mindestens die Version 1.8.1 zu verwenden.

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

Schritt 2:

Diese Container werden je nach Bedarf per JavaScript eingeblendet und deren Inhalt ggf. ausgetauscht.

<div id="ws_inq_loading" style="display:none;">
   <!-- AJAX-Anfrage für Einbindung läuft, Ladegrafik anzeigen. -->
      <img src="loading.gif" alt="loading">
</div>
 
<div id="ws_inq_error" style="display:none;">
      <!-- Die AJAX-Kommunikation konnte nicht durchgeführt werden -->
    Fehler bei AJAX-Kommunikation. 
</div>
 
<div id="ws_inq_content">
    <!-- In diesen Container wird das Kontakt-Formular eingesetzt -->
</div>

Schritt 3:

Platzieren Sie einen Link und legen Sie ein JavaScript-onClick-Event auf diesen Link, wodurch das Nachladen des Formulars ausgelöst wird. In diesem Fall wird das Tag PR-DepVarLink verwendet, um die Daten zum angefragten Produkt auf der INQUIRY-Formularseite beim ersten Aufruf übergeben zu können.

<a href="" onclick="return ws_AJAXloadTemplate('~PR-DepVarLink~&tpl=page_inquiry.htm', '~WS-Charset~', ws_AJAXloadInqStart, wsAJAXloadInqError, 'ws_AJAXloadInqResponseSuccess()', 'wsAJAXloadInqResponseError()');">

Schritt 4:

Erstellen Sie die in Schritt 3 angegebenen JavaScript-Funktionen in der Designkomponente der WEBSALE JavaScript-Systembibliothek.

//Diese Funktion wird aufgerufen, bevor die AJAX-Anfrage zum Nachladen des Formulars abgesetzt wird.
//Mit dieser Funktion wird eine Ladeanzeige realisiert
function ws_AJAXloadInqStart()
{
  //Ausblenden von Inhalts- und Fehlercontainer, Einblenden des Ladecontainers
  $('#ws_inq_error').hide();
  $('#ws_inq_content').hide();
  $('#ws_inq_loading').show();
}

//Diese Funktion wird aufgerufen, wenn das Nachladen des Formulars erfolgreich war
function ws_AJAXloadInqResponseSuccess()
{
  //Ausblenden von Lade- und Fehlercontainer, Einblenden des Inhaltscontainers
  $('#ws_inq_error').hide();
  $('#ws_inq_loading').hide();
  $('#ws_inq_content').show();
}

//Diese Funktion wird aufgerufen, wenn das Nachladen der Eingabefehler nicht erfolgreich war
function wsAJAXloadInqResponseError()
{
  //Ausblenden von Lade- und Fehlercontainers, Einblenden des Inhaltscontainer
  $('#ws_inq_error').hide();
  $('#ws_inq_loading').hide();
  $('#ws_inq_content').show();
}

//Diese Funktion wird aufgerufen, wenn die AJAX-Kommunikation fehlschlug
//Mit dieser Funktion laesst sich ein allgemeiner Kommunikationsfehler (z.B. wenn die Internetverbindung unterbrochen wurde) anzeigen
function wsAJAXloadInqError()
{
  //Ausblenden von Lade- und Inhaltscontainer, Einblenden des Fehlercontainers
  $('#ws_inq_loading').hide();
  $('#ws_inq_content').hide();
  $('#ws_inq_error').show();
}

Schritt 5:

Legen Sie um den Bereich, den Sie im Inhalts-Container des Produkttemplates anzeigen möchten, eine entsprechende AJAX-Klammerung für die WEBSALE Systembibliothek. Klammern Sie die WS-Ajax-Bereiche mit {ST-Ajax}, damit diese nicht angezeigt werden, wenn das Template normal über einen Link aufgerufen wird.

...
   {ST-Ajax}
      <!-- Anfang des per AJAX nachgeladenen Bereichs -->
      <WS-Ajax-ws_inq_content>
   {/ST-Ajax}

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

Schritt 6:

Geben Sie dem FORM-Element auf der Anfrageseite des INQUIRY-Formulars eine eindeutige ID.

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

Schritt 7:

Legen Sie auf alle Submit-Buttons ein JavaScript-onClick-Event, um das Absenden des Formulars per AJAX anzustoßen. Schließen Sie die Submit-Buttons in einen {ST-Ajax} Bereich ein, damit diese nicht verwendet werden, wenn das Template normal über einen Link aufgerufen wird.

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

   {!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, wsAJAXloadInqError, 'ws_AJAXloadInqResponseSuccess()', 'wsAJAXloadInqResponseError()');">
   {/ST-Ajax}
   ...
   </form>

Referenz: WEBSALE JavaScript Systembibliothek

Tags

{ST-Ajax}: Der Bereich wird angezeigt, wenn die Anfrage eine AJAX-Anfrage war.

Referenz: ST-Ajax