SemanSemantic-UItic-UI/server/documents/modules/api.html.eco

---
layout      : 'default'
css         : 'api'

title       : 'API'
description : 'API allows elements to trigger actions on a server'
type        : 'UI Behavior'
---

<script src="/javascript/library/serialize-object.js"></script>
<script src="/javascript/library/sinon.js"></script>
<script src="/javascript/api.js"></script>

<%- @partial('header', { tabs: 'behavior' }) %>

<div class="main container">
  <div class="ui active tab" data-tab="overview">
    <div class="ui two column very relaxed stackable grid">
      <div class="row">
        <div class="column">
          <div class="content">
            <div class="ui header"><i class="green check icon"></i>Already Knows Your UI</div>
            <p>Attach an API event to an input, by default, it will occur <code>oninput</code>. Attach an API event to a button, <code>onclick</code>. State management is built in: rate throttling, UI state changes like active, loading, disabled, min/max request lengths and more.</p>
          </div>
        </div>
        <div class="column">
          <div class="content">
            <div class="ui header"><i class="green check icon"></i>Deal with resources not URLs</div>
            <p>Create named actions like <code>'follow user'</code> and have API handle URL templating, parameters, and other annoyances for you.</p>
          </div>
        </div>
      </div>
    <div class="row">
        <div class="column">
          <div class="content">
            <div class="ui header"><i class="green check icon"></i>State Management</div>
            <p>Easily tie server events like AJAX loading elements using intuitive defaults based on the context inside your interface. Set maximum <b>and minimum</b> request times, toggle between UI states, and easily sync state between multiple elements with the same API actions.</p>
          </div>
        </div>
        <div class="column">
          <div class="content">
            <div class="ui header"><i class="green check icon"></i>Server Traces For Humans</div>
            <p>View your API request as it occurs in your web console, get errors if required url variables are missing, and useful performance metrics.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="ui intro tab" data-tab="usage">
    <div class="fixed column">
      <div class="demo content ui sticky">
        <div class="ui fluid card">
          <div class="image">
            <img src="/images/avatar/large/stevie.jpg">
          </div>
          <div class="content">
            <a class="header">Stevie Feliciano</a>
            <div class="meta">
              <span class="date">Joined in Sep 2014</span>
            </div>
          </div>
          <div class="ui bottom attached follow button" data-id="22">Follow</div>
        </div>
      </div>
    </div>
    <div class="examples">

      <h2 class="ui dividing header">Defining Your API</h2>

      <div class="no example">
        <h4 class="ui header">Setting API Endpoints</h4>
        <p><b>API</b> works best by defining named API actions which can be converted to URLs for each request.</p>
        <p>You must define your endpoints once in your application before making requests. Usually this is done in a central configuration file included on each page.</p>
        <p>URLs listed in your API can include <b>required parameters</b> and <b>optional parameters</b> which may be adjusted for each call.</p>
        <h5 class="ui header">Required Parameters</h5>
        <div class="ui bulleted list">
          <div class="item">Uses format <code>{variable}</code></div>
          <div class="item">Will abort the request if they cannot be found.</div>
        </div>
        <h5 class="ui header">Optional Parameters</h5>
        <div class="ui bulleted list">
          <div class="item">Uses format <code>{/variable}</code></div>
          <div class="item">Will abort the request if they cannot be found.</div>
          <div class="item">Will be removed from the url automatically if not available.</div>
          <div class="item">Any preceding slash before an optional parameter will be removed from the URL, allowing you to include them in resource paths.</div>
        </div>
        <div class="code" data-type="javascript">
          /* Define API endpoints once globally */
          $.fn.api.settings.api = {
            'get followers' : '/followers/{id}?results={count}',
            'create user'   : '/create',
            'add user'      : '/add/{id}',
            'follow user'   : '/follow/{id}',
            'search'        : '/search/?query={value}'
          };
        </div>
      </div>
      <div class="no example">
        <h4 class="ui header">Working with URLs</h4>
        <p>Named API actions are offered for convenience and maintanability, but are not required. You can also specify the url in each request, templated or not.</p>
        <div class="code">
        $('.search.button')
          .api({
            url: 'http://www.google.com?q={value}'
          })
        ;
        </div>
      </div>

      <h2 class="ui dividing header">Querying API Actions</h2>

      <div class="ui top attached info message">
        <div class="ui header">Open Your Web Console</div>
        The following examples work best while viewing logs in your web console.  This experienced is optimized for Firebug, but will also appear in webkit browsers <a href="https://code.google.com/p/chromium/issues/detail?id=306120" target="_blank">with minor issues.</a>
      </div>
      <div class="ui bottom attached message">
        API requests for the following demos have been faked using <a href="http://sinonjs.org/">SinonJS</a> to avoid rate throttling from public APIs. No actual data is returned.
      </div>
      <div class="no example">
        <h4 class="ui header">Attaching API Events</h4>

        <p>Any element can have an API action attached directly to it. By default the action will occur on the most appropriate event for the type of element. For example a button will assume <code>onclick</code> or an input <code>oninput</code>, or a form <code>onsubmit</code>.</p>

        <div class="evaluated code">
        $('.follow.button')
          .api({
            action: 'follow user'
          })
        ;
        </div>
        <div class="ui horizontal divider">Or</div>
        <div class="code" data-type="html">
          <div class="ui follow button" data-action="follow user">
            Follow
          </div>
        </div>
        <div class="code">
        $('.follow.button')
          .api()
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Specifying DOM Events</h4>
        <p>If you need to override what action an API event occurs on you can use the <code>on</code> parameter.</p>
        <div class="code" data-demo="true">
        $('.follow.button')
          .api({
            action: 'follow user',
            on: 'mouseenter'
          })
        ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Calling Immediately</h4>
        <p>If you require API action to occur immediately use <code>on: 'now'</code>. This will still trigger the same state updates to the invoked element, but will occur immediately.</p>
        <p>
        <div class="code" data-demo="true">
        $('.follow.button')
          .api({
            action: 'follow user',
            on: 'now'
          })
        ;
        </div>
        <p>Keep in mind passing a new settings object will destroy all previously attached events. If you want to preserve the events, you can trigger a new request with the the <code>query</code> behavior</p>
        <div class="code" data-demo="true">
        // set-up API button with events
        $('.follow.button')
          .api({
            action: 'follow user'
          })
        ;
        // do an immediate query
        $('.follow.button')
          .api('query')
        ;
        </div>
      </div>

      <h2 class="ui dividing header">Setting-up Requests</h2>

      <div class="no example">
        <h4 class="ui header">URL Variables</h4>
        <p>If your API urls include templated variables they will be replaced during your request by one of four possible ways (listed in order of inheritance).</p>
      </div>

      <div class="no example">
        <h4 class="ui header">Automatically Routed Data</h4>
        <p>Some special values are available for routing without additional set-up</p>
        <table class="ui definition table">
          <thead>
            <tr>
              <th>Variable</th>
              <th>Description</th>
              <th>Available for</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>text</td>
              <td>current text value of element</td>
              <td>All DOM elements</td>
            </tr>
            <tr>
              <td>value</td>
              <td>current input value of element</td>
              <td>All input elements</td>
            </tr>
          </tbody>
        </table>
        <div class="code" data-preview="true">
          <div class="ui search icon input">
            <i class="search icon"></i>
            <input type="text" class="search">
          </div>
        </div>
        <div class="evaluated code" data-type="javascript">
          $.fn.api.settings.api.search = '/search/?query={value}';

          $('.search input')
            .api({
              action: 'search',
              // what receives state class names
              stateContext: '.ui.input'
            })
          ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Request Information in Data Attributes</h4>
        <p>You can include url values as html5 metadata attributes</p>
        <p>This is often easiest to include unique url data for each triggering element, for example, many follow buttons will trigger the same endpoint, but each will have its own user id.</p>
        <p>As a convenience, you can also specify your API action in metadata, to allow you to instantiate multiple types of api actions in one statement.</p>
        <div class="ui ignored warning message">
          Only variables specified in your API's URL will be searched for in metadata.
        </div>
        <div class="code" data-type="html">
          <div class="ui button" data-action="follow user" data-id="11">
            Follow 1
          </div>
          <div class="ui button" data-action="add user" data-id="11">
            Add Stevie
          </div>
          <div class="ui button" data-action="follow user" data-id="22">
            Follow Jenny
          </div>
          <div class="ui button" data-action="add user" data-id="22">
            Add Jennie
          </div>
        </div>
        <div class="code" data-type="javascript">
          $('.follow.button')
            .api()
          ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Data specified in Javascript</h4>
        <p>URL variable, and GET/POST data can be specified at run-time in the javascript object </p>
        <div class="code" data-type="javascript">
          $('.follow.button')
            .api({
              action : 'follow user',
              method : 'POST',
              // Substituted into URL
              urlData: {
                id: 22
              },
              // passed via POST
              data: {
                name: 'Joe Henderson'
              }
            })
          ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Adjusting Request in Before Send</h4>
        <p>All run settings, not just url data, can be adjusted in a special callback <code>beforeSend</code> which occurs before the API request is sent.</p>
        <div class="ui info message">
          An additional callback <code>beforeXHR</code> lets you modify the XHR object before sending. This is different than beforeSend.
        </div>
        <div class="code" data-type="javascript">
          $('.follow.button')
            .api({
              action: 'follow user',
              beforeSend: function(settings) {
                settings.urlData = {
                  id: 22
                };
                return settings;
              }
              // basic auth login
              beforeXHR: function(xhr) {
                xhr.setRequestHeader ('Authorization', 'Basic XXXXXX');
              }
            })
          ;
        </div>
      </div>

      <div class="no example">
        <h4 class="ui header">Cancelling Requests</h4>
        <p>BeforeSend can also be used to check for special conditions for a request to be made. It the <code>beforeSend</code> callback returns false, the request will be cancelled.</p>
        <div class="code" data-type="javascript" data-demo="true">
          // set somewhere in your code
          window.isLoggedIn = false;

          $('.follow.button')
            .api({
              action: 'follow user',
              // cancels request
              beforeSend: function(settings) {
                return isLoggedIn;
              }
            })
          ;
        </div>
      </div>

      <h2 class="ui dividing header">Sending Data</h2>

      <div class="example">
        <h4 class="ui header">Automatically Routed Data</h4>
        <p>Calling API on any element inside of a form, will automatically include serialized form content in your request when using a special setting <code>serializeForm</code>, or using a form as the <code>stateContext</code>.</p>
        <div class="ui ignored message">
          Using <code>serializeForm</code> requires including the serialize-object dependency.
        </div>
        <p>Unlike jQuery's serialize, data will be serialized as a javascript object using  <a href="https://github.com/macek/jquery-serialize-object" target="_blank">macek's serialize object</a>.
        <h5 class="ui header">Benefits of Structured Data</h5>
        <ul class="ui list">
          <li>Serialized Form Data can be modified in javascript in <code>beforeSend</code></li>
          <li>Structured data can be used by using names like <code>name="user[name]"</code> in your form</li>
          <li>Form data will automatically be converted to useful values, for instance, checkbox to to <code>boolean</code> values.</li>
        <p>
        <form class="ui form">
          <div class="two fields">
            <div class="field">
              <label>Name</label>
              <div class="two fields">
                <div class="field">
                  <input type="text" name="name[first]" placeholder="First Name">
                </div>
                <div class="field">
                  <input type="text" name="name[last]" placeholder="Last Name">
                </div>
              </div>
            </div>
            <div class="field">
              <label>Gender</label>
              <div class="ui selection dropdown">
                <input type="hidden" name="gender">
                <div class="default text">Gender</div>
                <i class="dropdown icon"></i>
                <div class="menu">
                  <div class="item" data-value="male">Male</div>
                  <div class="item" data-value="female">Female</div>
                </div>
              </div>
            </div>
          </div>
          <div class="two fields">
            <div class="required field">
              <label>Username</label>
              <div class="ui icon input">
                <input type="text" name="username" placeholder="Username">
                <i class="user icon"></i>
              </div>
            </div>
            <div class="required field">
              <label>Password</label>
              <div class="ui icon input">
                <input type="password" name="password">
                <i class="lock icon"></i>
              </div>
            </div>
          </div>
          <div class="ui submit button">Submit</div>
        </form>
        <div class="evaluated code" data-type="javascript">
          $('form .submit.button')
            .api({
              action: 'create user',
              serializeForm: true,
              beforeSend: function(settings) {
                // open console to inspect object
                console.log(settings.data);
                return settings;
              }
            })
          ;
        </div>
      </div>


      <div class="no example">
        <h4 class="ui header">Included in Javascript</h4>
        <p>POST or GET data can be included, when setting up API requests, through automatic inclusion, or during the beforeSend callback. This data will be joined together</p>
        <div class="code" data-type="javascript">
          $('.form .submit')
            .api({
              action: 'create user',
              serializeForm: true,
              data: {
                sessionID: '232'
              },
              beforeSend: function(settings) {
                settings.data.token = window.generateToken();
                // will include serialized data, session id, and token
                return settings;
              }
            })
          ;
        </div>
      </div>

      <h2 class="ui dividing header">Server Responses</h2>

      <div class="no example">
        <h4 class="ui header">Determining Success</h4>
        <p>API is designed to work with APIs that return <code>JSON</code> objects. Instead of providiing success and failure callbacks based on the HTTP response of the request. A request is considered succesful only if the returned JSON value passes a <code>successTest</code>.</p>
        <p>For example you might expect all successful JSON responses to return a top level property signifying the success of the response<p>
        <div class="code" data-type="json" data-title="Example Server Response">
        {
          "success": true,
          "message": "We've retreived your data from the server"
          "data": {
            // payload here
          }
        }
        </div>
        <p>The success test function recieves the servers json response, and returns whether the result should be considered successful. Succesful results will trigger <code>onSuccess</code>, invalid results <code>onFailure</code>.<p>
        <p><code>onError</code> will only trigger on <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XHR</a> errors (except due to page navigation like clicking a link), but not invalid JSON responses.</p>
        <div class="code" data-type="javascript">
        $('.follow.button')
          .api({
            successTest: function(response) {
              return response.success || false;
            }
            onSuccess: function() {
              // valid response and response.success = true
            },
            onFailure: function() {
              // valid response but response.success = false
            },
            onError: function() {
              // invalid response
            },
            onAbort: function() {
              // user cancelled request
            }
          })
        ;
        </div>
      </div>


      <h2 class="ui dividing header">Controlling State</h2>

      <div class="no example">
        <h4 class="ui header">API State Management</h4>

        <p>Many elements like <a href="/elements/button.html">button</a>, <a href="/elements/input.html">input</a>, and <a href="/collections/form.html">form</a> have loading, disabled, and active states defined.</p>

        <p>States adjust class names on the triggering element or on the element specified by <code>settings.stateContext</code>.</p>
        <p>Using <code>stateContext</code> allows you to easily do things like, trigger a loading state on a form when a submit button is pressed.</p>

        <h5 class="ui header">States Included in API Module</h5>
        <table class="ui definition table">
          <thead>
            <tr>
              <th>State</th>
              <th>Description</th>
              <th>API event</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>loading</td>
              <td>Indicates a user needs to wait</td>
              <td>XHR has initialized</td>
            </tr>
            <tr>
              <td>error</td>
              <td>Indicates an error has occurred</td>
              <td>XHR Request returns error (does not trigger onAbort caused by page change, or if successTest fails). Stays visible for <code>settings.errorDuration</code></td>
            </tr>
          </tbody>
        </table>
      </div>

      <div class="no example">
        <h4 class="ui header">Coupling with State Module</h4>
        <p>Initializing an API action with the state module gives you more granular control over UI states, like setting an activated or de-activated state and the ability to adjust text values for each state:</p>

        <p>
          For additional examples of the possibilities available with state behaviors check the <a href="#">state module documentation</a>
        </p>

        <div class="code" data-demo="true">
        $('.follow.button')
          .api({
            action: 'follow user'
          })
          .state({
            text: {
              inactive   : 'Follow',
              active     : 'Followed',
              deactivate : 'Unfollow',
              flash      : 'Added follower!'
            }
          })
          .state('setting', 'onActivate', function() {
            $(this).state('flash text');
          })
        ;
        </div>
        <h5 class="ui header">States Included in State Module</h5>
        <table class="ui definition table">
          <thead>
            <tr>
              <th>State</th>
              <th>Description</th>
              <th>Occurs on</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>inactive</td>
              <td>Default state</td>
              <td></td>
            </tr>
            <tr>
              <td>active</td>
              <td>Selected state</td>
              <td>Toggled on succesful API request</td>
            </tr>
            <tr>
              <td>activate</td>
              <td>Explains activating action</td>
              <td>On hover if inactive</td>
            </tr>
            <tr>
              <td>deactivate</td>
              <td>Explains deactivating action</td>
              <td>On hover if active</td>
            </tr>
            <tr>
              <td>hover</td>
              <td>Explains interaction</td>
              <td>On hover in all states, overrides activate/deactivate</td>
            </tr>
            <tr>
              <td>disabled</td>
              <td>Indicates element cannot be interacted</td>
              <td>Triggered programatically. Blocks API requests.</td>
            </tr>
            <tr>
              <td>flash</td>
              <td>Text-only state used to display a temporary message</td>
              <td>Triggered programatically</td>
            </tr>
            <tr>
              <td>success</td>
              <td>Indicates user action was a success</td>
              <td>Triggered programatically</td>
            </tr>
            <tr>
              <td>warning</td>
              <td>Indicates there was an issue with a user action</td>
              <td>Triggered programatically</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </div>

  <div class="ui tab" data-tab="examples">
    <p>Needs to be written still...</p>
    <!-- Search Example !-->


    <!-- Tab Manual Example !-->


    <!-- Tab Auto Example !-->


  </div>


  <div class="ui tab" data-tab="settings">
    <h2 class="ui dividing header">
      API
    </h2>

    <h4 class="ui header">
      Behavior
    </h4>
    <table class="ui sortable celled definition table">
      <thead>
        <th class="three wide"></th>
        <th class="three wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>on</td>
          <td>auto</td>
          <td>When API event should occur</td>
        </tr>
        <tr>
          <td>filter</td>
          <td>
            <div class="code">
              .disabled
            </div>
          </td>
          <td>Selector filter for elements that should not be triggerable</td>
        </tr>
        <tr>
          <td>stateContext</td>
          <td>this</td>
          <td>UI state will be applied to this element, defaults to triggering element.</td>
        </tr>
        <tr>
          <td>defaultData</td>
          <td>true</td>
          <td>Whether to automatically include default data like {value} and {text}</td>
        </tr>
        <tr>
          <td>serializeForm</td>
          <td>false</td>
          <td>Whether to serialize closest form and include in request</td>
        </tr>
        <tr>
          <td>loadingDuration</td>
          <td>0</td>
          <td>Minimum duration to show loading indication</td>
        </tr>
        <tr>
          <td>errorDuration</td>
          <td>2000</td>
          <td>Duration in milliseconds to show error state after request error.</td>
        </tr>
      </tbody>
    </table>

    <h4 class="ui header">
      Request Settings
    </h4>
    <table class="ui sortable celled definition table">
      <thead>
        <th class="three wide"></th>
        <th class="three wide">Default</th>
        <th>Description</th>
        <th>Possible Values</th>
      </thead>
      <tbody>
        <tr>
          <td>action</td>
          <td></td>
          <td>Named API action for query, originally specified in $.fn.settings.api</td>
          <td>String or false</td>
        </tr>
        <tr>
          <td>url</td>
          <td>false</td>
          <td>Templated URL for query, will override specified action</td>
          <td>String or false</td>
        </tr>
        <tr>
          <td>urlData</td>
          <td>false</td>
          <td>Variables to use for replacement</td>
          <td></td>
        </tr>
        <tr>
          <td>method</td>
          <td>get</td>
          <td>Method for transmitting request to server</td>
          <td>post, get</td>
        </tr>
        <tr>
          <td>dataType</td>
          <td>JSON</td>
          <td>Expected data type of response </td>
          <td>xml, json, jsonp, script, html, text</td>
        </tr>
        <tr>
          <td>data</td>
          <td>{}</td>
          <td>POST/GET Data to Send with Request</td>
          <td></td>
        </tr>
      </tbody>
    </table>

    <h4 class="ui header">
      Callbacks
    </h4>

    <table class="ui sortable celled definition table">
      <thead>
        <th class="three wide"></th>
        <th class="three wide">Context</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>beforeSend(settings)</td>
          <td>initialized element</td>
          <td>Allows modifying settings before request, or cancelling request</td>
        </tr>
        <tr>
          <td>beforeXHR(xhrObject)</td>
          <td></td>
          <td>Allows modifying XHR object for request</td>
        </tr>
        <tr>
          <td>onSuccess(response, element)</td>
          <td>state context</td>
          <td>Callback on response object that passed <code>successTest</code></td>
        </tr>
        <tr>
          <td>onFailure(response, element)</td>
          <td>state context</td>
          <td>Callback on response object that fails <code>successTest</code></td>
        </tr>
        <tr>
          <td>onError(errorMessage, element)</td>
          <td>state context</td>
          <td>Callback on server error from returned status code, or XHR failure.</td>
        </tr>
        <tr>
          <td>onAbort(errorMessage, element)</td>
          <td>state context</td>
          <td>Callback on abort caused by user clicking a link or manually cancelling request</td>
        </tr>
        <tr>
          <td>onComplete(response, element)</td>
          <td>state context</td>
          <td>Callback on request complete regardless of conditions</td>
        </tr>
      </tbody>
    </table>

    <h2 class="ui dividing header">
      Module
    </h2>

    <p>These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.</p>

    <table class="ui sortable celled definition table">
      <thead>
        <th></th>
        <th class="six wide">Default</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>API</td>
          <td>Name used in log statements</td>
        </tr>
        <tr>
          <td>namespace</td>
          <td>api</td>
          <td>Event namespace. Makes sure module teardown does not effect other events attached to an element.</td>
        </tr>
        <tr>
          <td>regExp</td>
          <td>
            <div class="code" data-type="css">
            regExp  : {
              required: /\{\$*[A-z0-9]+\}/g,
              optional: /\{\/\$*[A-z0-9]+\}/g,
            }
            </div>
          </td>
          <td>Regular expressions used for template matching</td>
        </tr>
        <tr>
          <td>selector</td>
          <td>
            <div class="code" data-type="css">
            selector: {
              form: 'form'
            }
            </div>
          </td>
          <td>Selectors used to find parts of a module</td>
        </tr>
        <tr>
          <td>className</td>
          <td>
            <div class="code">
            className: {
              loading : 'loading',
              error   : 'error'
            }
            </div>
          </td>
          <td>Class names used to determine element state</td>
        </tr>
        <tr>
          <td>metadata</td>
          <td>
            <div class="code">
            metadata: {
              action  : 'action',
              request : 'request',
              xhr     : 'xhr'
            }
            </div>
          </td>
          <td>Metadata used to store xhr and response promise</td>
        </tr>
        <tr>
          <td>debug</td>
          <td>false</td>
          <td>Debug output to console</td>
        </tr>
        <tr>
          <td>performance</td>
          <td>false</td>
          <td>Show <code>console.table</code> output with performance metrics</td>
        </tr>
        <tr>
          <td>verbose</td>
          <td>false</td>
          <td>Debug output includes all internal behaviors</td>
        </tr>
        <tr>
          <td>errors</td>
          <td colspan="2">
            <div class="code">
            // errors
            error : {
              beforeSend        : 'The before send function has aborted the request',
              error             : 'There was an error with your request',
              exitConditions    : 'API Request Aborted. Exit conditions met',
              JSONParse         : 'JSON could not be parsed during error handling',
              legacyParameters  : 'You are using legacy API success callback names',
              missingAction     : 'API action used but no url was defined',
              missingSerialize  : 'Required dependency jquery-serialize-object missing, using basic serialize',
              missingURL        : 'No URL specified for api event',
              noReturnedValue   : 'The beforeSend callback must return a settings object, beforeSend ignored.',
              parseError        : 'There was an error parsing your request',
              requiredParameter : 'Missing a required URL parameter: ',
              statusMessage     : 'Server gave an error: ',
              timeout           : 'Your request timed out'
            }
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

</div>
</body>
</html>