Update JS example
This commit is contained in:
parent
b44a12eadd
commit
9aa835c93e
@ -77,7 +77,9 @@ This renders two empty `div`s with the appropriate style attributes; toasts plac
|
|||||||
Bootstrap provides `data-` attributes that can make toasts appear; however, since we are creating these in script, we need to use their JavaScript functions. The message coming from the server has the format `TYPE|||The message`. Let's look at [the showToast function][v3-toast] (the largest custom JavaScript function in the entire application):
|
Bootstrap provides `data-` attributes that can make toasts appear; however, since we are creating these in script, we need to use their JavaScript functions. The message coming from the server has the format `TYPE|||The message`. Let's look at [the showToast function][v3-toast] (the largest custom JavaScript function in the entire application):
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
showToast (message) {
|
const mpj = {
|
||||||
|
// ...
|
||||||
|
showToast (message) {
|
||||||
const [level, msg] = message.split("|||")
|
const [level, msg] = message.split("|||")
|
||||||
|
|
||||||
let header
|
let header
|
||||||
@ -111,19 +113,21 @@ showToast (message) {
|
|||||||
toastEl.appendChild(body)
|
toastEl.appendChild(body)
|
||||||
document.getElementById("toasts").appendChild(toastEl)
|
document.getElementById("toasts").appendChild(toastEl)
|
||||||
new bootstrap.Toast(toastEl, { autohide: level === "success" }).show()
|
new bootstrap.Toast(toastEl, { autohide: level === "success" }).show()
|
||||||
|
},
|
||||||
|
// ...
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
Here's what's going on in the code above:
|
Here's what's going on in the code above:
|
||||||
|
|
||||||
- Line 2 splits the level from the message
|
- Line 4 splits the level from the message
|
||||||
- Lines 4-18 (`let header`) create a header and close button if the message is not a success
|
- Lines 6-20 (`let header`) create a header and close button if the message is not a success
|
||||||
- Lines 20-22 (`const body`) create the body `div` with attributes Bootstrap's styling expects
|
- Lines 22-24 (`const body`) create the body `div` with attributes Bootstrap's styling expects
|
||||||
- Lines 24-28 (`const toastEl`) create the `div` that will contain the toast
|
- Lines 26-30 (`const toastEl`) create the `div` that will contain the toast
|
||||||
- Line 29 adds an event handler to remove the element from the DOM once the toast is hidden
|
- Line 31 adds an event handler to remove the element from the DOM once the toast is hidden
|
||||||
- Lines 30 and 32 add the optional header and mandatory body to the toast `div`
|
- Lines 32 and 34 add the optional header and mandatory body to the toast `div`
|
||||||
- Line 33 adds the toast to the page (within the `toasts` inner `div` defined above)
|
- Line 35 adds the toast to the page (within the `toasts` inner `div` defined above)
|
||||||
- Line 34 initializes the Bootstrap JavaScript component, auto-hiding on success, and shows the toast
|
- Line 36 initializes the Bootstrap JavaScript component, auto-hiding on success, and shows the toast
|
||||||
|
|
||||||
_(If you've never used JavaScript to create elements that are added to an HTML document, this probably looks weird and verbose; if you have, you look at it and say "they're not wrong...")_
|
_(If you've never used JavaScript to create elements that are added to an HTML document, this probably looks weird and verbose; if you have, you look at it and say "they're not wrong...")_
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user