uncought TypeError : ajaxForm은 레일 버전 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 컨트롤러입니다. 아래 코드는 제 프런트 엔드 컨트롤러 및 강의 관련 양식입니다.

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> 

크롬 콘솔의 오류가 발견되지 않았습니다. 오류 : (...) $. 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 양식과 동일한 페이지에서 실행됩니다. 이것은보기에 불과하며 컨트롤러의 변수를 사용할 수 있습니다. 당신이로드
http://guides.rubyonrails.org/working_with_javascript_in_rails.html#remote-elements https://blog.codeship.com/unobtrusive-javascript-via-ajax-rails/