Skip to content

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

License

Notifications You must be signed in to change notification settings

HandmadeWeb/datafetcher.js

Repository files navigation

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.

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published