Uncaught TypeError: mdb.LoadingManagement is not a construct


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",
    });
  });

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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