包含外部 javascript 脚本会中断具有 remote:true 的表单的提交

Question

我有一个 new.html.erb 文件，其中包含一个用于创建新列表的表单。现在此页面还有一个取自 dropzone.js 的 dropzone 元素，用于让用户将图像放在那里，稍后上传。

这个表格有remote:true

代码如下：-

/new.html.erb/

<div class="ui padded page grid">

  <div class="ui eight wide column">

    <%=form_for @listing, :html=> { class:'ui form centered black segment'},remote: true do |f|%>

    <div class="ui black ribbon label">
        <i class="signup icon"></i> New Listing
      </div>
      <h2 class="ui header">
        <i class="settings icon"></i>
        <div class="content">
          Create New Listing
          <div class="sub header">Manage your preferences</div>
        </div>
      </h2>

      <div class="required field">
        <label>Title</label>  
        <%=f.text_field :title,placeholder:'Title of the listing'%>
      </div>
      <div class="two fields">

        <div class="required field">
          <label>Pet</label>
          <%= f.select(:pet_type,options_for_select([['Dog',1,{class:'item'}],['Cat',2,{class:'item'}],['Bird',3,{class:'item'}]]),{prompt:'Pet'},class:'ui dropdown pet_type')%>
        </div>
        <div class="field">
          <label>Breed</label>
          <%= f.select(:breed_type,options_for_select(Breed.all.collect{|x| [x.name,x.id,class:'item']}),{prompt:'Breed'},class:'ui dropdown disabled breed_type')%>
        </div>



      </div>
      <div class="two fields">
        <div class="required field">
          <label>Gender</label>
          <%= f.select(:gender,options_for_select([['Male',1,{class:'item'}],['Female',2,{class:'item'}]]),{prompt:'Gender'},class:'ui dropdown gender')%>
        </div>
        <div class="field">
          <label>State</label>
          <select class="ui search dropdown">
            <option value="">State</option>
            <option value="AL">Alabama</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
          </select>
        </div>

      </div>
      <div class="required field">
        <label>Tell everyone in short about your pet</label>
        <%=f.text_area :love_for_pets%>
      </div>
      <h4 class="ui dividing header">Additional Info</h4>
      <div class="two fields">
        <div class="required field">
          <label>Price</label>
          <div class="ui icon input">
            <%=f.text_field :price,placeholder:"Price"%>
            <i class="rupee icon"></i>
          </div>
        </div>
        <div class="field">
          <label>Phone Number</label>
          <div class="ui icon input">
            <%=f.text_field :phone_no,placeholder:"Phone_no"%>
            <i class="call icon"></i>
          </div>
        </div>



</div>



<div class="ui hidden divider"></div>
<div class="field">
  <div class="ui checkbox">
    <input type="checkbox" name="hot-deals">
    <label>I agree to the <a href="#">Terms of Service</a>.</label>
  </div>
</div>

<div class="ui error message">
  <div class="header">We noticed some issues</div>
</div>
<%=f.submit 'Register',class:'ui button'%>
<div class="ui error message"></div>
<%end%>


</div>

<div class="ui eight wide column">

  <div class="ui black segment dropzone" id="media-dropzone">
    <div class="ui blue right ribbon label">
        <i class="upload icon"></i> Upload Images
      </div>

  <h2 class="ui center aligned icon header dz-message">
    <i class="upload icon"></i>
    <div class="content">
      Upload File
      <div class="sub header">Drop your images here</div>
    </div>
  </h2>
</div>
</div>


</div>

/ListingController/

class ListingsController < ApplicationController
    def new
        @breeds=Breed.all
        @listing=Listing.new
    end

    def create
        @listing=Listing.new(listing_params)
        if @listing.save
            session[:listing]=@listing.id
            respond_to do |format|
                format.js
            end
        end
    end
    def media
        @listing=Listing.find(session[:listing])
        puts params
        @photo=Photo.new(file_name:params[:file],listing:@listing)
        if @photo.save!
            respond_to do |format|
                format.json{render :json=>@photo}

            end
        end

    end


    private
    def listing_params
        params.require(:listing).permit!
    end

end

/listing.js/

$(document).ready(function()
{   

    Dropzone.options.mediaDropzone=false;


    mediaDropzone=new Dropzone('div#media-dropzone',
    {
      url:"/listings/media",
      headers: 
      {
        'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
      },
      autoProcessQueue:false,
      addRemoveLinks:true,
      parallelUploads: 10
    });
    mediaDropzone.on("success",function(file,responseText)
    {
      console.log(responseText.file_name.url);
      console.log(responseText);
    });


});

/create.js.erb/

mediaDropzone.processQueue();

/routes.rb/

Rails.application.routes.draw do


  root 'prime_petz#home'

  get 'prime_petz/home'

  get 'prime_petz/about'

  get 'prime_petz/contact'

  post 'listings/media'

  resources :listings
  resources :prime_petz
end

现在这里一切正常，直到我创建这样的脚本

/dynamic_breeds.js.erb/

  var breeds= new Array();
    <% for breed in Breed.all %>
      breeds.push(new Array(<%= breed.pet_id %>, '<%=breed.name %>', <%= breed.id %>));
    <% end%>

    function petSelected() {
      pet_id = $('#listing_pet_type').val();
      options = document.getElementById('listing_breed_type').options;
      options.length = 1;
      for(var i=0;i<breeds.length;i++)
      {
        if (breeds[i][0] == pet_id) {
          options[options.length] = new Option(breeds[i][1], breeds[i][2]);
        }
      };
      if (options.length == 1) {
        $('.breed_type').addClass('disabled');
      } else {
        $('.breed_type').removeClass('disabled')
      }
    }

    $(document).ready(function() {
     $('.pet_type').dropdown({
     onChange:petSelected
    });

});

这个脚本的作用是，它会根据宠物下拉菜单填充品种下拉菜单）

此脚本正常工作，但提交时 new.html.erb 表单在

行给我一个未知格式错误错误

respond_to do|format|
format.js
end

任何人都可以解释为什么我只在使用此脚本时收到此错误。

/application.js/

//= require jquery
//= require jquery_ujs

// Loads all Semantic javascripts
//= require semantic-ui

//= require dropzone

//= require cloudinary
//= require dynamic_breeds


//= require_tree .

Answer 1

我认为您可能只在请求的格式为 .js 时处理，因此如果表单要求 HTML 它不知道该怎么做，请尝试添加 format.html 还有。

Answer 2

嗯，这可能是我们这里遇到的一个奇怪问题。我已经对一个示例进行了相同的尝试，但您在 document.ready 中调用的下拉函数似乎有问题。我觉得 jquery 函数如何破坏这里的功能很有趣。将其更改为以下内容：

 $(document).ready(function() {
  $('.pet_type').change(function(){
    petSelected();
  });
 });

包含外部 javascript 脚本会中断具有 remote:true 的表单的提交

Including an external javascript script breaks the submission of a form which has remote:true

javascript

ruby-on-rails

dropzone.js