Support and Documentation

In Styleguide you can simulate AJAX calls so that you can test your client-side JavaScript that processes the server's responses. The underlying concept in Styleguide's implementation of AJAX is that you use a template to submit data in an AJAX session, and you populate another template with the server's response.

The following example shows how to create a form for visitor comments, send the comment to the server, and then display the comment in the original web page.

Step 1: Create directory structure

All the files for your AJAX simulation are under the directory styleguide/, preferably in their own subdirectory. Create the subdirectory in which you'll create the Styleguide files, such as reader-comments/.

Referring to the previous illustration, the five files in the directory reader-comments/ are the minimum you need to simulate an AJAX session in Styleguide. You'll create those files in the following steps.

Step 2: Create a template with a form

Simple AJAX deployments start with an HTML form. In the subdirectory you created for AJAX files (see illustration AJAX directory structure), create the template for the form used to submit a reader comment and display the AJAX response.

{{!-- Filename: ReaderSubmit.hbs --}} 1
<div class="ReaderSubmit">
    <div class="CommentForm">
        <form action="{{formActionUrl}}" method="{{method}}"> 2
            {{#element "body"}}
                <div class="{{elementName}}">
                    <textarea name="{{this}}"></textarea>
                </div>
            {{/element}}
            {{#element "submit"}}
                <button class="{{elementName}}" type="submit">{{this}}</button>
            {{/element}}
        </form>
    </div>
    {{#with "comments"}}
         <div class="CommentForm-comments"> 3
             {{~this~}}
         </div>
    {{/element}}
</div>

At run time, the reader submission form looks as follows.

Figure 169. Template at load time

Step 3: Create a data file for the form template

{
  "_template": "ReaderSubmit.hbs", 1
  "method": "post",
  "formActionUrl": "ReaderResponse.html", 2
  "body": "body",
  "submit": "Submit",
  "comments": "Comment appears here."
}

Step 4: Create template for response

You need to create a template that contains the server's response to the AJAX input.

<div class="ReaderResponse"> 
    {{#with "body"}}
        <div class="ReaderResponse-body"> 1
            {{this}}
        </div>
    {{/with}} 
</div> 

Step 5: Create data file for response template

Create a data file for the template you created in Step 4.

{
  "_template": "ReaderResponse.hbs", 1
  "_hidden": true, 2
  "_wrapper": false, 3
  "body": "Roses are read, violets are blue, most poems rhyme, but this one doesn't." 4
}

Step 6: Create a JavaScript plugin file

Create a JavaScript file as a class that processes the event callbacks you want to capture as well as the response received from the server.

const COMMENTING_SELECTOR = '.ReaderSubmit' 1
const COMMENTING_COMMENTS_SELECTOR = COMMENTING_SELECTOR + '-comments'
const FormData = window.FormData

export default class ReaderSubmit { 2

  constructor (element) { 3
    this.element = element
    this.bindEvents()
  }

  bindEvents () { 4
    this.element.addEventListener('submit', (event) => this.onFormSubmit(event))
  }

  onFormSubmit (event) { 5
    event.preventDefault()
    const form = event.target
    const formData = new FormData(form)

    window.fetch(form.getAttribute('action'), { 6
      method: 'POST',
      body: formData
    }).then((response) => {
      if (response.status !== 200) {
        throw new Error(response.statusText)
      }
      return response.text()
    }).then((returnedComment) => { 7
      document.querySelector(COMMENTING_COMMENTS_SELECTOR).innerHTML = returnedComment
    }
    ).catch((error) => {
      console.log(error)
    })
  }
}

Step 7: Register plugin

import plugins from '<path>/core/PluginRegistry.js' 1
import ReaderSubmit from './reader-comments/ReaderSubmit.js'
plugins.register(ReaderSubmit, '.ReaderSubmit') 2

Step 8: Run Styleguide

Figure 170. Result of AJAX session

Referring to the previous illustration, clicking Submit retrieves the text in the data file ReaderResponse.json that you created in Step 5, and displays it in the div <div class="ReaderSubmit-comments">.