Topic: metarialSelect options disappearing on selection

Kneidels pro asked 4 years ago


I have a select field for frequency , which then controls a secondary set of fields - based on the value of the first:

  1. If the weekly frequency option is selected, the user gets a material select drop down to the select the day of week (Sun-Sat)
  2. If the monthly frequency option is selected, the user gets a material select drop down to the select the day in the month (1-30)
  3. If once in 3 months, once in 6 months, or once a year frequency options are selected - the datepicker field should appear.

The problem is that when the weekly/month options, the initial/primary frequency select just disappears!

The 2nd issue is that i cant get the datepicker to trigger. I tried using a snippet sent by one of the tech supporters, from here, but it didnt seem to work.

Here is my snippet: https://mdbootstrap.com/snippets/jquery/moshe/2520950?view=standard

And here is my JS code:

$(document).ready(function() {
 $("#frequencyType").materialSelect();


    $("#frequencyType").change(function(){
        var frequencyType = $("#frequencyType option:selected").val();
        alert(frequencyType);

        if (frequencyType=='w') {
            $("#frequencyAmount_m").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").hide();
            $("#frequencyAmount_w").show().addClass("mdb-select").materialSelect();    //.show().addClass("required");

        } else if (frequencyType =='m') {
            $("#frequencyAmount_w").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").hide();
            $("#frequencyAmount_m").show().addClass("mdb-select").materialSelect();    //.show().addClass("required");

        } else if (frequencyType =='y') {
            $("#frequencyAmount_w, #frequencyAmount_m").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").show();
            $("#frequencyDate").datepicker();
            $('#frequencyDate').on('click', () => {
                $('i').trigger('click')
            });

            $("#frequencyDate").addClass("required");

        } else if ( (frequencyType =='z')|| (frequencyType =='x')) {
            $("#frequencyAmount_w, #frequencyAmount_m").hide().materialSelect({destroy: true});
            $("#frequencyDateHolder").show();
            $("#frequencyDate").datepicker();
            $('#frequencyDate').on('click', () => {
                $('i').trigger('click')
            });

            $("#frequencyDate").attr('placeholder','Starting from date').addClass("required");
        }



    });



});

Krzysztof Wilk staff answered 4 years ago


Hi!

I made some corrections in your snippet, now everything should work :) https://mdbootstrap.com/snippets/jquery/moshe/2520950?view=standard

Best regards


Kneidels pro commented 4 years ago

Thanks so much!

So i see the datepicker method must be applied to the container of the fields and not the field itself?

Also - what was causing the original drop down to disappear? I dont see what the issue was an how you fixed that?


Krzysztof Wilk staff commented 4 years ago

I just wrapped your selects into divs and applied the date picker to the container :) About the second one, you can see how it is working here https://mdbootstrap.com/docs/jquery/forms/date-picker/

Best regards



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

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.19.1
  • Device: PC
  • Browser: Firefox
  • OS: Win10
  • Provided sample code: Yes
  • Provided link: Yes