uncought TypeError：ajaxForm不是在rails 5中的函数吗？

Question

我试图用给ajaxForm提交模式窗体和显示模式本身的响应。但是，我得到未捕获的类型错误（...）。ajaxForm不是一个函数。 基本上我想创建一个教训创建表单模式窗体和必须提交，我的应用程序由两个API控制器和前端控制器。

api! 
    param_group :lesson 
    description 'creates a lesson' 
    example " 
    { 
    'id': 12, 
    'title': 'MUDRAS', 
    'active_video_id': 3, 
    'description': 'Description of the lesson', 
    'points': null, 
    'is_public': '1', 
    'videos': [ 
     { 
     'video': { 
      'id': 1, 
      'video': { 
       'url': '/uploads/video/video/1/250-authentication-from-scratch.mp4' 
      }, 
      'title': null, 
      'storage_type': 'Lesson', 
      'storage_id': 12 
     } 
     }, 

    ] 
    }" 
    def create 
    @lesson = Lesson.new(lesson_params) 
    @lesson.creator = current_user 
    if @lesson.save 
     render json: { 
     success: true, 
     message: "Lesson created Successfully" 
     } 
    else 
     render json: { success: false, message: "Could not Create : #{@lesson.errors.full_messages.join(', ')}" } 
    end 
    end 
def new 
    @lesson = Lesson.new 
    end 

上面的代码是下面的代码我的API controller.The是我的前端控制器和课相关形式。

def create 
    @lesson = Lesson.new(lesson_params) 
    if @lesson.save 
     render json: { 
     success: true, 
     message: "Lesson Created Successfully" 
     } 
    else 
     render json: { 
     success: false, 
     message: "Lesson Creation Failed" 
     } 
    end 
    end 

我需要在课程索引页面显示“新课程”按钮。 教训/ index.html.erb

<% unless current_user.student? %> 
    <div class="container-fluid"> 
    <div class="col-md-3 col-sm-3 text-left"> 
     <div id="newLesson" class="lesson-category btn-danger" lesson_url="<%= new_lesson_path %>"> 
     <i class="fa fa-plus"></i> ADD LESSON 
     </div> 
    </div> 
    </div> 

    <div class="hidden" id="newLessonForm"> 
    <% @lesson = Lesson.new ; @lesson.videos = [Video.new] %> 
    <%= render "lessons/form" %> 
    </div> 
<% end %> 

<%= render "shared/primary_modal" %> 

<div class="container-fluid"> 
    <div class="col-md-3 col-sm-3 text-left"> 
    <h2 class="main-tab tab-active">LESSONS</h2> 
    </div> 
    <div class="col-md-9"> 
    <div class="col-md-12 text-right"> 
     <h2 class="main-tab tab-inactive"><a id="responsesLink" class="blacko" href="#"><%= "MY" if current_user.student? %> RESPONSES</a></h2> 
    </div> 
    </div> 
    <div class="col-md-12"><hr/></div> 
    <!-- Lessons of this course Go here --> 
    <div class="col-md-3"> 
    <% @lessons.each do |lesson| %> 
     <div id="lesson_<%= lesson.id %>" class="pill video-view lesson-load" data-lesson-id="<%= lesson.id %>" data-src="<%= lesson.active_video_url %>"><%= lesson.title %></div> 
    <% end %> 
    <!-- <div class="pill pill-inactive">Something</div> --> 
    </div> 

    <!-- Lesson Content goes here --> 
    <div class="col-md-9"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <%= render "shared/video_player" %> 
     </div> 
    </div> 
    <div id="lessonContent"> 
    </div> 
    </div> 
</div> 

<script> 
    $("#newLesson").click(function(){ 
     var lesson_path = $(this).attr("lesson_url"); 
     $.get(
     lesson_path, 
     function(content){ 
      $("#primaryModalContent").html(content); 
      $("#format").val('js'); 
      $("#primaryModal").modal("show"); 
     } 
    ); 
    }); 
</script> 

我的教训创作形式给出一个部分。

<div class="col-md-12"> 
    <%= simple_form_for @lesson, html: {class: "newLessonform"} do |f| %> 
    <%= f.input :title, label: "Lesson Title", required: false %> 
    <%= f.input :description, required: false, as: :text %> 
    <%= f.input :points, required: false, as: :integer %> 
    <%= f.input :is_public, label: 'Check to Make this lesson public', as: :boolean %> 
    <div class="col-md-12"> 
     <% unless @lesson.new_record? or @lesson.active_video_url.blank? %> 
     <h4> Currently Linked Video </h4> 
     <video src="<%= @lesson.active_video_url %>" style="width: 400px;"></video> 
     <% end %> 
     <hr/> 
    </div> 
    <h4>Add <%= @lesson.videos.blank? ? "a" : "another" %> Video</h4> 
    <% @lesson.videos = [Video.new(title: "")] if @lesson.videos.blank? %> 
    <%= f.simple_fields_for :videos do |g| %> 
     <%= g.input :title, label: "Video title" %> 
     <%= g.input :video, as: :file, lebel: "Select Video" %> 
    <% end %> 
    <center><%= f.submit class: "lesson-category btn-danger" %></center> 
    <% end %> 
</div> 

<script type="text/javascript"> 
    $(".newLessonform").ajaxForm(function(data) { 
    $("#primaryModalContent").html(data.message); 
    }); 
</script> 

在上面的脚本中，我给出了ajaxForm。下面给出了它的模式形式。

<div class="modal fade" id="primaryModal" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" , data-dismiss="modal">&times;</button> 
     <h1 class="modal-title" id="modalTitle"></h1> 
     </div> 
     <div class="row modal-body" id="primaryModalContent"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

在Chrome控制台中的错误，是未被捕获的错误：（...）$给ajaxForm不是一个函数。 我被困在这里约一个星期。任何人都可以给我一个解决方案。

在此先感谢。

Answer 1

在轨使用AJAX的形式，最好的办法是使用rails_ujs。

首先，你必须告诉你希望你的窗体上的AJAX动作rails_ujs：

<%= simple_form_for @lesson, html: {class: "newLessonform"}, remote: true do |f| %> 

然后在视图中添加新的文件，这一观点将在全成创建操作由AJAX开始后呈现动作：views/lessons/create.js.erb
在里面你可以把你的js代码，这个代码将在同一页AJAX的形式执行。这只是一个视图，你可以使用控制器的变量。

$("#primaryModalContent").html("<%= @message %>") 

最后，你需要更新你的控制器来处理AJAX行动：

def create 
    @lesson = Lesson.new(lesson_params) 
    if @lesson.save 
    @success = true 
    @message = "Lesson Created Successfully" 
    else 
    @success = false, 
    @message = "Lesson Creation Failed" 
    end 

    respond_to do |format| 
    format.js 
    end 
end 

在这里你可以找到有关的Rails UJS一些文档：
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#remote-elements https://blog.codeship.com/unobtrusive-javascript-via-ajax-rails/