Topic: Reactivity with jQuery adding HTML to page not enhancing form-control

augusto.pissarra priority asked 2 years ago

I have directly used jQuery to add html and MDB does not enhance the new html.

We have from the example a normal code:


  <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <title>Material Design for Bootstrap</title>
        <!-- MDB icon -->
        <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
        <!-- Font Awesome -->
        <link rel="stylesheet" href="" />
        <!-- Google Fonts Roboto -->
        <!-- MDB ESSENTIAL -->
        <link rel="stylesheet" href="css/mdb.min.css" />
        <!-- MDB PLUGINS -->
        <link rel="stylesheet" href="plugins/css/all.min.css" />
        <!-- Custom styles -->

        <!-- Start your project here-->
        <div class="container">
          <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
            <span id="test"></span> 
        <!-- End your project here-->

  <!-- MDB ESSENTIAL -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- MDB PLUGINS -->
  <script type="text/javascript" src="plugins/js/all.min.js"></script>
  <!-- Custom scripts -->
  <script type="text/javascript" src="js/app.js"></script>


var render = () => {

    const text = `
        <!-- Email input -->
        <div class="form-outline mb-4">
            <input type="email" id="form1Example1" class="form-control" />
            <label class="form-label" for="form1Example1">Email address</label>

        <!-- Password input -->
        <div class="form-outline mb-4">
            <input type="password" id="form1Example2" class="form-control" />
            <label class="form-label" for="form1Example2">Password</label>

        <!-- 2 column grid layout for inline styling -->
        <div class="row mb-4">
            <div class="col d-flex justify-content-center">
                <!-- Checkbox -->
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="form1Example3" checked />
                    <label class="form-check-label" for="form1Example3"> Remember me </label>

            <div class="col">
                <!-- Simple link -->
                <a href="#!">Forgot password?</a>

        <!-- Submit button -->
        <button type="submit" class="btn btn-primary btn-block">Sign in</button>


Expected behavior

It should enhance the new added HTML into the page.

Actual behavior

It does not enhance and gives the following bug:

input.js:232 Uncaught TypeError: Cannot read properties of null (reading 'style')
    at p._applyNotch (input.js:232:23)
    at p._getElements (input.js:272:14)
    at input.js:246:12
    at o (index.js:192:5)
    at p._activate (input.js:245:5)
    at HTMLInputElement.<anonymous> (input.js:288:16)
    at HTMLDocument.i (event-handler.js:119:21)

augusto.pissarra priority answered 2 years ago

Great, thanks for your response Grzegorz.

I got it to work as you described above.

Now I am having problems with selects.

I am putting selects on an each for a table and it is complaning that it is not initialized.

I have tried to creating a new instance as I add to the DOM, but it is still complaining.

If you can point out to a solution it would be great.

Grzegorz Bujański staff commented 2 years ago

Here you will find an example of how to initialize select manually: If this example does not help you, please create your snippet which will have a problem with creating an instance. I'll check it.

augusto.pissarra priority commented 2 years ago

I tried to access the link (snippet) above and it returned Unauthorized.

Grzegorz Bujański staff commented 2 years ago

Try it now, it should work.

Grzegorz Bujański staff answered 2 years ago

Dynamically added inputs require manual initialization. Here you will find instructions on how to do it

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.0.0
  • Device: No device
  • Browser: Chorme
  • OS: MacOS
  • Provided sample code: No
  • Provided link: No