none
How do I reinitialize a Office UI Fabric Dropdown RRS feed

  • Question

  • Hi! I'm trying to use Office UI Fabric Dropdown JS (for vanilla JS, not for React and not for AngularJS) and I need some help figuring out how to reinitialize a dropdown efter adding more items in the select|options.

    My case is:

    I have a empty dropdown, that I populate dynamically with a JS query from a SharePoint list.

    When I have the dropdown populated I need to reinitialize the UI component but all I have is the example from the git page and that makes no sense when reinitializing one component. I also need to address reinitialization of ONE of many dropdowns. pleeeeze help me.

    Here is the code for the dropdown:

    <div class="ms-Dropdown" tabindex="1" id="KundDropDown">

    <label class="ms-Label" id="KundLabel">Kund</label>

    <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>

    <select class="ms-Dropdown-select" id="KundSelect">

    <option value="0"></option>

    </select>

    </div>


    Here is the code for my reintialization right now:

    $('span').remove('.ms-Dropdown-title');
    $("ul").remove(".ms-Dropdown-items");
    var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
    for (var i = 0; i < DropdownHTMLElements.length; ++i)
    {
        var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i])
    }
    The problem is when I run the reinitialization now all the dropdowns are resetting the selected values to nothing.

    Friday, January 20, 2017 3:21 PM

Answers

