Development: AJAX API

Overview

The api-helper.js Provides helpers to perform AJAX requests against cerebrate. It can provide feedback about the progress of the operation to the user and reload part of the page. It's basically a promise-based wrapper using the Fetch API to perform requests.

Quick functions

Function commonly used throughout the application

1. quickFetchURL simply fetches the remote

// quickFetchURL(url, options={})
AJAXApi.quickFetchURL('/users/index').then(text => {
    console.log(text)
})

2. quickFetchJSON simply fetches the remote JSON

// quickFetchJSON(url, options={})
AJAXApi.quickFetchURL('/users/view/1').then(json => {
    console.log(json)
})

3. quickFetchForm fetches the HTML at the provided URL, then extract the form. Resolves to the HTMLFormElement if successful

// quickFetchForm(url, options={})
AJAXApi.quickFetchForm('/users/add').then(formElement => {
    document.body.append(formElement)
})

4. quickPostForm POST a form, dataToMerge can be used to modify form values on-the-fly

// quickPostForm(form, dataToMerge={}, options={})
AJAXApi.quickPostForm(form, {uuid: genUUID()}).then(json => {
    console.log(json)
})

5. quickFetchAndPostForm Fetch a form, dataToMerge can be used to modify form values on-the-fly and then POST it

// quickFetchAndPostForm(url, dataToMerge={}, options={})
AJAXApi.quickFetchAndPostForm('/users/toggle/1/enabled).then(json => {
    console.log(json)
})

AJAXApi usage