Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Updates elements on a page. Nice for updating values retrieved with ajax.
JavaScript
Branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
ElementUpdater.js
README.md

README.md

ElementUpdater

Updates elements on a page. Nice for updating values retrieved with ajax.

Usage

You have 150 followers.

<p>You have <span data-update-id="twitter" data-update-key="followers">150</span> followers.</p>
var data = {
  followers: 200
};

var updater = new ElementUpdater('twitter').update(data);

Will result in:

You have 200 followers.

<p>You have <span data-update-id="twitter" data-update-key="followers">200</span> followers.</p>

Advanced Usage

ElementUpdater supports advanced finders, inspired by JSONQuery but more logically suited and simplified for this purpose. It's easy to learn, don't worry.

The format of your data-update-key attributes can be a lot like jQuery:

  • people[name='Joe'] will find the object in the people array with a 'name' of 'Joe
  • people[name="Joe"].phone_numbers[type="Work"] works too
  • Or, you can keep it simple and just do people[joe] or people.joe.
<p>Joe's mother's name is <span data-update-id="joe" data-update-key="mothers[child='Joe'].name"></span></p>
var data = {
  mothers: [{
    child: 'Joe',
    name: 'Barbara'
  }]
};

var updater = new ElementUpdater('joe').update(data);

Joe's mother's name is Barbara.

<p>Joe's mother's name is <span data-update-id="joe" data-update-key="mothers[child='Joe'].name">Barbara</span></p>

Usage with AJAX

$.getJSON('http://example.com/data.json', function(data) {
  // data = {cubs: 1, red_sox: 0}
  new ElementUpdater('game-score').update(data);
});
<ul id="game-score">
  <li>CHC: <span data-update-id="game-score" data-update-key="cubs">0</li>
  <li>BOS: <span data-update-id="game-score" data-update-key="red_sox">0</li>
</ul>
Something went wrong with that request. Please try again.