locked
I am using bootstrap and MDB and the Modal window and the accordion are not working on IE. RRS feed

  • Question

  • User-1718184125 posted

    The accordion and the modal work on Chrome, Firefox and Edge but not IE 11. I read that by removing the fade class it will work but did not to me. For both the modal and the accordion the next error comes up. Object.keys: argument is not an Object

    <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
    <div class="modal-header pt-5 pr-5">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body modalSpacing">
    <h4>To report security incidents:</h4>
    <p class="modalTitle">ETS Security and Compliance</p>
    <a class="emailIcon" href="mailto:etssecurity@broward.org">etssecurity@broward.org</a>
    </div>
    <div class="modal-body modalSpacing">
    <h4>To report technology problem:</h4>
    <p class="modalTitle">ETS Service Desk</p>
    <p class="phoneIcon">954-357-8600 (phone)</p>
    <p class="faxIcon">954-357-5601 (fax)</p>
    <a class="emailIcon" href="etssecurity@broward.org">etsservicedesk@broward.org</a>
    </div>
    <div class="modal-footer">
    <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
    <span class="glyphicon glyphicon-remove"></span> Close
    </button>
    </div>
    </div>
    </div>
    </div>
    <section class="py-5 grey lighten-2">
                <!-- Tips and challenge -->
                <div class="container flex flex-col flex-wrap justify-center m-auto my-10 fade-in px-2">
                   <p class="mb-4">Enterprise Technology Services welcomes you to Broward County’s CyberSecurity Corner! This page is designed to provide employees with the tools needed to protect the County, its computer systems and data. It is our desire that this page inspires you to become an 
                      <a href="http://bc-net/CyberSecurity/Articles/Pages/How-to-Become-an-Everyday-Cyber-Hero.aspx">Everyday Cyber Hero!</a>
                   </p>
                   <section class="container">
                      
                      <div class="accordion md-accordion" id="accordion1" role="tablist" aria-multiselectable="true">
                         <!-- Accordion card -->
                         <div class="card">
                            <!-- Card header -->
                            <div class="card-header py-4" role="tab" id="headingTwo1" >
                               <a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
                                  <h5 class="mb-0">
                                     <i class="fas fa-bell mr-3"></i>Tips                  
                                     <i class="fas fa-angle-down rotate-icon"></i>
                                  </h5>
                               </a>
                            </div>
                            <!-- Card body -->
                            <div id="collapseTwo1" class="collapse" role="tabpanel" aria-labelledby="headingTwo1" data-parent="#accordion1">
                               <div class="card-body">
                                  <ul class="accordion-content list-reset leading-normal px-8 py-4">
                                     <li class="py-2 border-bottom ">
                                        <a href="">On the road</a>
                                     </li>
                                     <li class="py-2 border-bottom ">
                                        <a href="">At home</a>
                                     </li>
                                     <li class="py-2 border-bottom ">
                                        <a href="">At work</a>
                                     </li>
                                  </ul>
                               </div>
                            </div>
                         </div>
                         <!-- Accordion card -->
                         <!-- Accordion card -->
                         <div class="card">
                            <!-- Card header -->
                            <div class="card-header py-4" role="tab" id="headingTwo2">
                               <a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo21" aria-expanded="false" aria-controls="collapseTwo21">
                                  <h5 class="mb-0">
                                     <i class="fas fa-shield-check mr-3"></i>
                                     Sites We Trust
                                     <i class="fas fa-angle-down rotate-icon"></i>
                                  </h5>
                               </a>
                            </div>
                            <!-- Card body -->
                            <div id="collapseTwo21" class="collapse" role="tabpanel" aria-labelledby="headingTwo21" data-parent="#accordion1">
                               <div id="entertainment" class="card-body">
                                  <ul class="accordion-content list-reset leading-normal px-8 py-4">
                         <div class="row rowColor">
                            <!-- Grid column -->
                            <div class="col-lg-4 col-md-4 ">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-between">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="http://www.everbridge.net/" target="_blank" class="dark-grey-text">AlertBroward/Everbridge</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-start">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="http://www.blanchardexchange.com/" target="_blank" class="dark-grey-text">Blanchard Exchange</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="http://www.broward.org/" target="_blank" class="dark-grey-text">Broward.org</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                         </div>
                         <div class="row mt-3">
                            <!-- Grid column -->
                            <div class="col-lg-4 col-md-4 ">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-between">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="http://bc-net/pages/default.aspx" target="_blank" class="dark-grey-text">BrowardEmployee.org</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-start">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://connect.broward.org/+CSCOE+/logon.html#form_title_text" target="_blank" class="dark-grey-text">Connect.Broward.org</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://directoryupdate/DirectorySearch/" target="_blank" class="dark-grey-text">Directory Search</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                         </div>
                         <div class="row rowColor">
                            <!-- Grid column -->
                            <div class="col-lg-4 col-md-4 ">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-between">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://directoryupdate/DirectoryUpdate/" target="_blank" class="dark-grey-text">Directory Update</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-start">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="http://broward.echoehr.com/" target="_blank" class="dark-grey-text">ECHO (For Human Services use only)</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://mrlearn01/stc/psciis.dll?linkid=182680&mainmenu=EMPLOYEE66&top_frame=1" target="_blank" class="dark-grey-text">Learning Center</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                         </div>
                         <div class="row mt-3">
                            <!-- Grid column -->
                            <div class="col-lg-4 col-md-4 ">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-between">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://mrlearn01/" target="_blank" class="dark-grey-text">MRLearn01</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-start">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://mrlearn01/lms/" target="_blank" class="dark-grey-text">Pathlore</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://psfs.erp.browardemployee.org/psp/brwfsprd/?cmd=login&languageCd=ENG&" target="_blank" class="dark-grey-text">PeopleSoft</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                         </div>
                         <div class="row rowColor">
                            <!-- Grid column -->
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://broward.skillport.com/skillportfe/login.action" target="_blank" class="dark-grey-text">Skillport</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://browardcounty.kronos.net/wfc/logon" target="_blank" class="dark-grey-text">Time and Attendance Kronos</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                            <div class="col-lg-4 col-md-4">
                               <!-- Excerpt -->
                               <div class="d-flex justify-content-around">
                                  <div class="col-11 text-truncate pl-0 mb-3 check">
                                     <a href="https://webmail.broward.org/owa/auth/logon.aspx?replaceCurrent=1&url=https://webmail.broward.org/owa/%23authRedirect%3dtrue" target="_blank" class="dark-grey-text">Webmail</a>
                                  </div>
                                  <a>
                                  <i class="fas fa-angle-double-right"></i>
                                  </a>
                               </div>
                            </div>
                         </div>
                      </ul>
                               </div>
                            </div>
                         </div>
                         <!-- Accordion card -->
                         <div class="card">
                            <!-- Card header -->
                            <div class="card-header py-4" role="tab" id="headingThree31">
                               <a class="collapsed" data-toggle="collapse" data-parent="#accordion1" href="#collapseThree31" aria-expanded="false" aria-controls="collapseThree31">
                                  <h5 class="mb-0">
                                     <i class="fas fa-desktop mr-3"></i>
                                     Take the challenge
                                     <i class="fas fa-angle-down rotate-icon"></i>
                                  </h5>
                               </a>
                            </div>
                            <!-- Card body -->
                            <div id="collapseThree31" class="collapse" role="tabpanel" aria-labelledby="headingThree31" data-parent="#accordion1">
                               <div id="healthBeauty" class="card-body">
                                  <ul class="accordion-content list-reset leading-normal px-8 py-4">
                         <li class="py-2 border-b">
                            <h3 class="title h3-responsive">Are YOU CyberAware?</h3>
                         </li>
                         <p>
                            <strong>Instructions:</strong>
                            <br>
                            Take the monthly challenge for the chance to win a prize! Score 100 points and you will be entered in the drawing to win a gift bag of cyber savvy prizes. One entry per employee. Winner will be notified by ETS Security.
                         </p>
                         <ul >
                            <li>January 2019(Closed)</li>
                            <ul>
                               <li>Challenge: Why Online Data Privacy Matters</li>
                               <li>Winner: 
                                  <a href ="http://bc-net/CyberSecurity/Pages/CyberChamps.aspx">Jenny Menendez-Kane, Building Code Services</a>
                               </li>
                            </ul>
                            <li>February 2019 (Closed)</li>
                            <ul>
                               <li>Challenge: What You Can Do to Protect Your Devices?</li>
                               <li>Winner: Stephanie Richter, Medical Examiner's Office</li>
                            </ul>
                            <li>March 2019 (Open NOW through 3/31/2019)</li>
                            <ul>
                               <li>Challenge: 
                                  <a href="https://www.surveymonkey.com/r/RT73S7H">Beware of Phishing Tax Scams</a>
                               </li>
                               <li>Winner: To Be Announced</li>
                            </ul>
                         </ul>
                      </ul>
                               </div>
                            </div>
                         </div>
                         <!-- Accordion card -->
                         <!-- Accordion card -->
                      </div>
                      <!-- Accordion wrapper -->
                   </section>            
                   </div>
             </section>

    Friday, May 10, 2019 6:04 PM

