CODEWITHSUNDEEP
jquerydjangosemantic-ui
Michael Tedla
Michael Tedla

Reputation: 1159

semantic-ui dropdown's onChange not firing

I'm using semantic-ui along with Django and I have the following dropdown in a form:

HTML

<form id="lang_form" action="{% url 'set_language' %}" method="post">
  {% csrf_token %}
  {% get_current_language as LANGUAGE_CODE %}
  {% get_available_languages as LANGUAGES %}
  {% get_language_info_list for LANGUAGES as languages %}
  <input id="lang_input" name="language" type="hidden">
  <div id="lang_dropdown" class="ui icon dropdown button ">
    <span class="text"></span>
    <div class="menu">
      {% for language in languages %}
        <div class="item" data-value="{{language.code}}">
          <i class="{{language.code|flag_class}} flag"></i>
        </div>
      {% endfor %}
    </div>
  </div>
</form>

What I'm trying to do is set the value of the dropdown via jquery initially and after that attach a function to the onChange event.

jquery

$("#lang_dropdown").dropdown('set selected', "{{LANGUAGE_CODE}}");

var flagChange = function(value, text, $choice){
    value = $("#lang_dropdown").dropdown('get value');
    if(value != "{{LANGUAGE_CODE}}"){
      $("#lang_input").val(value);
      $("#lang_form").submit();
    }
};
$("#lang_dropdown").dropdown({
  onChange: flagChange
});

What's happening is flagChange fires when the dropbox is initially set, which is not my main problem, although the reason it fires despite having been attached to onChange AFTER the initial assignment escapes me.

The main problem is flagChange is not firing thereafter whenever I click the dropdown and change the selected value.

Upvotes: 1

Views: 5075

Answers (2)

Jake Almer
Jake Almer

Reputation: 668

You might want to check out this issue: https://github.com/Semantic-Org/Semantic-UI/issues/3744

Looks like there is a bug when adding onChange handlers after the initial dropdown creation. Try adding the change handler during the initial creation.

Upvotes: 1

challet
challet

Reputation: 972

You should use the <select> <option> version of the dropdown : http://semantic-ui.com/modules/dropdown.html#converting-form-elements.

I don't know how Semantic-UI deals with the event, but imho the 'change' event is a basic html/js one and triggers only on that kind of elements.

Upvotes: 0

Related Questions