Dynamic UI

Introduction

Before we look at using DynamicUI specifically, we should go over the concept as a whole. The idea with DynamicUI is to provide in interface to creating DOM changes that update content dynamically based on DOM events.

An example of this might be when a button is clicked that shows the user their shopping cart, a request is sent off to the server to retrieve the user's cart contents. The server will respond with a JSON object which represents the data for the user's cart. The DOM is then updated with the response from the server. The advantage here is that you:

1. Only load required HTML content that is necessary for the page over initial GET requests (smaller and faster page loads).
2. Additional content can be loaded via POST based on events/and/or server conditions, when it is needed.
3. POST requests/responses to/from the server are very small and load quickly, as only the actual data is needed. Rather than returning entire HTML UI as a string response.

To recap the process works like this:

1. Page is loaded.
2. User clicks a button.
3. JavaScript makes a POST request to the server for some data.
4. Server sends back a JSON response object with the dynamic data.
5. JavaScript is used to populate that content into the DOM.
6. User sees the content.

Basic usage

The example below demonstrates a very simple example of dynamically changing some content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Change The Title!

The server here would return the following string as JSON:

As you can see, the classes array loaded into the DynamicUI constructor represent an array of the class-name selectors inside the target node, with the key of the JSON data to load into the node.

Advanced Usage

The following example demonstrates the DynamicUI component with all available options

Server Response

Your server must send a JSON response object with the response key set to valid for a valid response and the data as an object in the details key. On a PHP server that would look like this:

To send an invalid response, either return a 404 or set the response key to anything other than valid:

This will trigger the optional onError event callback (if provided via the options). You can use this to insert fallback content.