Topic: form input border outline not showing over ajax

manalan2020 premium asked 5 months ago


Using dark css - mdb.dark.min.css

Using this snippet directly, no issues.

<div class="form-outline form-white mt-3">
    <input type="text" id="incident-number" class="form-control" />
    <label class="form-label" for="incident-number">Enter Incident Number here</label>
</div>

Returning the same input via ajax (2 pages, index.php & index_post) (This is not working)

index.php content

<div id="index-content"></div>

function refresh_Cards() {
    var action = "refresh-cards";
    $.ajax({
         url : "index_post.php",
          type : 'post',
          data : { 
              action : action 
          },
        success : function(data, status){
            $('#index-content').html(data);
         }
    });
  }

index_post.php content

<?php
if ($_POST['action'] === "refresh-cards"){
?>
    <div class="form-outline form-white mt-3">
        <input type="text" id="incident-number" class="form-control" />
        <label class="form-label" for="incident-number">Enter Incident Number here</label>
    </div>
<?php
}
?>

Edit :Saw this and added this code after my ajax and it works

document.querySelectorAll('.form-outline').forEach((formOutline) => {
    new mdb.Input(formOutline).init();
});

*_Expected behavior_*Border outline to be shown when returning input field via ajax

*_Actual behavior_*Border outline not shown

Resources (screenshots, code snippets etc.)



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

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.2.0
  • Device: Any
  • Browser: Chrome
  • OS: Any
  • Provided sample code: No
  • Provided link: No