Topic: Uncaught TypeError: mdb.LoadingManagement is not a constructor
Frano Hartman pro premium priority asked 2 years ago
Expected behavior
I am trying to use mdb loader, on our booking page - when using jquery ajax to fetch data from api. Idea is on select box change, fire ajax, before send toggle loader, on complete toggle loader.
This the link of page : https://dev.adriaticglobal.com/en/bookings/private-excursions.aspx?productcode=exp-1-7303-ie&option=1&price=2
loader is imported with script tag :
<script src="/assets/mdb-5/js/modules/loading-management.min.js"></script>
Code is :
<div id="mdb-loader">
........
</div>
$('select').on('change', function (e) {
const myLoader = document.getElementById('mdb-loader');
const loader = new mdb.LoadingManagement(myLoader);
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
dataType: "json",
url: "/api/Excursion/ExcursionOptionHtml?productCode=<%=this.item.Code%>&optionId=" + valueSelected,
beforeSend: function () {
loader.toggle();
},
error: function (xhr) {
},
success: function (data) {
$("#optionContent").html(data);
console.log(data);
},
complete: function () {
loader.toggle();
},
dataType: 'html'
});
Ajax is working fine, but :
Actual behavior I am getting error : Uncaught TypeError: mdb.LoadingManagement is not a constructor in browser console.
Any help?
mlazaru staff answered 2 years ago
hi,
There is an invalid constructor indeed. For jquery it should be new mdb.Loading(myLoader)
.
I've fixed it for you.
$("select").on("change", function (e) {
const myLoader = document.getElementById('mdb-loader');
const loader = new mdb.Loading(myLoader);
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "json",
url:
"/api/Excursion/ExcursionOptionHtml?productCode=<%=this.item.Code%>&optionId=" +
valueSelected,
beforeSend: function () {
loader.toggle();
},
error: function (xhr) {},
success: function (data) {
$("#optionContent").html(data);
console.log(data);
},
complete: function () {
loader.toggle();
},
dataType: "html",
});
});
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 5.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes