Semantic-ui: Other ways to trigger dropdown's onChange? It does not fire with 'set selected'

[xxRockOnxx]

I have a simple setup like

$element.dropdown({
  fullTextSearch: true,
  onChange: function() {}
})

and then have an ajax at the end to pre-fill it

$.ajax({
 // settings here
})
.done(
  // iterate results and made <div class="item" data-value=value here>text here</div> with it
  // and added it using .html()

  $element
    .dropdown('set selected', 'defaultValue')
)

onChange does not fire when doing that. Tried putting it insde setTimeout and still not working.

BUT it does work when manually clicking or doing it from the console like $element.dropdown('set selected', 'otherValue')

I can see the defaultValue being selected but it's just the event onChange not firing.

tried doing .find() and .trigger('change') on the hidden input but no luck. even triggering change from the dropdown itself.

[awgv]

Hi @xxRockOnxx, when it’s done() and you populated it with options, try executing the $el.dropdown('refresh') before selecting the default value, and please let me know if it helped:

$element
  .dropdown('refresh')
  .dropdown('set selected', defaultValue)

[xxRockOnxx]

@Banandrew tried .dropdown('refresh') before asking thought it might help but unfortunately no.

[awgv]

I couldn’t reproduce: http://jsfiddle.net/Banandrew/arp7hs5j Maybe it’s a different use case, and I didn’t understand what you were trying to do, please provide a test case; you can fork this JSFiddle.

[xxRockOnxx]

Here's the actual code and the difference between yours and mine is that I use html instead.

<div class="field">
    <label>Province</label>
    <div class="ui disabled loading fluid selection search dropdown" id="dropdown-province">
        <input type="hidden" name="address[province]">
        <i class="dropdown icon"></i>
        <input class="search" autocomplete="off" tabindex="0">
        <div class="text"></div>
        <div class="menu" tabindex="-1"></div>
    </div>
</div>

<script type="text/javascript">
  var
    $dropdownProvince = $('#dropdown-province')

    $dropdownProvince.dropdown({
    fullTextSearch: true,
    onChange: function(value) {
        console.log(value)
        alert()
    }
    })

   $.ajax({
        url: '/api/v1/provinces',
    })
    .done(function(provinces) {
        var items = ''

        for (province of provinces) {
            items += '<div class="item" data-value="' + province.provCode + '">' + province.provDesc + '</div>'
        }

        $dropdownProvince
            .find('.menu')
            .html(items)

        $dropdownProvince
            .removeClass('loading')
            .removeClass('disabled')

        // This is the default one
        $dropdownProvince
            .dropdown('set selected', '354')
            .dropdown('set text', 'Pampanga')
    })
</script>

[xxRockOnxx]

O.o well that's weird. Aside from I am really sure I tried adding .dropdown('refresh') before asking... I still tried again adding .dropdown('refresh') this time and it worked!

I guess this might be a cache problem but how? when I see the code on dev tools change.

Well, another mystery LOL but I should just be happy it worked now

[awgv]

@xxRockOnxx Glad you sorted it out, closing as resolved. 🍻

[xxRockOnxx]

I think I found the cause of the problem in case other might experience the same issue as me.

There was a value attribute on the input itself. Might work if the value is not the same as the one you put in set selected. Doing set selected with the same value as the current one will not trigger a change.