Answers

  • User839733648 posted

    Hi DigitalDev,

     Object.keys: argument is not an Object

    It would appear that there is a bug in Bootstrap4.1.

    Link to bug report at github

    It has been fixed for 4.1.1.

    According to this, I think that maybe the reference you have added casue the error.

    I suggest that you could go to the official documentation to use the references: https://mdbootstrap.com/md-bootstrap-cdn/

    I've tried your code with the references and it works well on my side without error.

    <body>
        <!-- Your code -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
    </body>

    Here is the running result.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 13, 2019 6:36 AM

All replies

  • User-474980206 posted

    you will need the babel polyfills for MDB to work on IE 11. as IE 11 is not supported, some of the CSS won't work either, but that would not cause a javascript error.  see:

       https://babeljs.io/docs/en/6.26.3/babel-polyfill

    if you are using babel 7, see:

      https://babeljs.io/docs/en/v7-migration

    if you are not using babel, then you can tell which version of babel was used to build MDB by looking at the package.json for the version of MDB you are using

    Friday, May 10, 2019 10:39 PM
  • User839733648 posted

    Hi DigitalDev,

     Object.keys: argument is not an Object

    It would appear that there is a bug in Bootstrap4.1.

    Link to bug report at github

    It has been fixed for 4.1.1.

    According to this, I think that maybe the reference you have added casue the error.

    I suggest that you could go to the official documentation to use the references: https://mdbootstrap.com/md-bootstrap-cdn/

    I've tried your code with the references and it works well on my side without error.

    <body>
        <!-- Your code -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/css/mdb.min.css" rel="stylesheet">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.0/js/mdb.min.js"></script>
    </body>

    Here is the running result.

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 13, 2019 6:36 AM
  • User-1718184125 posted

    Thanks for your reply Jenifer I replaced the bootstrap and MDB files for the latest versions and it fixed the problem. 

    Tuesday, May 14, 2019 5:49 PM
  • User-1718184125 posted

    Thank you Bruce

    Tuesday, May 14, 2019 5:49 PM