[Dropdown] Allow initialized dropdowns to attach events to dynamically added menu items

[cowwoc]

http://stackoverflow.com/a/22214965/14731

We'd like to populate a dropdown menu dynamically. The problem is that we must invoke dropdown() each time the menu contents changes (otherwise the items are not clickable) but on the other hand this causes the component's "defaults" to get overwritten. Meaning, "restore defaults" no longer works.

We'd like to be able to notify the module of new menu items without losing the existing state (such as "defaults").

[arturluizbr]

A workaround approach:

function setDinamicOptions(selector, options) {
    var att = "data-dinamic-opt";
    $(selector).find('[' + att + ']').remove();
    var html = $(selector + ' .menu').html();
    for(key in options) {
        html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
    }
    $(selector + ' .menu').html(html);
    $(selector).dropdown();
}
$("#programmetype").dropdown({
    onChange: function (val) {
        if (val == "val1")
            setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
        if (val == "val2")
            setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
        if (val == "val3")
            setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
    }
});

[cowwoc]

@arturluizbr How does this code workaround the problem? Doesn't the dropdown get re-initialized every time and overwrite the "defaults" value?

[arturluizbr]

I though that you are complaining about defaults options in dropdown itself, but on a second though you're speaking about default component configuration.

'-'

[jlukic]

Dropdown needs a refresh method like some other modules, or possibly to use event delegation for items.

Marked as an enhancement.

[jlukic]

Added a refresh method in 1.0 specifically for refreshing the selector cache.

You will need to use beta version and call refresh after new content is loaded

$('.ui.dropdown').dropdown('refresh');

[aramk]

@jlukic that's a great addition. I found the issue and was calling dropdown() again, but this binds the event handlers twice and causes a trigger('change') twice, causing issues in my app the more times I needed to call dropdown(). Would it be possible for Semantic-UI to store a variable internally and allow us to call dropdown() without the "refresh"? That is if the refresh has no effect other than ensuring all events are bound etc. Otherwise the burden lies with the user to store this variable and ensure the correct method is called on both init and an update.

[jlukic]

@aramk Since my comment in September, you shouldn't need to use refresh when updating menu content. It automatically calls it internally using DOM Mutations when it observes changes.

https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/dropdown.js#L112

[aramk]

Cheers @jlukic, I'll try that.

[ijidau]

I have a scenario where the options inner HTML changes, but this mutation does not seem to trigger a change in the dropdown()

<option value="2b32ig9bwfvkd">James <span>(33)</span></option>

The number updates due to a DOM changes triggered by Meteor.js but the dropdown() does not update. Any way to make this happen?

Alternatively, what's the correct way to completely remove and rebuild the dropdown?

[jlukic]

@ianjonesidau Is this what you're looking for? https://github.com/Semantic-Org/Semantic-UI/issues/1789#issuecomment-74102863

[ijidau]

@jlukic Meteor.js mutates the DOM, so it handles the AJAX. Your second suggest works for me thanks! 'refresh' then 'setup select'.