xxxxxxxxxx1
<!DOCTYPE html>2
<html>3
<head>4
<meta charset="utf-8" />5
<title></title>6
<!-- Font Awesome -->7
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"8
rel="stylesheet" />9
<!-- Google Fonts -->10
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"11
rel="stylesheet" />12
<!-- MDB -->13
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"14
rel="stylesheet" />15
<script src="https://code.jquery.com/jquery-3.6.3.min.js"16
integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU="17
crossorigin="anonymous"></script>18
<script src="https://www.jsviews.com/download/jsrender.js"></script>19
20
<script id="tpl_profile2" type="text/x-jsrender">21
<div style="padding: 20px; ">22
<div class="form-outline mb-2" style="width: 22rem;">23
<input value="{{:value}}" type="text" id="form11" class="form-control">24
<label class="form-label" for="form11" style="margin-left: 0px;">{{:title}}</label>25
<div class="form-notch"><div class="form-notch-leading" style="width: 9px;"></div><div class="form-notch-middle" style="width: 87.2px;"></div><div class="form-notch-trailing"></div></div>26
</div>27
<select id="mySelect" multiple>28
<option value="1">One</option>29
<option value="2">Two</option>30
<option value="3">Three</option>31
<option value="4">Four</option>32
<option value="5">Five</option>33
<option value="6">Six</option>34
<option value="7">Seven</option>35
<option value="8">Eight</option>36
</select>37
<label class="form-label select-label">Example label</label>38
</div>39
</script>40
</head>41
<body>42
43
<div style="padding: 20px; ">44
<button type="button" class="btn btn-primary" onclick="mybootbox()">45
Bootbox46
</button>47
</div>48
49
<script>50
51
function mybootbox() {52
// var html = $.templates('#tpl_profile2').render({});53
// let message = document.getElementById('tpl_profile2').innerHTML;54
let message = $.templates('#tpl_profile2').render({ title: 'Exmple label', value: '123a' });55
56
bootbox.alert({57
title: 'title',58
message: message, callback: function () {59
console.log('callback');60
}61
});62
}63
64
</script>65
66
<!-- MDB -->67
<script type="text/javascript"68
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>69
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/6.0.0/bootbox.min.js" integrity="sha512-oVbWSv2O4y1UzvExJMHaHcaib4wsBMS5tEP3/YkMP6GmkwRJAa79Jwsv+Y/w7w2Vb/98/Xhvck10LyJweB8Jsw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>70
71
72
</body>73
</html>1
1
xxxxxxxxxx1
document.addEventListener('show.mdb.modal', () => {2
document.querySelectorAll('.form-outline').forEach((formOutline) => {3
new mdb.Input(formOutline).update();4
const mySelect = new mdb.Select(document.getElementById('mySelect'))5
});6
})7
8
9
10
11
Console errors: 0