Documentation
  • Introduction
  • Installation
    • Docker Container
      • Database
      • Deployment Modes
      • Docker Environment Variables
      • Deploy on AWS
      • Deploy on Digital Ocean
    • First Steps After Installation
      • Add New Application
      • Publish Application
      • Use Application
  • Usage
    • Send Request To Endpoint
    • Request From Web Form
    • Web Form Controls Having Multiple Values
    • Web Form With File Upload
    • HTML Snippet embedded with Java Script
    • Authentication
    • Environments
    • Debug Mode
  • Configuration
    • Application Directory Structure
      • endpoints.xml
      • security.xml
      • email-sending-configuration.xml
      • service-portal-endpoint-menu-items.xml
      • Directory: data-source-post-processing
      • Directory: data-sources
      • Directory: data-source-xslt
      • Directory: fonts
      • Directory: http-xslt
      • Directory: parameter-xslt
      • Directory: static
      • Directory: transformers
      • Directory: xml-from-application
    • Endpoint Parameter
    • Types of Endpoints
      • Endpoint to Return XSLT Transformation
      • Endpoint to Return Content From Url
      • Endpoint to Return Static File
      • Endpoint to Return OOXML
      • Endpoint to Redirect Request
      • Forwarding Between Endpoints
      • Conditional Success Action
      • Error Case
    • Data Source Transformation
      • Load Parameter Values as a Data Source
      • Load Data From a Local XML File
      • Load Data from any REST-API
      • Load Data From Databases
      • List AWS S3 keys
      • Load AWS S3 object
      • Additional Useful Data Source Types
      • Transformation Options
      • Data Source Post-Processing
      • Using Parameter Placeholders in Data Sources
      • On-Demand Incrementing Number
      • Writing Transformation Input/Output to AWS S3
    • Parameter Transformation
      • Parameter Transformation Input
      • Parameter Transformation Output
    • Tasks
      • HttpRequest Task
      • Email Task
      • Create Shortlink Task
      • Request Log Task
      • Conditional Tasks
      • Parallel or Subsequent Execution of Tasks
      • Intermediate Values
    • PDF Created With XSLT
      • Embedding Fonts
      • Embedding Images
    • OpenEndpoints XSLT Specifics
Powered by GitBook
On this page
  • HTML Sniplets
  • Load Snippet into Web Page
Export as PDF
  1. Usage

HTML Snippet embedded with Java Script

PreviousWeb Form With File UploadNextAuthentication

Last updated 2 years ago

Even on a static website there is always content that changes regularly and can be loaded from a database or a web service, for example. OpenEndpoints is perfect for converting external content into HTML, which can be seamlessly integrated into your own website.

HTML Sniplets

Build an . Do not use the download-filename attribute in this case.

The generated HTML is inserted directly into the <div>. Therefore, the HTML (generated with XSLT) should not contain a <head> or <body> tag, but actually only the content that is to be inserted!

Set content-type "text/html" in the transformer:

<transformer data-source="...">
    <xslt-file name="..."/>
    <content-type type="text/html; charset=utf-8"/>
</transformer>

Load Snippet into Web Page

Java Script can be used to load the html returned from the endpoint into a <div>.

In this example the script was taken from .

<html>
  <head>
    ...
    <script>
      function includeHTML() {
        var z, i, elmnt, file, xhttp;
        /* Loop through a collection of all HTML elements: */
        z = document.getElementsByTagName("*");

        for (i = 0; i < z.length; i++) {
          elmnt = z[i];
          /*search for elements with a certain atrribute:*/
          file = elmnt.getAttribute("w3-include-html");

          if (file) {
            /* Make an HTTP request using the attribute value as the file name: */
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
              if (this.readyState == 4) {
                if (this.status == 200) {
                  elmnt.innerHTML = this.responseText;
                }
                if (this.status == 404) {
                  elmnt.innerHTML = "Page not found.";
                }

                /* Remove the attribute, and call this function once more: */
                elmnt.removeAttribute("w3-include-html");
                includeHTML();
              }
            };
            xhttp.open("GET", file, true);
            xhttp.send();

            /* Exit the function: */
            return;
          }
        }
      }
    </script>
  </head>
  <body>
    ...
    <div w3-include-html="[path-to-your-endpoint]"></div>
    ...
    <script>
      includeHTML();
    </script>
  </body>
</html>
Endpoint to Return XSLT Transformation
https://www.w3schools.com/lib/w3.js