Sadrazam – Ajax Showcase

Configuration Reference

All available options for Sadrazam.Ajax.request(options)

Option	Type	Default	Description
route	string	''	Endpoint URL. Must be a full URL (https://...) or absolute path (/api/...)
type	string	'post'	HTTP method: get, post, put, delete
data	object \| FormData	{}	Data to send. For GET, appended as query params. For POST, sent as URL-encoded body or FormData.
timeout	number	15000	Request timeout in milliseconds
spinner	boolean \| string	false	Show spinner during request: false, 'main', or 'helper'
success	function	() => {}	Called on HTTP 2xx with the response object
error	function	() => {}	Called on network error, timeout, or HTTP 4xx/5xx
beforeStart	function	() => {}	Called right before the request starts
afterEnd	function	() => {}	Called after request completes (success or failure), in the finally block
complete	function	() => {}	Called when a server response is received (before success/error logic)

Error Response Format

On HTTP 4xx/5xx errors, the response body is checked for a message key. If found, it is displayed via Snackbar.

// Expected error response body (optional)
{
  "message": {
    "error": ["Product not found."],
    "warning": ["Stock is low."]
  }
}

If no message key is present, a generic error is shown.

Token (CSRF)

The Token helper reads/updates a CSRF token from a hidden input on the page.

Default Selector input[name*='token_common']

Custom Selector Sadrazam.Token.setSelector("input[name='_token']")

Via configure() Sadrazam.configure({ tokenSelector: "input[name='_token']" })

// Read token
const token = Sadrazam.Token.get();

// Update token (e.g. after AJAX response)
Sadrazam.Token.update(newTokenValue);

// HTML — hidden input in page footer
<input type="hidden" name="token_common" value="abc123" />

GET Request

Fetch data from the server — data is appended as query parameters

// Click a button to see the response

Code Sadrazam.Ajax.request({ route: 'https://...', type: 'get' })

POST Request

Send data to create a new resource — data is sent in the request body

// Click a button to see the response

Code Sadrazam.Ajax.request({ route: 'https://...', type: 'post', data: { title: '...' } })

PUT Request

Update an existing resource entirely

// Click a button to see the response

Code Sadrazam.Ajax.request({ route: 'https://...', type: 'put', data: { ... } })

DELETE Request

Delete an existing resource

// Click a button to see the response

Code Sadrazam.Ajax.request({ route: 'https://...', type: 'delete' })

Error Handling

Network errors, HTTP errors, and timeout scenarios

// Click a button to see error handling in action

Note Errors are caught via try/catch or the error callback

Callback Lifecycle

Observe the execution order: beforeStart → complete → success/error → afterEnd

// Callback execution order will appear here

Async/Await Usage

Ajax.request() returns a Promise — use it with async/await or .then()/.catch()

// Async/await and promise-based results appear here

Pattern const data = await Sadrazam.Ajax.request({ ... })

Spinner Integration

Pass spinner: 'main' or spinner: 'helper' to show a loading indicator during the request

// Spinner will show/hide during the request

Code Sadrazam.Ajax.request({ ..., spinner: 'main' })