title = "HTML Data Attribute Requests | Snowboard" url = "/snowboard/attr-requests" layout = "snowboard" == 'AJAX Request was successful!', ]; } function onFormSubmission() { if (empty(post('name'))) { return [ '#form-submission-response' => '
You did not provide your name.
', ]; } elseif (empty(post('email'))) { return [ '#form-submission-response' => '
You did not provide your email address.
', ]; } else { return [ '#form-submission-response' => '
Your name is ' . post('name') . ' and you can be contacted via email at ' . post('email') . '.
', ]; } } function onError() { throw new ApplicationException('This AJAX response threw an exception.'); } function onFlash() { $type = post('type', 'success'); Flash::$type('This is a flash message'); } function onPrepend() { return [ '^#prepend-content' => '
' . date('Y-m-d H:i:s') . '
', ]; } function onAppend() { return [ '@#append-content' => '
' . date('Y-m-d H:i:s') . '
', ]; } function onValidateForm() { if (post('name') !== 'success') { throw new ValidationException([ 'name' => 'You must enter the correct name' ]); } } ==
{% partial 'snowboard/sections-list' %}

HTML Data Attribute Requests


Simple request

This is a test to do a simple AJAX request on the click of a button and show a success message next to the button on completion.

{% partial 'ui/button' color="amber" text="Test now" dataRequest="onSimple" %}

Form submission

This is a test to make a form submission via AJAX and display the form contents on completion. The AJAX request is initiated from the Submit button.

{% partial 'ui/button' color="amber" text="Submit" %}

Error response

This is a test to do an AJAX request that throws an exception. It should show a Flash error message.

{% partial 'ui/button' color="amber" text="Test now" dataRequest="onError" %}

Flash response

This is a test to do an AJAX request that sends a Flash response back of differing types.

{% partial 'ui/button' color="green" text="Test success" dataRequest="onFlash" dataRequestData="type: 'success'" dataFlash=true %}
{% partial 'ui/button' color="amber" text="Test warning" dataRequest="onFlash" dataRequestData="type: 'warning'" dataFlash=true %}
{% partial 'ui/button' color="red" text="Test error" dataRequest="onFlash" dataRequestData="type: 'error'" dataFlash=true %}

Appended and prepended content

This is a test to do an AJAX request that appends or prepends content as opposed to replacing the content of the targeted element.

{% partial 'ui/button' color="amber" text="Test prepend" dataRequest="onPrepend" %}
Prepended content
{% partial 'ui/button' color="amber" text="Test append" dataRequest="onAppend" %}
Appended content

Form validation

This is a test to do an AJAX request that triggers a form validation error if the "Name" field does not contain the word "success".

{% partial 'ui/button' color="amber" text="Submit" %}