All replies

  • Hi,

     

    There is no options in your dropdown list, below code works fine based  on my test.

     

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css">
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css">
        <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
                for (var i = 0; i < DropdownHTMLElements.length; ++i) {
                    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
                }
            })
        </script>
    </head>
    <body>
        <div class="ms-Dropdown" tabindex="1">
            <label class="ms-Label">Dropdown label</label>
            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
            <select class="ms-Dropdown-select">
                <option value="0">test</option>
                <!--<option>Choose a sound hellip</option>
                <option>Dog barking</option>
                <option>Wind blowing</option>
                <option>Duck quacking</option>
                <option>Cow mooing</option>-->
            </select>
        </div>
    </body>
    </html>
    

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, January 23, 2017 3:47 AM
  • Of course it has no options. I populate the options dynamically with JavaScript after the page is rendered, as I wrote in the first post

    I have a page with several dropdowns. When I choose a value from another dropdown in this case year and month I make a query against a SharePoint list that returns the compays from that period. Then I create one <option> per company all in one JavaScript function so the function runs after the page has been rendered and the dropdowns has been initialized a first time so the values in the year and month dropdown is visible

    Then I need to reinitialize the dropdown so all the new options is visible. Right now the code removes all the items from all the dropdowns and reinitialises all of them because I have not been able to reinitialize just one dropdown. The problem with my current method that is that the other two dropdowns are loosing their selected value

    Saturday, January 28, 2017 8:26 AM
  • Hi,

     

    I think you could add your reinitialize logic after dropdown list dynamically generated.

    For example:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>    
        <link href="css/fabric.min.css" rel="stylesheet" />
        <link href="css/fabric.components.min.css" rel="stylesheet" />
        <script src="JS/fabric.min.js"></script>
        <script src="JS/jquery.min.js"></script>
        <script type="text/javascript">
            //$(function () {
                
            //})
    
            function Init() {
                $('<option value="0">test</option>').appendTo($('.ms-Dropdown-select'));
                $('<option value="1">test1</option>').appendTo($('.ms-Dropdown-select'));
                $('<option value="2">test2</option>').appendTo($('.ms-Dropdown-select'));
    
                var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
                for (var i = 0; i < DropdownHTMLElements.length; ++i) {
                    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
                }
            }
        </script>
    </head>
    <body>
        <div>
            <input id="Button1" onclick="Init();" type="button" value="button" />
        </div>
        <div class="ms-Dropdown" tabindex="1">
            <label class="ms-Label">Dropdown label</label>
            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
            <select class="ms-Dropdown-select">            
                <!--<option>Choose a sound hellip</option>
                <option>Dog barking</option>
                <option>Wind blowing</option>
                <option>Duck quacking</option>
                <option>Cow mooing</option>-->
            </select>
        </div>
    </body>
    </html>

     

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com


    Sunday, January 29, 2017 12:01 PM
  • Hi,

    Is any update for your issue?

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, February 9, 2017 8:59 AM
  • Hello! Yes. that is not a good solution either.

    Before I init it looks like this:

    Before Init

    and after init it looks like this:

    After Init

    The problem is that I need to init the all the drop downs first so it looks ok and I can choose year and month and THEN add the <option> to the "Companies" dropdown and reinit the Companies dropdown unless there is a way to call the dropdown as an object and it has a method for adding options?

    It feels really like I'm doing something wrong. For me the most natural thing would have been something like this made up pseudocode

    var myDropdown = $("#ms-Label-id");

    myDropdown.addOption("Option 1 Value", "Option 1 Text);

    myDropdown.addOption("Option 2 Value", "Option 2 Text);

    Tuesday, February 14, 2017 1:52 AM
  • Hi,

    Here is the workaround for your reference.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.min.css">
        <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/css/fabric.components.min.css">
        <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="JS/refresh.js"></script>
        <script type="text/javascript">
            $(function () {
                var DropdownHTMLElements = document.querySelectorAll('.ms-Dropdown');
                for (var i = 0; i < DropdownHTMLElements.length; ++i) {
                    var Dropdown = new fabric['Dropdown'](DropdownHTMLElements[i]);
                }          
            })
    
            function update() {
                $("div[tabindex='1']").find('.ms-Dropdown-select').empty();
                $('<option value="0">test</option>').appendTo($("div[tabindex='1']").find('.ms-Dropdown-select'));
                $('<option value="1">test1</option>').appendTo($("div[tabindex='1']").find('.ms-Dropdown-select'));
                $('<option value="2">test2</option>').appendTo($("div[tabindex='1']").find('.ms-Dropdown-select'));
                //$('<li class="ms-Dropdown-item">test</li>').appendTo('ms-Dropdown-items');
                $("div[tabindex='1']").find('.ms-Dropdown-items').remove();
                $("div[tabindex='1']").find('.ms-Dropdown-title').remove();
                
                var DropdownHTMLElements = $("div[tabindex='1']");//document.querySelectorAll('.ms-Dropdown');
                for (var i = 0; i < DropdownHTMLElements.length; ++i) {
                    var Dropdown = new fabric['Dropdown']($(DropdownHTMLElements)[0]);
                }
            }
        </script>
    </head>
    <body>
        <div class="ms-Dropdown" tabindex="1">
            <label class="ms-Label">Dropdown label</label>
            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
            <select class="ms-Dropdown-select">
                <option value="0"></option>
                <!--<option>Choose a sound hellip</option>
                <option>Dog barking</option>
                <option>Wind blowing</option>
                <option>Duck quacking</option>
                <option>Cow mooing</option>-->
            </select>
        </div>
        <input id="Button1" onclick="update()" type="button" value="button" />
    
        <div class="ms-Dropdown" tabindex="2">
            <label class="ms-Label">Dropdown label</label>
            <i class="ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown"></i>
            <select class="ms-Dropdown-select">
                <option value="0">dd2</option>
                <!--<option>Choose a sound hellip</option>
                <option>Dog barking</option>
                <option>Wind blowing</option>
                <option>Duck quacking</option>
                <option>Cow mooing</option>-->
            </select>
        </div>
    </body>
    </html>

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Tuesday, February 14, 2017 7:47 AM
  • Thanks. This is pretty much how I already handle it though.

    Here is a link to my blog where I blogged about how I handle it. I think that there should be a more easy way to do this ;)

    https://itgeneralisten.wordpress.com/2017/02/14/the-office-fabric-ui-dropdown/

    Tuesday, February 14, 2017 7:18 PM
  • Hi,

     

    You could mark your sample solution as answer, so it may help others who has similar issue.

     

    Best Regards,

    Lee


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, February 16, 2017 8:35 AM
  • Hi,

    The solution on your blog was really helpful to me and I wanted to thank you for that.

    If you are comfortable with jQuery, I came up with a function that may be helpful to others.

    function fabricUninitDropDown(selector) {
        var dropdown = $(selector);
        $(dropdown).find("select").innerHTML = "<option></option>";
        $(dropdown).find(".ms-Dropdown-title").remove();
        $(dropdown).find(".ms-Dropdown-items").remove();
    }
    After calling this you will have to re-populate and re-initialize your ".ms-Dropdown".

    Friday, November 10, 2017 12:32 AM