Fetch & Display

A times you need to display more data on a click of a button, now you can without any JavaScript coding.

Any element can be used to achieve this functionality. All need is a class addition called fetch-display-click, additional options are passed via attributes.

Attribute options are;

• loader

  • Optional

  • "true" or "false"

  • when true, a loader will be shown when button is clicked and hidden when set false.

• url

  • required

  • url

  • the path to where the form will be submitted

• data

  • required

  • string. example username:johnd|name:John Doe|email:[e-mail]. Separate a key from value with full colon : and separate each group with |

• holder

  • required

  • ".my-class" or "#my-id"

  • a selector of where data from server will be rendered

• modal

  • optional

  • ".my-class" or "#my-id"

  • a selector of a modal if your holder is nested in a modal.

Usage

<button class="fetch-display-click" data="username:johnd|name:John Doe|email:[e-mail]" url="https://example.com/server" holder=".put-here">View More</button>