This example shows a popular usage when working with the list of data.
The scenario is described as following:
- The data are populated in a list. It's up to you to choose showing the list in a
ul or any tag.
- In each element presenting a data item, there is a button for editing the data
- When clicking the button, the data is loaded from the server and then populated in a form
- The form need to be validated and its data will be sent to server
- Loading and saving data are done by Ajax requests
You can use a modal plugin to show up the form. There are some choices for you when using the Bootstrap framework, such as Bootstrap's Modal or Bootbox.
Our example will use Bootbox because it allows to create programmatic dialog boxes easily.
When showing the form that consists of data loaded from server, you shouldn't use a string containing entire form markup:
Instead, prepare a form, populate the data and pass the form element:
By doing this, we can easily adjust the form markup as well as manage the DOM.
The example also triggers event to save the form data via an Ajax request:
To demonstrates loading and saving data via Ajax requests, the example uses jsonplaceholder
, a fake REST API service