Callback-Funktionen zu WSL-Buttons nutzen

WSL-Buttons mit onBeforeClick-Attribut bieten die Möglichkeit, eigene JavaScript-Funktionen aufzurufen, um z.B. für öffentliche Benutzer die Pflege komfortabler zu gestalten.

Die WSL-Buttons mit onBeforeClick-Attribut (z.B. wsl:buttonUpload, wsl:buttonDelete, etc. (siehe weiterführende Links unten)) ermöglichen es Ihnen, bei Klick über JavaScript Manipulation vorzunehmen.

Folgender Fall demonstriert Ihnen eine mögliche Umsetzung.

Beispiel 1: Hochgeladenes Bild inkl. Verlinkung löschen

Bei Umsetzung eines Pflegeformulares für öffentliche Benutzer (z.B. bei News, Veranstaltungen, o.ä.) soll optional eine vom öffentlichen Benutzer hochgeladene Datei (z.B. Bild) nicht nur physikalisch vom Server, sondern auch die Verlinkung im Artikel gelöscht werden.

Das WSL-Tag buttonDelete erledigt die Aufgabe, daß die Datei vom Server gelöscht wird.
Mit dem onBeforeClick-Attribut können Sie dem Button eine Callback-Funktion (JavaScript) mitgeben, welche individuelle Aktionen zum Button vornimmt. So können Sie über eine Funktion (siehe Beispiel) erreichen, daß zur löschenden Datei auch der Pfad im Objekt (z.B. Vorschaubild-Pfad in wd:thumbnail) aus der Datei gelöscht wird.

Beispiel: Auszug aus einem Objekt-Template (z.B. news.wObject.php) zum wsl:buttonDelete mit onBeforeClick-Attribut

...
  <!-- web:text:start webtagId="thumbnail.news.object" active="1" decorators="default" caption="<xsl:value-of select="php:functionString('wTexts::showTextUser', 'Thumbnail', 'Vorschaubild', 'Imagette')"/>" captionInfo="<xsl:value-of select="php:functionString('wTexts::showTextUser', 'May be displayed in some lists', 'Erscheint in manchen Auflistungen', 'Peut être affiché dans quelques listes')"/>" editor="file" upload="1" preview="picture" previewStyle="width:120px;height:auto" dirType="image" extensions="gif|jpg|jpeg|png" validator="/^(|.*\.(gif|jpg|jpeg|png))$/i" path="/baseAssets/img/news" pathIfEmpty="/baseAssets/img/news" onchange="wEditor.saveDraftAndReload();" inputStyle="width:100%"--><xsl:value-of select="/wd:document/wd:extension/wd:meta/wd:thumbnail/@src"/><!--web:text:stop-->
  <xsl:if test="$wUsertype = 'public'">
  <script type="text/javascript">
    ////////////////////////////////////////////////////////////////
    //
    // Callback, das nach dem Löschen einer Datei aufgerufen wird
    //
    ////////////////////////////////////////////////////////////////
    
    wOnBeforeClickDeleteFile = function(pathFile){
      
      console.log(pathFile);
      var inputFieldWithValue = jQuery('input[value="' + pathFile + '"]');
      if(inputFieldWithValue){
        inputFieldWithValue.val('');
      }

    };
  </script>
  <wsl:buttonDelete style="" path="{/wd:document/wd:extension/wd:meta/wd:thumbnail/@src}" caption="Bild löschen" title="Bild löschen" icon="delete" markId="" class="" questionConfirm="" onclick="" onBeforeClick="wOnBeforeClickDeleteFile('{/wd:document/wd:extension/wd:meta/wd:thumbnail/@src}');"/>
  </xsl:if>
...

Im Beispiel ist die JavaScript-Funktion der Einfachheit halber direkt im Template angegeben. Bei einer Umsetzung bietet es sich allerdings an, die JS-Funktion in einer globalen JS-Datei (z.B. design.js) abzulegen.