레일스 javascript 버튼을 사용하여 게시물을

Question

사용자가 두 개의 버튼을 사용하여 왼쪽에서 오른쪽으로 항목을 이동할 수있는 양식을 만들었습니다. 사용자가 항목 추가를 마친 후에는 &이라는 그룹 이름을 지정할 수 있습니다. 적어도 그것이 작동해야하는 방법입니다. 대신 하나의 항목을 추가하고 '오른쪽으로 이동'버튼을 클릭하면 POST 액션이 실행됩니다. 내 자바 스크립트 구동 버튼이 submit_tag 대신 POST 작업을 실행하는 이유는 무엇입니까? 여기

양식이 어떻게 표시되는지를 보여줍니다 view/settings/global.html.erb 같은 :

뷰에서 양식 코드 :

class SettingsController < ApplicationController 
    before_action :get_company_and_locations 

    def global 
    get_network_hosts 
    end 

end 

: 뷰 settings_controller.rb를로드하기위한

<%= form_tag '/create_host_group', id: "host_group_form", class: "form-horizontal" do %> 

    <%= label_tag "Group Name", nil, required: true, class: "control-label col-md-2 col-sm-2 col-xs-12" %> 
    <%= text_field_tag 'host_group_name', nil, class: "form-control" %> 

    <%= label_tag "Available Hosts", nil, class: "control-label col-md-2 col-sm-2 col-xs-12" %> 
    <select id="hosts_available" class="form-control" size="30" multiple> 
    <% @network_hosts.each do |n| %> 
     <option value="<%= n.id %>"><%= n.ip_address %></option> 
    <% end %> 
    </select> 

    <button id="btnRight" class="btn btn-success"><i class="fa fa-2x fa-forward"></i></button> 
    <br/> 
    <button id="btnLeft" class="btn btn-danger"><i class="fa fa-2x fa-backward"></i></button> 

    <select id="hosts_assigned" class="form-control" size="30" multiple></select> 

    <%= submit_tag "Add Group", class: "btn btn-success" %> 
<% end %> 

<script> 
    $("#btnLeft").click(function(){ 
    var selectedItem = $("#hosts_assigned option:selected"); 
    $("#hosts_available").append(selectedItem); 
    }); 

    $("#btnRight").click(function(){ 
    var selectedItem = $("#hosts_available option:selected"); 
    $("#hosts_assigned").append(selectedItem); 
    }); 
</script> 

내 컨트롤러에서

POST 작업이 호출됩니다.

class NetworkHostGroupsController < ApplicationController 

    def create 
    group_name = params[:host_group_name] 
    assigned_hosts = params[:hosts_assigned] 
    puts "#{group_name}: #{assigned_hosts}" 
    end 

end 

을 그리고 내 경로는 다음과 같습니다 :

match '/global_settings', to: 'settings#global', via: 'get' 
match '/create_host_group', to: 'network_host_groups#create', via: 'post' 

Answer 1

버튼 요소의 기본을 submit에 클릭에 난 그냥 지금 디버깅하기 위해 노력하고있어, 이는 network_host_groups_controller#create을 보내고.

type="button" 속성을 추가하여 브라우저에서 양식을 제출해서는 안된다는 것을 나타냅니다.

<button type="button" id="btnRight" class="btn btn-success"> 

또한 기본을 방지 할 수있는 [`preventDefault`] (https://api.jquery.com/event.preventdefault/) FALSE '반환 또는 전화'에 자바 스크립트`click` 핸들러를 변경할 수 있습니다