intercooler/www/attributes/ic-append-from.html

Making AJAX as easy as anchor tags

---
layout: default
nav: attributes > ic-append-from
---

<div class="container">

  <div class="row">
    <div class="col-md-12">

      <h2><code>ic-append-from</code> - The Append From Attribute</h2>

      <h3>Summary</h3>

      <p>The <code>ic-append-from</code> attribute binds a given HTML element's children to a URL.  It does not
        cause any requests to happen by itself, but it can respond to events caused by other attributes.</p>

      <p>When Intercooler issues a request for an element with an <code>ic-append-from</code>, it will issue a
        <code>GET</code>
        and will append the resulting HTML fragment as children of the current element. If you wish to limit the total
        number of children on of an element, you can use the <a
          href="ic-limit-children.html"><code>ic-limit-children</code></a>
        attribute.</p>

      <h3>Syntax</h3>

      <p>The value of the attribute should be a valid relative path (e.g. <code>ic-append-from="/foo/bar"</code>).</p>

      <h3>Dependencies</h3>

      <p><code>ic-append-from</code> implies a dependency on its path, and Intercooler will issue requests for elements
        whenever it detects an action that the path depends on. See <a href="/dependencies.html">Dependencies</a> for
        more information.</p>


      <h3>Example</h3>

      <p>Here is a simple example, using a poll interval to update:</p>

      <pre>
  &lt;ul ic-append-from="/list_src" ic-poll="2s" ic-limit-children="5">&lt;/ul>
      </pre>


      <div class="live-demo">
        <script>
          (function () {
            $.mockjax({
              url: '/list_src',
              response: function () {
                function randIp() {
                  function getOctet() {
                      return Math.round(Math.random()*255);
                  }
                  //generate the ipaddress
                  return getOctet() + '.' + getOctet() + '.' + getOctet() + '.' + getOctet();
                }
                this.responseText = "<li>Being looked at by " + randIp() + "</li>";
              }
            });
          })();
        </script>
          <ul ic-append-from="/list_src" ic-poll="2s" ic-limit-children="5"></ul>
      </div>

    </div>
  </div>
</div>