Вызовите rails action из списка элементов через javascript - PullRequest
Новая
       9

Вызовите rails action из списка элементов через javascript

0 голосов
/ 16 сентября 2018

Моя конечная цель - сделать так, чтобы пользователь перетаскивал элементы из списка и помещал их в одно из 5 «ведер». Представьте себе список животных, и вы будете перетаскивать собак и кошек в список млекопитающих, а также змей и игуан в список рептилий и т. Д.

Используя HTML5 Sortable, я могу заставить кого-то перетаскивать элемент в каждый список, но это не сохраняет изменения. Как сделать так, чтобы javascript вызывал действие или маршрут для сохранения элемента после его перемещения?

Это мой основной код 

        <% @cabins.each do |cabin| %>
          <li class="highlight" draggable="true" style="display: list-item;"><%= cabin.name %>-<%= Room.where(name: cabin.name).sum(:clean_time).to_i %></li>
        <% end %>

    </ul>
    Bucket 1
    <ul id="sortable5" class="connected sortable list">
        <li class="highlight" draggable="true">Item 1
        </li><li draggable="true" class="" style="display: list-item;">Item 2
        </li><li draggable="true" class="" style="display: list-item;">Item 3
        </li><li draggable="true" class="" style="display: list-item;">Item 4
        </li><li class="highlight" draggable="true">Item 5
    </li></ul>
    Bucket 3
    <ul id="sortable5" class="connected sortable list">
        <li class="highlight" draggable="true">Item 1
        </li><li draggable="true" class="" style="display: list-item;">Item 2
        </li><li draggable="true" class="" style="display: list-item;">Item 3
        </li><li draggable="true" class="" style="display: list-item;">Item 4
        </li><li class="highlight" draggable="true">Item 5
    </li></ul>
</section>

Это магия JavaScript $ (function () {

        $('#sortable4, #sortable5').sortable({
            connectWith: '.connected'

        });
    });
</script>

Я пытался использовать приведенный ниже код для вызова Ajax, но как мне передать ему переменную rails? А как будет выглядеть маршрут? $ .Ajax ({ тип: "PUT", url: "/ cabins / <% = cab.id%>" });

1 Ответ

0 голосов
/ 16 сентября 2018

В sortable есть пара событий jQuery, которые можно использовать здесь.

  1. изменение 

    $( ".selector" ).on( "sortchange", function( event, ui ) {} );

  2. рода 

    $( ".selector" ).on( "sort", function( event, ui ) {} );

Пожалуйста, ознакомьтесь с этой документацией для получения дополнительной помощи

...