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

Question

我有一个new.html.erb文件，其中包含用于创建新商家信息的表单。 现在这个页面还有一个dropzone元素，它来自dropzone.js，允许用户放下那些以后上传的图像。

此表单具有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表单在行中出现UnknownFormat错误错误

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。 / p>

Answer 2

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

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