Init / update fields


Topic: Init / update fields

dagaey asked 2 years ago

I have a form which has many fields and based upon certain logic sometimes shows fields, sometimes hides them and sometimes disables them.

I am currently using the following to initialize the fields:

document.querySelectorAll('.ed-text').forEach((txtf) => {
        new mdb.Input(txtf).init();
    });

    document.querySelectorAll('.ed-date').forEach((dtp) => {
        new mdb.Datepicker(dtp, {
          title: 'Datum auswählen',
          monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
          monthsShort: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dez'],
          weekdaysFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
          weekdaysShort: ['Son', 'Mon', 'Die', 'Mit', 'Don', 'Fre', 'Sam'],
          weekdaysNarrow: ['S', 'M', 'D', 'M', 'D', 'F', 'S'],
          okBtnText: 'Ok',
          clearBtnText: 'Klar',
          cancelBtnText: 'Schließen',
        });
    });

    document.querySelectorAll('.ed-select').forEach((slct) => {
        new mdb.Select(slct);
    });

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

The problem is that if I run the code again for a new logic, this causes errors as some fields are initialized again. Do I need to destroy existing inputs and if so how? Or is there a way to do "Init or update" for these types of fields (text,select, datepicker) ?


kpienkowska staff answered 2 years ago

This depends on the input type. For select you need to dispose of it every time you change it and init again with new options.

For Timepicker you have the update method available. For form-outline also you can do:

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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 6.2.0
  • Device: desktop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No
Tags