Topic: error on modal; _initializeBackDrop; undefined is not an object

ayescas priority asked 1 year ago


Each time a modal opens, the safari inspector gives me the following error: _initializeBackDrop TypeError: undefined is not an object (evaluating 'this._config.backdrop')


stefanvd priority answered 5 months ago


Hi,

I have this exact same issue.

Regards, Stefan


Kamila Pieńkowska staff commented 5 months ago

Can you provide a snippet that recreates this problem?


Grzegorz Bujański staff answered 1 year ago


Unfortunately, we are unable to reproduce the error. We have tested it on 3 different MacBooks and the error did not occur on any of them. We also used BrowserStack to test it, but we were unable to reproduce the error. It is possible that the problem is caused by some additional software (extension) that you are using. Have you checked if the problem also occurs on another device?


ayescas priority answered 1 year ago


I get the error on localhost, 127.0.0.1, and hosted with a domain name: the modal works, just an error from the Safari inspector.


ayescas priority answered 1 year ago


Safari Inspector Error:*_The modal works, just getting the error:_*

_initializeBackDrop modal.js:158
TypeError: undefined is not an object (evaluating 'this._config.backdrop')

modal.js:158:

// Private
_initializeBackDrop() {
return new Backdrop({
    isVisible: Boolean(this._config.backdrop) && Boolean(!this._config.modalNonInvasive), // 'static' option will be translated to true, and booleans will keep their value,
    isAnimated: this._isAnimated(),
});
}

modal-settings:

<section>
        <div class="modal fade" id="tsuModal" data-mdb-backdrop="static" data-mdb-keyboard="false" data-mdb-focus="true" tabindex="-1" aria-labelledby="tsuModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable"> 
        <div class="modal-content">
        <div class="modal-header">
        <h5 class="modal-title" id="tsuModalLabel">TSU</h5>
        <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
      <section style="position:relative; display:none" id = "contact_us_section">
        contact-us
      </section>
      <div class="d-flex justify-content-center">
        <div id="api_error" class="note note-danger mb-3 mt-3" style="display:none;"></div>
        <div id="api_success" class="note note-success mb-3 mt-3" style="display:none;"></div>
      </div>
     </div>
      <div class="modal-footer" >
        <button type="button" class="btn btn-dark btn-lg" data-mdb-dismiss="modal">Close</button>
        </div>
              </div> 
            </div>
          </div>
    </section>

modal-triggers:

<button class="btn btn-primary" id="signinClient" href="#!" data-mdb-toggle="modal" data-mdb-target="#tsuModal">
<li class="list-group-item  bg-light hover-shadow ripple"  data-mdb-ripple-color="primary">
<span class="d-inline-block" data-mdb-toggle="tooltip"data-mdb-placement="right" title="make requests, and get status updates."> 
Sign-In              
</span> 
</li>
</button>
<button class="btn btn-primary" id="signinVendor" href="#!" data-mdb-toggle="modal" data-mdb-target="#tsuModal">
<li class="list-group-item  bg-light hover-shadow ripple" data-mdb-ripple-color="primary">
Vendor           
</li>
</button>

modal-JS:

const elements_config = [
{ // modal-registration-client
btnId: 'signinRegistrationClient',
sections: [
{ id: 'client_section', display: 'block' },
{ id: 'client_registration_form', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_signin_form', display: 'none' },
{ id: 'client_validation_code_form', display: 'none' },
{ id: 'client_accordion', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-signin-client
btnId: 'signinClient',
sections: [
{ id: 'client_section', display: 'block' },
{ id: 'client_signin_form', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_validation_code_form', display: 'none' },
{ id: 'client_accordion', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-signin-interpreter
btnId: 'signinInterpreter',
sections: [
{ id: 'interpreter_section', display: 'block' },
{ id: 'interpreter_signin_form', display: 'block' },    
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'interpreter_accordion', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-signin-vendor
btnId: 'signinVendor',
sections: [
{ id: 'vendor_section', display: 'block' },
{ id: 'vendor_signin_form', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'vendor_accordion', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-glossary
btnId: 'signinGlossary',
sections: [
{ id: 'glossary_section', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'contact_us_section', display: 'none' },
]
},
{ // modal-contact-us
btnId: 'signinContactUs',
sections: [
{ id: 'contact_us_section', display: 'block' },
{ id: 'api_error', display: 'none' },
{ id: 'api_success', display: 'none' },
{ id: 'client_registration_form', display: 'none' },
{ id: 'client_section', display: 'none' },
{ id: 'interpreter_section', display: 'none' },
{ id: 'vendor_section', display: 'none' },
{ id: 'glossary_section', display: 'none' },
]
}
];
// Function to toggle section display
function toggleSectionDisplay(section, display) {
if (section) {
section.style.display = display;
}
}
// Function to handle click
function handleClick(sections) {
sections.forEach((section) => {
toggleSectionDisplay(document.getElementById(section.id), section.display);
});
}
// Initialize event listeners
elements_config.forEach((config) => {
const btn = document.getElementById(config.btnId);
btn.addEventListener('click', () => handleClick(config.sections));
});

Kamila Pieńkowska staff commented 1 year ago

Can you prepare a snippet with the code that causes this error? Also please tell me if the error occurs in the snippet or only locally.

I need to replicate this error to troubleshoot.


Kamila Pieńkowska staff answered 1 year ago


Can you say more about your setup? I cannot recreate this problem.



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 6.4.0
  • Device: MacBook Pro
  • Browser: safari
  • OS: ventura
  • Provided sample code: No
  • Provided link: No