Github

Navigation & AJAX

Briz has 2 main attributes, namely data-ajax and data-nav.

data-ajax

data-ajax is used to intercept form requests and forward them asynchronously through Briz’s internals, then perform a partial HTML swap. This simplifies the process for developers by eliminating the need to write JavaScript and simply using the data-ajax attribute.

Example

<form data-ajax action="/user" method="POST">
  <input type="text" name="name" />
  <input type="text" name="address" />
  <button type="submit">Add User</button>
</form>

<div data-swap="result">
  ...waiting response
</div>

The form above will automatically intercept the request and forward it via Ajax to the server. It’s also crucial to provide a name in the <input> so it can be read by the server. This prevents the page from reloading but instead replaces it with the data-swap element from the server’s response.

You can only use data-ajax in the <form> tag, because only the <form> tag can send an http request to the server.

data-nav

data-nav is used to smoothly navigate between pages without reloading. This improves the user experience when accessing your website. Using it is very simple: simply place data-nav in the <a> tag, and the page transitions will automatically be seamless.

Example

<!-- place data-nav here -->
<a data-nav href="/about">About</a>

Isn’t this simple? You don’t need to write JavaScript! That’s cool, isn’t it? There’s something even cooler, Briz automatically handles meta tags on each of your pages, making your website SEO-friendly. Briz also handles URLs so you can reload without any issues and share them with others! Briz also internally handles scroll positioning so users still get the best experience!

data-nav works by replacing the entire <body>. This is why we created Leaf.js as the perfect partner for Briz.js in building your website!

Prev: Introduction Next: Swap Mechanism