Reactivity with jQuery adding HTML to page not enhancing for

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:

HTML

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" />
        <!-- Google Fonts Roboto -->
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
        />
        <!-- MDB ESSENTIAL -->
        <link rel="stylesheet" href="css/mdb.min.css" />
        <!-- MDB PLUGINS -->
        <link rel="stylesheet" href="plugins/css/all.min.css" />
        <!-- Custom styles -->
        <style></style>
      </head>

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

  <!-- 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>
</html>

Javascript

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>
        </div>

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

        <!-- 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>
            </div>

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

        <!-- Submit button -->
        <button type="submit" class="btn btn-primary btn-block">Sign in</button>
    `;
    $('#test').html(text);
}

render();

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)

Add comment

augusto.pissarra priority answered 2 years ago

0 0 Best answer

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: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3914855#js-tab-view 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.

Add comment

Grzegorz Bujański staff answered 2 years ago