Как отрендерить select при ajax-запросе?

214
28 июля 2017, 03:38

Суть такая: я выбираю первый select и в зависимости от значениея value (из первого селекта), у меня строится второй select. т.е. я отправляю get-запрос с параметром code в контроллер и хочу получить в ответ нужный мне массив. Мне нужно получить данные с контроллера.

Данные в контроллер отправляются. Там на основе этих данных у меня появляется массив @point

Вопрос в том: Как отрендерить теперь это во вьюхе. В partial переменная @point есть с нужными значениями(когда выбрал город). Скорее как с помощью js ее отрендерить.

index.html.erb:

    <form action="/baskets" data-remote="true">
    <p>Город</p>
    <select name="country_id" id="country_id">
        <option value="0">- выберите город -</option>
        <% @city.sort.each do |city| %>
          <option value="<%=city[1]%>"><%= city[0] %> </option>
        <% end %>
    </select>
    <br><br>
    <p>Пункт выдачи:</p>
    <%= render :partial => 'points', :locals => {:point => @point} %>
    <br><br>
    <p>Стоимость доставки:</p>
</form>
<script>
  $(document).ready(function () {
      $('#country_id').change(function () {
          var country_id = $(this).val();
          $('#region_id').html('<option>загрузка...</option>');
          $.ajax({
              type: "GET",
              url: '/baskets',
              data: { code: country_id },
              dataType: "json",
              success: function(){
                $('#region_id').html('<%= j(render :partial => "points", :locals => {:point => @point}) -%>');
                $('#region_id').attr('disabled', false);
              }
          });
      });
  });
</script>

_points.html.erb

<select name="region_id" id="region_id" disabled="disabled">
  <option value="0">- выберите пункт -</option>
  <% @point.sort.each do |point| %>
    <option value="<%=point[1]%>"><%= point[0] %> </option>
  <% end %>
</select>

UPD:

Когда смотрю в инспекторе браузера мой запрос, вкладку Preview, то там весь мой JS код, где в Ajax success весь мой нужный select, я так предполагал, что там должен быть просто мой select, без JS

$(document).ready(function () {
  $('#country_id').change(function () {
      var country_id = $(this).val();
      $('#region_id').html('<option>загрузка...</option>');
      $.ajax({
          type: "GET",
          url: '/baskets',
          data: { code: country_id },
          dataType: "json",
          success: function(){
            // срендерил
            $('#poop').html('<select name=\"region_id\" id=\"region_id\" disabled=\"disabled\" data-remote=\"true\">\n    <option value=\"0\">- выберите пункт -<\/option>\n      <option value=\"29101\">163000, Архангельск г, Воскресенская ул, д.105 <\/option>\n      <option value=\"204\">163000, Архангельск г, Воскресенская ул, д.12 <\/opвведите сюда кодtion>\n      <option value=\"29041\">163000, Архангельск г, Троицкий пр-кт, д.158 <\/option>\n      <option value=\"29071\">163002, Архангельск г, Ломоносова пр-кт, д.16, корпус 1 <\/option>\n      <option value=\"29081\">163009, Архангельск г, Ленинградский пр-кт, д.40, строение 3 <\/option>\n      <option value=\"29141\">163020, Архангельск г, Советская ул, д.32 <\/option>\n      <option value=\"29111\">163053, Архангельск г, Аэропорт Архангельск тер, д.8 <\/option>\n      <option value=\"29131\">163065, Архангельск г, Московский пр-кт, д.49, оф. 2-09 <\/option>\n<\/select>');
            $('#region_id').attr('disabled', false);
          }
      });
  });
});
READ ALSO
Узнать имеет ли объект/переменная/поле значение

Узнать имеет ли объект/переменная/поле значение

Возможно ли в js узнать существование значения отличного от null? В голову приходит простое решение:

210
Wordpress infinite scroll (без jQuery и плагинов)

Wordpress infinite scroll (без jQuery и плагинов)

Делаю бесконечный скрол, но не нашел ничего на pure jsПроблема возникает при отправке запроса к admin-ajax

229
Как проверить с помощью moment.js возраст?

Как проверить с помощью moment.js возраст?

Как проверить с помощью momentjs возраст

196
Привязка контекста объекта к внутренним фунциям метода

Привязка контекста объекта к внутренним фунциям метода

У объекта есть метод, записанный в прототип:

233