Modal form ajax loaded input fields init form display

morgan_chester asked 3 months ago

Have a modal which is created after the containing form loaded from ajax, so I need to initialize a nice view of mdboostrap inputs after the modal is shown. What's the best way to?

ionyx answered 2 months ago

I had same issue as well. if you load a form via Ajax, it renders the input values with the placeholders appearing directly over the top of the input field value.

found answer here:

Just add  class="active" to your <label> field and it will render correctly after loading from ajax


Piotr Glejzer commented 2 months ago

HI ionyx,
thank you for that answer. Have a nice day!

You can customize your inputs form our documentation. Did you use our documentation about inputs?
Here is a link :
Bootstrap Inputs group

or if you want you can use javascript/jquery to change a view of inputs after showed modal.

Is that resolve your problem? If not let me know I will try to help you again.

morgan_chester commented 2 months ago

no, I mean how to initialize an input view if an input is created on-the-fly or loaded from ajax? It hasn't a nice material label and other material styles like those displayed on the page load

Piotr Glejzer commented 2 months ago

Can you show me an example of what did you try to do or what do you expect or what is not working? It will help a lot.

lede answered 2 months ago

This seems to be a common problem. It should have some instructions for this in the modal demo page I think. I have a form where some of the fields are populated and some aren't so I'm checking each one rather than just adding the active class to every field because that doesn't look right either

if(event.location != '') { $('label[for="location"]').addClass('active'); }

Piotr Glejzer commented 2 months ago

Thank you for your advice. Have a nice day.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No