Skip to content

Latest commit

 

History

History
57 lines (39 loc) · 2.12 KB

README.md

File metadata and controls

57 lines (39 loc) · 2.12 KB
Raw

MIT Licensed

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

License

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