Question

我在模态引导程序中有一个表单，我在其中编辑记录。在Chrome浏览器中工作正常，但在Firefox中无效。会发生什么是提交在Firefox中不起作用。关于这个问题的一些想法？请查看以下部分代码。

布局/ application.html.erb

(...)

<div class="content">
    <%= yield %>
</div>

(...)

照片/ index.erb

<h1>Painting Gallery</h1>

<div id="photos">
  <%= render @photos %>
</div>
<div class="clear"></div>

<% if can? :create, @horse.photos.build %>
    <%= form_for([@farm,@horse, @photo], :html => {:multipart => true} ) do |f| %>
        <%= f.label :image, "Upload paintings:" %>
        <%= f.file_field :image, multiple: true, name: "photo[image]" %>
        <%= f.submit %>
    <% end %>
<% end %>

_photo.erb

<%= link_to t("photo.edit"), edit_farm_horse_photo_path(@farm.slug,@horse.slug,photo.id), :remote => true, :data => {:toggle => "modal", :target => "#editPhoto"} %>

_form.erb

<div id="editPhoto" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="editPhotoLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="editPhotoLabel">Editar foto</h3>
  </div>
  <div class="modal-body">
    <%= form_for([@farm,@horse, @photo], :html => { :id => "frmPhoto"},:remote => true) do |f| %>
      <div class="field">
        <%= f.label :name %><br />
        <%= f.text_field :name %>
      </div>
      <p>
        <%= f.file_field :image %>
      </p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <%= f.submit "Salvar" , :id => "btnEnviar" ,:class => "btn btn-primary" %>
  </div>
     <% end %>
</div>

edit.js.erb

$(".content").append('<%= escape_javascript(render("photos/form")) %>');
$("#editPhoto").modal("show");

photos_controller.rb

  def edit
    @photo = Photo.find(params[:id])
  end

  def update
    respond_to do |format|
      @photo = @horse.photos.find(params[:id])
      if @photo.update_attributes(params[:photo])
        format.js
      else
        render :edit
      end
    end
  end

点击编辑链接后会出现模态但是当我点击提交按钮时没有任何反应。单击编辑链接时查看浏览器响应。

$(".content").append('<div id=\"editPhoto\" class=\"modal hide fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"editPhotoLabel\" aria-hidden=\"true\">\n  <div class=\"modal-header\">\n    <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×<\/button>\n    <h3 id=\"editPhotoLabel\">Editar foto<\/h3>\n  <\/div>\n  <div class=\"modal-body\">\n    <form accept-charset=\"UTF-8\" action=\"/criatorio-sagitario/horses/teste--2/photos/9\" class=\"edit_photo\" data-remote=\"true\" enctype=\"multipart/form-data\" id=\"frmPhoto\" method=\"post\"><div style=\"margin:0;padding:0;display:inline\"><input name=\"utf8\" type=\"hidden\" value=\"&#x2713;\" /><input name=\"_method\" type=\"hidden\" value=\"put\" /><input name=\"authenticity_token\" type=\"hidden\" value=\"jNz2kSH0KXGchNKglmN66Vdd/gyMxyyc9jTT5bf50/w=\" /><\/div>\n      <div class=\"field\">\n        <label for=\"photo_name\">Name<\/label><br />\n        <input id=\"photo_name\" name=\"photo[name]\" size=\"30\" type=\"text\" value=\"Original\" />\n      <\/div>\n      <p>\n        <input id=\"photo_image\" name=\"photo[image]\" type=\"file\" />\n      <\/p>\n  <\/div>\n  <div class=\"modal-footer\">\n    <button class=\"btn\" data-dismiss=\"modal\" aria-hidden=\"true\">Close<\/button>\n    <input class=\"btn btn-primary\" id=\"btnEnviar\" name=\"commit\" type=\"submit\" value=\"Salvar\" />\n  <\/div>\n<\/form><\/div>\n\n\n');

$("#editPhoto").modal("show");

Answer 1

解决。我不知道为什么，但“f.submit”不起作用。我在jquery中提交并工作

edit.js.erb

$(".content").append('<%= escape_javascript(render("photos/form"))  %>');

$("#btnEnviar").click(function() {
$("#frmPhoto").submit();
});

$("#editPhoto").modal("show");

当我尝试在firefox中编辑一条记录时，bootstrap模式无法正常工作

1 个答案: