Rails UJS Ajax вызова путем изменения скрытых входного значения

Question

У меня есть скрытые поля ввода с необходимыми данными атрибутов для использования Rails UJS поддержки Ajax:

<%= hidden_field_tag 'step-value', 0, data: { remote: true, url: comments_path, method: :get, params: "commentable_id=#{@contact.id}&commentable_type=#{@contact.class.demodulized_name}&user_id=#{current_user.id}", type: :html } %> 
<div class="input-group-content form-control-static"> 
    <div id="slider-step" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span> 
    </div> 
</div> 

documentation заявляет вы можете применить «данные-URL» и «data-remote» в элемент формы, и когда значение элемента формы изменяется, будет вызван вызов ajax.

Это не относится к скрытым полям ввода. У меня есть скрытое поле ввода, измененное с помощью javascript:

$("#slider-step").slider({value: 0, min: 0, max: 1, step: 1, 
    slide: function (event, ui) { 
    $('#step-value').val(ui.value); 
    } 
}); 

И вызов ajax никогда не был выполнен. Как я могу вызвать вызов ajax со скрытыми элементами формы, используя Rails UJS?

Answer 1

Это было довольно просто. Я прочитал код rails.js по адресу github.

Во-первых, она определяет переменную-член с именем inputChangeSelector, и это будет прослушивать определенные события на селекторы управления формы с атрибутом данных, удаленный:

inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]', 

Теперь событие, которое мы придаем этим селекторов использует концепцию пользовательских событий и пространств имен событий. В качестве denoted здесь мы можем создать наши события для присоединения к селектору на делегате on(), а затем использовать метод trigger() для запуска этих событий.

$(".lightbulb").on("light:toggle", function(event) { 
    var light = $(this); 
    if (light.is(".on")) { 
     light.removeClass("on").addClass("off"); 
    } else { 
     light.removeClass("off").addClass("on"); 
    } 
}); 

$(".switch, .clapper").click(function() { 
    var room = $(this).closest(".room"); 
    room.find(".lightbulb").trigger("light:toggle"); 
}); 

Это решение гораздо более элегантно, чем с помощью встроенного в событии нажатия на .Подать или .clapper селектора, потому что мы держим поведение лампочек к элементу лампочки и не смешивая его с другими элементами.

Другой пункт - это пространства имен, такие как described. Имя события может быть присвоено пространствами имен событий, которые упрощают удаление или запуск события. Например, «click.myPlugin.simple» определяет как myPlugin, так и простые пространства имен для этого конкретного события click. Обработчик события щелчка, прикрепленный через эту строку, можно удалить с помощью .off («click.myPlugin») или .off («click.simple»), не нарушая других обработчиков кликов, прикрепленных к элементам.

Таким образом, в случае библиотеки Rails UJS, это следующее событие прилагается к элементам управления формы с атрибутом данных, удаленный:

$document.delegate(rails.inputChangeSelector, 'change.rails', function(e) { 
    var link = $(this); 
    if (!rails.allowAction(link) || !rails.isRemote(link)) return rails.stopEverything(e); 

    rails.handleRemote(link); 
    return false; 
}); 

Так как я могу стрелять это событие? Простой:

$("#slider-step").slider({value: 0, min: 0, max: 1, step: 1, 
     slide: function (event, ui) { 
      $('#step-value').val(ui.value); 
      $('#step-value').trigger('change.rails'); 
     } 
    }); 

И это сработало.