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.

In data-ajax you can add data-transition to enable transition animations taken from the view transition API. You can search the view transition API documentation and customize your own animations with CSS.

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

When a request doesn’t receive a response, it will automatically stop after 10 seconds. You can also set the request timeout via the data-timeout=[time]s attribute (must be with s (meaning seconds)).

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!

Remember that data-nav works by replacing the body’s innerHTML. Any scripts inside the body will be disabled when using data-nav navigation. Always place separate JS scripts on the frontend and load them in the header.

Prev: Introduction Next: Swap Mechanism