Topic: jQuery .fadeout() complete event broken

Sebastian Sauer free asked 2 months ago


Expected behavior Jquerys fadeout function has a callback for a function when the fadeout is completed. So after the fadeout completed, the code within the inner function should be executed. In this case the browser should display the alert.

$("itemId").fadeOut("fast", function () { alert("Hello!")})

Actual behavior The code does not get executed, as MDB 5 has an own implementation for $("").fadeout, which does not support the callback.

To trigger this bug, jQuery has to be imported before mdb-ui-kit.js. Importing jQuery after it, will work as a workaround.

Tested with Webpack, Typescript, MDB 5.0 and Jquery 3.6.1. Typescript Module and Target is ES 2022.

Resources (screenshots, code snippets etc.)


mlazaru staff commented 2 months ago

Thank you for reporting this. We will fix this bug soon.


PianoMaster88 priority answered 2 months ago


It looks like a similar issue is occurring with the jQuery slideToggle() method except in addition to that, you also can't chain the slideToggle method (for example calling addClass right after slideToggle in a chained one-line statement fails).

It was working in MDB5 v4.1.0 so it looks like something with v5.0.0 caused issues with some jQuery functions (specifically around animations). I couldn't get it to work even by importing jQuery prior to MDB though so the workaround didn't work for the slideToggle method unfortunately.

MDB team let me know if you want me to create a new thread for this but it sounds somewhat similar/related.


mlazaru staff commented 2 months ago

Thank you! There is no need to create new issue, because I've attached your comment to the fix task.



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: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 5.0.0
  • Device: Laptop/Mobile
  • Browser: Chrome/Edge/Firefox
  • OS: Win10
  • Provided sample code: No
  • Provided link: No