Topic: Select Dropdown in Ayax Modal poppers error

h2-invent free asked 4 years ago


Expected behavior When I load a modal with select fields an I call materialSelect on the fields then they should work as select dropdowns in the normal rendered side.

Actual behavior The Select is initialiazied vie materialSelect and is renderes correctly in the DOM enter image description here but when I click on the Dropdown then it shows me the following error an no dropdown appears. This error unly occurs when the modal is Error in the Console The line where the Issue is thrown: enter image description here

I use the poppers version 1.16.1

Resources (screenshots, code snippets etc.)


Grzegorz Bujański staff commented 4 years ago

Can you reproduce this error in snippet here: https://mdbootstrap.com/snippets/ ? I will look at this/


h2-invent free answered 4 years ago


Hello Grezegorz, i was able to fix the problem and made a small tutorial for the use of mdb and symfony4 with webpack. perhaps this is usefull for other customers.

https://h2-invent.com/softwarenwicklung/implement-mdbootrap-in-a-symfony4-application-with-webpack/

Best regards Emanuel


Grzegorz Bujański staff commented 4 years ago

Hi. If I understand correctly, you have already solved this problem and now everything works well?


h2-invent free commented 4 years ago

Yes, the issue is fixed. Im realy looking forward when mdb is webpack ready but for now it is fixed.

Best regards Emanuel


h2-invent free answered 4 years ago


Hello Grzegorz, I tried to create a snipet but it is not possible to generate one, becaue I use webpack to pack all my elements. I did it, as in this Thread described https://mdbootstrap.com/support/jquery/uncaught-typeerror-cannot-assign-to-read-only-property-exports-of-object-object/

//with this import the init is working:
import ('mdbootstrap-pro/js/bootstrap');

// with this import the init is working too, but at the first click on the select I get the 
error
import bootstrap from 'mdbootstrap-pro/js/bootstrap';

//This is my doc ready function
$(document).ready(function () {
    console.log('test');
    $('select').materialSelect();
    $('.pickadate').pickadate({
        format: 'dd.mm.yyyy',
        formatSubmit: 'yyyy/mm/dd',
    });

});

One more hint, I have bootstrap in the webpack imported as well, because other components in my application needs bootstrap as well. but if I delete the bootstrap in the webpack import then the later initialiation is woking as well.

so there must be a conflict in importing the bootstrap in the webpack and mdbootrap. I'm realy sad that mdb is not working as a normal webpack component because of the export error this would save me hours of work to solve this issue. I'm realy not happy with the theme until now. Especially because the freeversion worked as a webpack component.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.15.0
  • Device: All
  • Browser: All
  • OS: Windows
  • Provided sample code: No
  • Provided link: No