更新按钮没有在Rails表单

时间:2017-03-11 00:35:35

标签: javascript jquery ruby-on-rails ruby forms

我在我的rails应用程序中有一个典型的两个表单设置,一个用于创建,一个用于编辑/更新。我的创建表单完美无缺,但由于某种原因,我的更新表单按钮没有做任何事情。点击时没有任何事情发生,就好像按钮已被停用或某事。我的假设是,Javascript发生了一些不可思议的事情,但我无法找到任何可能导致此问题的事情。我也想过可能有一个缺少关闭的html元素,但事实并非如此,因为我有一个检测这些的RubyMine。我被困在这几个小时!

索引页面上的表格:

index.html.erb

<%= form_for(@suggested_invite, remote: true) do |f| %>
      <div class="modal fade" id="mynewsuggestedinvite" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="myModalLabel">Suggested Invite</h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal" id="mynewsuggestedinviteclose">Close</button>
              <%= submit_tag "Create", class: "btn btn-primary" %>
            </div>
          </div>
        </div>
      </div>
  <% end %>

_suggested_invite.html.erb

<%= form_for(suggested_invite, :method => :put, remote: true) do |f| %>
     <div class="modal fade" id="myupdatesuggestedinvite_<%= suggested_invite.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-lg">
         <div class="modal-content">
           <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title" id="myModalLabel">Edit</h4>
           </div>
           <div class="modal-footer">
             <button type="button" id="myupdatebutton_<%= suggested_invite.id %>" class="btn btn-default" data-dismiss="modal">Close</button>
             <%= submit_tag "Update", class: "btn btn-primary" %>
           </div>
         </div>
       </div>
     </div>
 <% end %>

dashboard.js.erb

$(document).ready(function(){
    $(".city").on("change keyup", function() {
        var city = $(this).val()
        $.getJSON("https://maps.googleapis.com/maps/api/geocode/json?address="+encodeURIComponent(city), function(val) {
            if(val.results.length) {
                var location = val.results[0].geometry.location
                $(".lat").val(location.lat)
                $(".lon").val(location.lng)
            }
        })
    })
    function readURL(input) {

        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('.blah').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    $(".imgInp").change(function(){
        readURL(this);
    });

    $('.modal').on('shown.bs.modal', function ()
    {
        var input = $('#'+this.id + ' .city')[0];
        var autocomplete = new google.maps.places.Autocomplete(input);
        google.maps.event.addDomListener(window, 'load');
    });

    $('#mynewsuggestedinvite').on('hide.bs.modal', function () {
        $('#mynewsuggestedinvite .form-control').val('');
        $('#mynewsuggestedinvite .imgInp').val('');
        $('#mynewsuggestedinvite .blah').attr("src", "placeholder-image.png");
    });

    $(function () {
        $('input[type="file"]').change(function () {
            if ($(this).val() != "") {
                $(".card-image").val($(this).val());
            }else{
                $(this).css('color', 'transparent');
            }
        });
    });

});

index和_suggested_invite partial共享相同的javascript文件。我知道JS文件工作正常,因为索引文件中的创建表单工作正常。我很失落,如果我能提供更多信息,请告诉我。

修改

我添加了一个onClick事件处理程序,当单击按钮时,事件就会启动。我现在比以前更加困惑。

1 个答案:

答案 0 :(得分:0)

submit_tag更改为f.submit

<%= f.submit "Update", class: "btn btn-primary" %>

希望有所帮助!