Почему мои раскрывающиеся параметры обновляются после вызова Ajax в исходном коде, но не в пользовательском интерфейсе? - PullRequest
Новая
       28

Почему мои раскрывающиеся параметры обновляются после вызова Ajax в исходном коде, но не в пользовательском интерфейсе?

0 голосов
/ 24 апреля 2019

У меня есть несколько выпадающих кнопок Django, которые я хочу, изначально пустые, но у меня есть скрипт, который вызывается, чтобы выбрать параметры выпадающего списка.Я вижу, что параметры заполняются в исходном коде, но на самом деле они не отображаются в пользовательском интерфейсе, когда я нажимаю на раскрывающийся список.Я неправильно пишу свой вызов Ajax?

html:

    <div>
      <table>
        <tr>
          <td>
              <!-- adding dropdown selector for cryptocurrency symbol (type) -->
              <div id="symbol_selection" class="input-field col s12">
                <select id="selected_symbol">
                  <option value="" disabled selected>Choose your CryptoCurrency</option>

                </select>
              </div>
          </td>
          <td>
              <!-- adding dropdown selector for cryptocurrency market (physical currency type) -->
              <div id="market_selection" class="input-field col s12">
                <select id="selected_market">
                  <option value="" disabled selected>Choose your Market</option>
                </select>
              </div>
          </td>
          <td>
              <!-- adding function test button -->
            <a class="waves-effect waves-light btn" id="test_btn" onclick="test_fxn()">Run Test</a>
          </td>
        </tr>
      </table>

    </div>

My Ajax Call:

$(document).ready(function() {

  $.ajax({
    method: 'GET',
    url: "dropdowns",
    data: {
      "gettem": "gettem"
    },
    success: function(data) {
      var op_items = data.symbols;
      var markets = data.markets;

      for (var i = 0; i < op_items.length; i++) {
        console.log(op_items[i])
        option = "<option value=" + op_items[i] + ">" + op_items[i].toString() + "</option>";
        $("#symbol_selection select").append(option);
      }
      for (var i = 0; i < markets.length; i++) {
        console.log(markets[i])
        option = "<option value=" + markets[i] + ">" + markets[i] + "</option>";
        $("#market_selection select").append(option);
      }

    },

  });
});
</script>

enter image description here

Синие области представляют первый раскрывающийся список, а красные - второй.Вывод данных (в вызове Ajax) печатается в журнале консоли и отображается в средстве просмотра исходного кода в правом верхнем углу, совпадая с возвращенными параметрами Ajax.

enter image description here

1 Ответ

0 голосов
/ 24 апреля 2019

Я не знаю, столкнется ли кто-нибудь еще с этой проблемой, но после некоторого поиска я нашел решение.Мой выпадающий список является материализованным (выпадающим) селектором, но для его инициализации требуется скрипт.Это не очень понятно в их документации, но вы также должны включить метод OnChange.

Синтаксис на странице не совсем соответствует последней версии, но после игры я получил еена работу. 

   <script type="text/javascript">
      //~Method below is needed to initialize the materialize selection dropdown
      $(document).ready(function(){
          $('select').formSelect();
      });
      //~Method below is needed to add the update feature when dynamically adding options
      //~This must be triggered after the changes occur in the ajax call.
      $('SELECT').on('contentChanged', function() {
          $(this).formSelect();
      });
    </script>

Еще один маленький нюанс (-_-), вы также должны активировать его.Я предположил, даже после обнаружения, что изменение означает, что это слушатель любого изменения, но вы должны включить его в свой вызов Ajax. 

$.ajax({
              method: 'GET',
              url: "django_url_to_your_script",
              data:{"test":"test"},
              success:function(data){
                var op_items = data.symbols;
                var markets = data.markets;


                for(var i = 0 ; i < op_items.length; i++){
                  option = "<option value="+ op_items[i]+">"+ op_items[i].toString() +"</option>";
                  $("#symbol_selection select").append(option);
                }
                for(var i = 0 ; i < markets.length; i++){
                  option = "<option value="+ markets[i] + ">"+ markets[i] +"</option>";
                  $("#market_selection select").append(option);
                }
                  //THIS IS THE KEY! AFTER ALL YOU ADDITIONS HAVE BEEN MADE
                  //FORCE THE ONCHANGE TRIGGER TO OCCUR.
                  $("#market_selection select").trigger('contentChanged');
                  $("#symbol_selection select").trigger('contentChanged');

              },

            });

Теперь я получаю свой выпадающий список, который был добавлен:enter image description here

...