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>23
<ul class="stepper" data-mdb-stepper="stepper" data-mdb-stepper-linear="true">24
<form class="needs-validation stepper-form" novalidate>25
<li class="stepper-step stepper-active">26
<div class="stepper-head">27
<span class="stepper-head-icon">1</span>28
<span class="stepper-head-text">step1</span>29
</div>30
<div class="stepper-content py-3">31
<div class="form-outline">32
<input type="text" id="linear-stepper-input-1" class="form-control" required />33
<label class="form-label" for="linear-stepper-input-1">step 1</label>34
<div class="invalid-feedback">invalid</div>35
</div>36
</div>37
</li>38
<li class="stepper-step">39
<div class="stepper-head">40
<span class="stepper-head-icon">2</span>41
<span class="stepper-head-text">step2</span>42
</div>43
<div class="stepper-content py-3">44
<div class="form-outline">45
<input type="text" id="linear-stepper-input-2" class="form-control" required />46
<label class="form-label" for="linear-stepper-input-2">step 2</label>47
<div class="invalid-feedback">invalid</div>48
</div>49
</div>50
</li>51
<li class="stepper-step">52
<div class="stepper-head">53
<span class="stepper-head-icon">3</span>54
<span class="stepper-head-text">step3</span>55
</div>56
<div class="stepper-content py-3">57
<div class="form-outline">58
<input type="text" id="linear-stepper-input-3" class="form-control" required />59
<label class="form-label" for="linear-stepper-input-3">step 3</label>60
<div class="invalid-feedback">invalid</div>61
</div>62
<button class="btn btn-primary" type="submit">Submit</button>63
</div>64
</li>65
</form>66
</ul>67
</div>68
</div>69
</script>70
</head>71
<body>72
73
<div style="padding: 20px; ">74
<button type="button" class="btn btn-primary" onclick="mybootbox()">75
Bootbox76
</button>77
</div>78
79
80
81
82
<script>83
84
function mybootbox() {85
// var html = $.templates('#tpl_profile2').render({});86
// let message = document.getElementById('tpl_profile2').innerHTML;87
let message = $.templates('#tpl_profile2').render({ title: 'Exmple label', value: '123a' });88
89
bootbox.alert({90
title: 'title',91
message: message, callback: function () {92
console.log('callback');93
}94
});95
}96
</script>97
98
<!-- MDB -->99
<script type="text/javascript"100
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"></script>101
<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>102
103
104
</body>105
</html>1
1
xxxxxxxxxx1
document.addEventListener('show.mdb.modal', () => {2
document.querySelectorAll('.form-outline').forEach((formOutline) => {3
new mdb.Input(formOutline).update();4
});5
})6
Console errors: 0