Skip to content

Help

Reminder to all repository users: Please do not add , commit and push any data files to your remote git repositories. The disk space the Git server is limited, it wasn't dimensioned to host anything else than code. Solely your code files need versioning. The data inputs/outputs don't. A good idea is to do "git add" individually on each file you want to commit, to avoid versioning unwanted content.

Ajax

Ajax is a droplab plugin that allows for retrieving and rendering list data from a server.

Usage

Add the Ajax object to the plugins array of a DropLab.prototype.init or DropLab.prototype.addHook call.

Ajax requires 2 config values, the endpoint and method.

  • endpoint should be a URL to the request endpoint.
  • method should be setData or addData.
  • setData completely replaces the dropdown with the response data.
  • addData appends the response data to the current dropdown list.
<a href="#" id="trigger" data-dropdown-trigger="#list">Toggle</a>
<ul id="list" data-dropdown><!-- ... --><ul>
  const droplab = new DropLab();

  const trigger = document.getElementById('trigger');
  const list = document.getElementById('list');

  droplab.addHook(trigger, list, [Ajax], {
    Ajax: {
      endpoint: '/some-endpoint',
      method: 'setData',
    },
  });

Optionally you can set loadingTemplate to a HTML string. This HTML string will replace the dropdown list whilst the request is pending.

Additionally, you can set onError to a function to catch any XHR errors.