Sandbox: JavaScript

Loads content via Request.HTML into the specified target. Automatically instantiates any data-behavior filters in the response.

Basic Ajax functionality

<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"injectBottom","target":"!body ul#demoList"}" data-trigger="ajax" href="/sandbox/echo_html?html=%3Cli%3EI%27m+a+list+item+added+to+the+bottom+of+the+list%21%3C%2Fli%3E">Add to bottom of list.</a>
<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"injectTop","target":"!body ul#demoList"}" data-trigger="ajax" href="/sandbox/echo_html?html=%3Cli%3EI%27m+a+list+item+added+to+the+top+of+the+list%21%3C%2Fli%3E">Add to top of list.</a>
<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"injectBefore","target":"!body ul#demoList li#foo"}" data-trigger="ajax" href="/sandbox/echo_html?html=%3Cli%3EI%27m+a+list+item+added+before+%23foo%21%3C%2Fli%3E">Before #foo</a>
<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"injectAfter","target":"!body ul#demoList li#foo"}" data-trigger="ajax" href="/sandbox/echo_html?html=%3Cli%3EI%27m+a+list+item+added+after+%23foo%21%3C%2Fli%3E">After #foo</a>
<ul id="demoList" class="box">
  <li id="foo">I have the id "foo"</li>
</ul>

Replace the paragraph below

I'm a simple paragraph with the id 'par'.

<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"replace","target":"!body #par"}" data-trigger="ajax" href="/sandbox/echo_html?html=%3Cp+id%3D%27par%27+class%3D%27par%27%3EI%27m+a+%3Cb%3Enew%3C%2Fb%3E+paragraph+with+the+id+%27par%27.%3C%2Fp%3E%3Cp+class%3D%27par%27%3EAnd+I%27m+another+paragraph+%28without+an+id%29.%3C%2Fp%3E">Replace the paragraph below</a>
  <p id="par" class='par'>I'm a simple paragraph with the id 'par'.</p>

Update the content of the div below.

I'm a paragraph of some stuff

<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"update","target":"!body #update"}" data-trigger="ajax" href="/sandbox/echo_html?html=%3Cp%3EI%27m+%3Cb%3Edifferent%3C%2Fb%3E+stuff%21%3C%2Fp%3E%3Cp%3ESo+am+I%21%3C%2Fp%3E">Update the content of the div below.</a>
<div id="update">
  <p>I'm a paragraph of some stuff</p>
</div>

The difference between the replace and update examples is that the replace example replaces a specific DOM element with a response, while update empties the target and replaces all its children with the response.


Behavior Integration

<a class="btn btn-default" data-ajax-options="{"useSpinner":true,"action":"replace","target":"!body #tip"}" data-trigger="ajax Stop" href="/sandbox/echo_html?html=%3Ca+data-behavior%3D%27BS.Tooltip%27+title%3D%27The+NEW+tooltip%21%27%3Ethis+NEW+link+has+a+tip%3C%2Fa%3E">Replace the tip element below.</a><br/>
<p><a id="tip" data-behavior="BS.Tooltip" title="The tootlip!">this link has a tip</a></p>

Related Documentation

Note: Not all links in these work.

Delegator Trigger: ajax

Loads the response of a link's URL into a specified target.

Example

<a href="/get/list/item.php"
    data-trigger="ajax"
    data-ajax-options="
        'action': 'injectBottom',
        'target': '!body ul'
    ">Add to bottom of list.</a>
<ul>
    <li>The response from the link will be injected after this list item.</li>
</ul>

The above example will load the response from the links HREF (get/list/item.php) and load it into the specified target at the bottom.

Options

  • target - (string; required) - a selector which will return the DOM element to update. Use selectors provided by Slick to select parents and sibling trees.
  • action - (string; optional) - the action to take on the target. Any of the options described below.
  • method - (string; optional) - the HTML verb to use; defaults to get.
  • filter - (string; optional) - a selector to run against the response whose response will be used to update the DOM instead of the full response.
  • loadOnce - (boolean; optional) - if true, the link will only load content into its target once. Subsequent clicks are ignored (a console warning is displayed).
  • throttle - (number; optional) - delays the ajax request and kills it if a subsequent request is made within this time frame (in ms). Defaults to 0 (i.e. no throttle).
  • encode - (string; optional) - the selector to find an element to URL encode with the request at the time of invocation. Specify a selector to an input and only that input is sent. Any other DOM element encodes all of its children to send. Allows for the special selector "self" which encodes the element with the trigger on it.
  • useSpinner - (boolean; optional) - if true uses an instance of the MooTools More Spinner class on the target.
  • spinnerTarget - (string; optionals) - selector to find an alternate target for the spinner than the ajax update target.
  • evalScripts - (boolean; optional) - if true evaluates scrips in the response.
  • href - (string; optional) - specifies the url to fetch; defaults to the href property on the element.
  • updateHistory - (boolean; optional) - if true changes the url of the document upon request success. Uses the api value for historyURI if set, otherwise the api value for href if it is set, and finally defaults to the href property of the element.
  • historyURI - (string; optional) - if set and the api value for updateHistory is true this value is used for the new location of the page.

Actions

  • replace - replaces the target with the response.
  • update - empties the target and injects the response into it
  • injectTop - inserts the response at the top of the target before any of it's other children.
  • injectBottom - inserts the response at the bottom of the target after any of it's other children.
  • injectBefore - inserts the response before the target.
  • injectAfter - inserts the response after the target.
  • ignore - response is discarded.

Notes

If you're using Behavior with Delegator, you should connect the two so that the response can be run through Behavior's filtering mechanisms. See the documentation for Delegator.