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>

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

提前致谢。

Answer 1

在rails中使用AJAX表单的最佳方法是使用rails_ujs。

首先，您必须告诉rails_ujs您希望在表单上执行AJAX操作：

 <%= 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/

未捕获TypeError：ajaxForm不是rails版本5中的函数？

1 个答案: