dataFetcher.js is a small library to swap the content of an element with the Html content from an ajax response.

Adding dataFetcher.js to your project

From cdn.jsdelivr.net

• Add the script to your footer.

<script src="https://cdn.jsdelivr.net/gh/handmadeweb/datafetcher.js@1.1.2/dist/data-fetcher.min.js"></script>

Precompiled js file

• Clone or download the library.
• Add /dist/data-fetcher.min.js to your project.

Building from the source

• Clone or download the library.
• Run npm install & ( npm run dev or npm run prod )
• Add /dist/data-fetcher.min.js to your project.

Usage

Load data-fetcher.min.js in your footer.

data-fetcher.js will look for elements which have a data-fetcher data attribute, it will then trigger a GET request to the url specified in the data-fetcher attribute, and will replace the contents of the element with the contents of the GET request, so be sure to return a Html response.

If we wanted to fetch the latest news, the below example will do just that.

<div data-fetcher="/ajax/news"></div>

If we wanted to fetch the latest news, but also display some placeholder content until the news has been loaded, then the below example will do that.

<div data-fetcher="/ajax/news">
    <p>Man drops egg, goes without breakfast! You won't believe what happened next!</p>
</div>

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

• Handmade Web & Design
• Michael Rook
• John Pieters
• All Contributors

License

The MIT License (MIT). Please see License File for more information.