Mura.js

Mura.js originally began as a lightweight utility to decouple Mura's dependency on jQuery, a popular JavaScript library. Since its inception, Mura.js has also grown into a JavaScript framework for interacting with Mura's JSON API, which allows Mura CMS to be the main content creation hub within an organization, and allows developers to build their applications as pure JavaScript clients.

Familiar Syntax

If you've ever used jQuery, you'll find the syntax quite familiar.

Selecting Elements

The example below illustrates how to use Mura.js to select multiple DOM elements with the same class, and replace the content of each of the selected elements with custom HTML.

<script>
Mura(function(m) {
  m('.target').each(function() {
  m(this).html('Mura found you!');
  });
});
</script>

Ajax Support

Mura.js includes baked-in Ajax (asynchronous JavaScript and XML) support. The example below illustrates how to perform a simple Ajax request.

<script>
Mura.ajax({
type: 'post',
url: 'https://domain.com/path/',
data: { key: value },
success: function(resp) {
console.log(resp);
},
error: function(resp) {
console.log(resp);
}
});
</script>

Promise Support

Mura.js also includes support for JavaScript promises. See the following examples for more details.

Mura.post() With Promises

<script>
Mura.post('https://domain.com/path/', { key: 'value' })
.then(function(result) {
// handle success
})
  .catch(function(err) {
  // handle error
  };
</script>

Mura.get() With Promises

<script>
Mura.get('https://domain.com/path/')
  .then(function(result) {
  // success
// do something with the result
  Mura('#target').html(result.data.html);
  })
.catch(function(err) {
  // handle error
console.log(err);
});
</script>

Chaining Promises

The following example illustrates how you could handle multiple Ajax requests with Mura.js using JavaScript Promises chaining, and avoid the "pyramid of doom". In other words, avoid nesting your Ajax requests.

<script>
var exampleFunc1 = function() {
return new Promise(function (resolve, reject) {
Mura.post('https://domain.com/path/', { apikey: 'value' })
.then(function(result) {
                if ( result.hasOwnProperty('id') ) {
                    resolve(result);
                } else {
                    reject('result does not contain an id');
                }
})
.catch(function(err) {
reject(err);
});
});
};
var exampleFunc2 = function(id) {
return new Promise(function (resolve, reject) {
Mura.get('https://domain.com/path/?id=' + id)
.then(function(result) {
resolve(result);
})
.catch(function(err) {
reject(err);
});
});
};
exampleFunc1()
.then(function(exampleFunc1Result) {
return exampleFunc2(exampleFunc1Result.id);
})
.then(function(result) {
console.log(result);
})
.catch(function(err) {
console.log(err);
});
</script>

DOM Event Handlers

Mura.js allows for registering DOM event handlers, as shown in the example below.

<script>
Mura('#mybutton').on('click', function(e) {
e.preventDefault();
  console.log(e);
});
</script>

Mura.DOMSelection Class

The DOM selection methods available via Mura.js is handled by the Mura.DOMSelection class. This wraps your selected targets via the Mura() method.

Mura.js allows you to handle selected DOM elements as a single object, or as a collection.

Single Object Example

Mura('#target')
.html('Hello world!');

Collection Example

Mura('.target')
  .each(function() {
  Mura(this)
  .html('Hello world!');
  });

Supported methods may be found under {context}/{SiteID}/js/src/mura.domselection.js.