带有引导程序的 Rails 应用程序中的不同 jQuery/JS 错误答案

【问题标题】：Different jQuery/JS errors in rails app with bootsrap带有引导程序的 Rails 应用程序中的不同 jQuery/JS 错误
【发布时间】：2018-09-03 15:22:46
【问题描述】：

我有一个过滤器来过滤我的表单。当我打开它时，即使相同的代码在应用程序的另一个页面上工作，我的日期选择器也不起作用。我没有在其他页面上看到错误。

Uncaught TypeError: $(...).datepicker is not a function

在我得到的每一页上

DEPRECATED: This filename doesn't follow the convention, use bootstrap-datepicker.en-CA.js instead.
$.fn.datepicker.deprecated @ core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012
(anonymous) @ bootstrap-datepicker-en-CA.self-fb416403a677f41efad9cfc05939c9fe3eeb04627845d85da10d9eee99ba96b2.js?body=1:21
(anonymous) @ bootstrap-datepicker-en-CA.self-fb416403a677f41efad9cfc05939c9fe3eeb04627845d85da10d9eee99ba96b2.js?body=1:23
core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012 DEPRECATED: The language code "kh" is deprecated and will be removed in 2.0. For Khmer support use "km" instead.
$.fn.datepicker.deprecated @ core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012
(anonymous) @ bootstrap-datepicker.kh.self-6562a5a87f529e9a3121f8b49f20a6f7d3651340738f7d747a2418d721d01eae.js?body=1:21
(anonymous) @ bootstrap-datepicker.kh.self-6562a5a87f529e9a3121f8b49f20a6f7d3651340738f7d747a2418d721d01eae.js?body=1:22
core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012 DEPRECATED: The language code "kr" is deprecated and will be removed in 2.0. For korean support use "ko" instead.
$.fn.datepicker.deprecated @ core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012
(anonymous) @ bootstrap-datepicker.kr.self-ca28b775db5a32ebbee6667b0bc40e26e078ce363db5c55c9a904155d3b9fdb5.js?body=1:19
(anonymous) @ bootstrap-datepicker.kr.self-ca28b775db5a32ebbee6667b0bc40e26e078ce363db5c55c9a904155d3b9fdb5.js?body=1:20
core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012 DEPRECATED: This language code "rs-latin" is deprecated (invalid serbian language code) and will be removed in 2.0. For Serbian latin support use "sr-latin" instead.
$.fn.datepicker.deprecated @ core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012
(anonymous) @ bootstrap-datepicker.rs-latin.self-a3302a16cb7cc00b6d455f26ed8a73f8890da7280ee9507c2cd9fe9f36ec6352.js?body=1:20
(anonymous) @ bootstrap-datepicker.rs-latin.self-a3302a16cb7cc00b6d455f26ed8a73f8890da7280ee9507c2cd9fe9f36ec6352.js?body=1:21
core.self-c808be6e04274a80c551034d8f8a677b7c3995aec044ea4e6edf9cbbc19ff750.js?body=1:2012 DEPRECATED: This language code "rs" is deprecated (invalid serbian language code) and will be removed in 2.0. For Serbian support use "sr" instead.

Uncaught TypeError: $(...).popover is not a function
at HTMLDocument.<anonymous> (bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js?body=1:3)
at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3583)
at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3618)

我在谷歌上搜索到这来自两次导入 jQuery。但是我的

application.js

//= require jquery
//= require rails-ujs
//= require activestorage
//= require bootstrap
//= require bootstrap-datepicker
//= require bootstrap/dropdown
//= require turbolinks
//= require_tree .

只导入一次，甚至顺序应该没问题。

html.erb

    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

    <%= csrf_meta_tags %>

    <% provide(:title, "Mitarbeiter hinzufügen") %>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div>
  <%= form_for :anything, url: add_worker_tm_trainings_path do |f| %>
    <%= f.label :schicht %>
    <%= f.collection_select :shift, Shift.all, :id, :name, include_blank: :true %>
    <div class="lineshow">
    <%= f.label :linie %>
    <%= f.collection_select :line, Line.all, :id, :name, include_blank: :true %>
    <%= f.submit "submit", :class => 'submit_button' %>
    <% end %>
    </div>
  <div class="realform">
    <%= form_with model: Trainingsmembership, url: add_worker_tm_trainings_path do |f| %>
  <div style="overflow: auto; height: 350px">
    <table>
      <tr>
        <th style="width: 25px"></th>
        <th style="width: 200px"><%= sort_link "name" %></th>
        <th style="width: 125px"><%= sort_link "position" %></th>
        <th style="width: 75px"><%= sort_link "Schicht" %></th>
        <th style="width: 100px"><%= sort_link "linie" %></th>
      </tr>
      <% @workers.each do |worker| %>
        <tr>
          <td><%= check_box_tag "worker_ids[worker_ids][]", worker.id %></td>
          <td><%= worker.name %></td>
          <td><%= Position.find(worker.position_id).name %></td>
          <td><%= Shift.find(worker.shift_id).name %></td>
          <td><% worker.line_ids.each do |line| %>
              <%= Line.find(line).name %>
            <% end %></td>
        </tr>
      <% end %>
    </table>
  </div>
    <div style="overflow: auto; height: 350px">
      <table>
        <tr>
          <th style="width: 25px"></th>
          <th style="width: 200px"><%= sort_link "Training" %></th>
          <th style="width: 100px"><%= sort_link "linie" %></th>
        </tr>
        <% @trainingall.each do |training| %>
          <tr>
            <td><%= check_box_tag "training_ids[training_ids][]", training.id %></td>
            <td><%= training.name %></td>
            <td><%= Line.find(training.where_lines).name %></td>
          </tr>
        <% end %>
      </table>
    </div>
  <br><br>
    <%= f.label "Gültigkeit" %>
    <%= f.text_field :duration%>
    <%= f.label "Prüfungstermin" %>
    <%= f.text_field :date%>
    <%= f.label "Bemerkung" %>
    <%= f.text_field :comment%>
    <%= f.label "PDF-Protokoll" %>
    <%= f.text_field :attachement%>
    <%= f.submit "Submit" %>
  <!-- %= f.input :training_id, collection: @trainings, label_method: :name, value_method: :id, label: 'Training:', include_blank: false %>
  %= f.input :duration, label: 'Gültigkeit:' %>
  %= f.input :date, :as => :string, :input_html => { data: {behaviour: "datepicker"}}, label: 'Prüfungstermin:' %>

  %= f.input :comment, as: :text, label: 'Bemerkung:' %>
  %= f.input :attachement, as: :file, label: 'PDF-Protokoll:' %>
  %= f.submit "Training bearbeiten", class: "btn btn-primary" %-->
    <!--#%= f.input :worker_id, collection: Worker.all, label_method: :name, value_method: :id, label: 'Mitarbeiter', include_blank: false, input_html: { multiple: false } %>-->
<% end %>
  </div>
  <script type="text/javascript">
      $(document).ready(function(){
          $('.lineshow').hide();
          $('.realform').hide();
          $('#anything_shift').change(function () {
              if($('#anything_shift option:selected').text != ""){
                  $('.lineshow').show();
              }
          });
          $('#anything_line').change(function () {
              if($('#anything_line option:selected').text != ""){
                  $('.realform').show();
              }
          });
          $("submit").click(function (e) {
              e.preventDefault();
              $.ajax({
                  type: "POST",
                  url: "/trainings/add_worker_tm",
                  data: {
                      id: $(this).val(),
                      access_token: $("access_token").val()
                  },
                  success: function (result) {
                      $('.realform').show();
                  }
              })
          })
      });
  </script>
<script type="text/javascript">
    $('#micropost_picture').bind('change', function() {
        var size_in_megabytes = this.files[0].size/1024/1024;
        if (size_in_megabytes > 5) {
            alert('Maximum file size is 5MB. Please choose a smaller file.');
        }
    });
</script>
<script type="text/javascript">
    $('[data-behaviour~=datepicker]').datepicker({
        "format": "dd.mm.yyyy",
        "weekStart": 1,
        "autoclose": true
    });
</script>
</div>
      </div>
    </div>

ajax 调用效果不佳，但我还没有投入太多时间。我不喜欢那里的第一行但没有我的 jQuery 似乎无法正常工作，但为什么呢？我想我在 application.js 中包含了 jQuery...

controller.erb

def add_worker_tm
    if !params.has_key?(:anything)
      puts "emoty"
    @worker = Worker.new
    @workers = Worker.order("#{sort_column} #{sort_direction}")
    @workerall = Worker.all
    @trainings = Training.all
    @trainingall = Training.all
    else
      @shift = params[:anything].require(:shift)
      @line = params[:anything].require(:line)
      @worker = Worker.new
      @workersshifts = Worker.all.where("shift_id= ?", @shift)
      puts @workersshifts
      @workers = []
      @workersshifts.each do |w|
        puts w.line_ids
          if w.line_ids.include? @line
            @workers << w
        end
      end
      @workerall = Worker.all
      @trainings = Training.all.where(where_lines: @line)
      @trainingall = Training.all.where(where_lines: @line)
    end
    end

  def add_worker_tm
if !params.has_key?(:anything)
  puts "empty"
@worker = Worker.new
@workers = Worker.order("#{sort_column} #{sort_direction}")
@workerall = Worker.all
@trainings = Training.all
@trainingall = Training.all
else
  @shift = params[:anything].require(:shift)
  @line = params[:anything].require(:line)
  @worker = Worker.new
  @workersshifts = Worker.where(shift_id: @shift)
  @workers = []
  @workersshifts.each do |w|
      if !w.line_ids.include?(@line)
        @workers << w
    end
  end
  @workerall = Worker.all
  @trainings = Training.all.where(where_lines: @line)
  @trainingall = Training.all.where(where_lines: @line)
end
end

我认为我的控制器很好，我修复了我的过滤器错误，它显示了我想要的。

现在我的问题：

如何修复引导 js/jQuery 错误？
如何让日期选择器再次工作？
我需要更改哪些内容，才能使我的 AJAX 调用正常工作并且无需刷新即可显示过滤后的表格？

我很困惑，应该补充一点，我对 Rails、jQuery 和 js 很陌生。

【问题讨论】：

尝试从视图中删除<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>。
好的，我没有收到日期选择器的错误，虽然它不工作并且我的隐藏部分都显示出来了......

标签： javascript jquery ruby-on-rails ajax bootstrap-sass

【解决方案1】：

经过几个小时的尝试和错误，我找到了一些解决方案。

我发现 turbolink 是邪恶的，不会触发我的所有事件。发现后我把<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>删了，把脚本改成

<script type="text/javascript">
      document.addEventListener("turbolinks:load", function () {
          $('.lineshow').hide();
          $('.realform').hide();

现在它正在工作。

我的日期选择器似乎无法正常工作，因为我之前的 jQuery 脚本所以我将其设置为 simple_form_for，并且选择器再次出现。我把整个表格放在一个部分中。

    <div>
  <%= form_for :anything, :html=>{:id=>"filter", :multipart => true,:remote=>true}, url: add_worker_tm_trainings_path do |f| %>
    <%= f.label :schicht %>
    <%= f.collection_select :shift, Shift.all, :id, :name, include_blank: :true %>
    <div class="lineshow">
      <%= f.label :linie %>
      <%= f.collection_select :line, Line.all, :id, :name, include_blank: :true %>
      <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
      <%= f.submit "filter", {:class => "bttn-and-txt", :id => "filter", :name => "filter", :value => "filter"} %>
  <% end %>
  </div>
  <div class="realform">
    <%= simple_form_for(Trainingsmembership.new, url: add_worker_tm_trainings_path) do |f| %>
      <div style="overflow: auto; height: 350px">
        <table>
          <tr>
            <th style="width: 25px"></th>
            <th style="width: 200px"><%= sort_link "name" %></th>
            <th style="width: 125px"><%= sort_link "position" %></th>
            <th style="width: 75px"><%= sort_link "Schicht" %></th>
            <th style="width: 100px"><%= sort_link "linie" %></th>
          </tr>
          <% @workers.each do |worker| %>
            <tr>
              <td><%= check_box_tag "worker_ids[worker_ids][]", worker.id %></td>
              <td><%= worker.name %></td>
              <td><%= Position.find(worker.position_id).name %></td>
              <td><%= Shift.find(worker.shift_id).name %></td>
              <td>
                <% worker.line_ids.each do |line| %>
                  <%= Line.find(line).name %>
                <% end %></td>
            </tr>
          <% end %>
        </table>
      </div>
      <div style="overflow: auto; height: 350px">
        <table>
          <tr>
            <th style="width: 25px"></th>
            <th style="width: 200px"><%= sort_link "Training" %></th>
            <th style="width: 100px"><%= sort_link "linie" %></th>
          </tr>
          <% @trainingall.each do |training| %>
            <tr>
              <td><%= check_box_tag "training_ids[training_ids][]", training.id %></td>
              <td><%= training.name %></td>
              <td><%= Line.find(training.where_lines).name %></td>
            </tr>
          <% end %>
        </table>
      </div>
      <br><br>
      <%= f.input :duration, label: 'Gültigkeit:' %>
      <%= f.input :date, :as => :string, :input_html => { data: {behaviour: "datepicker"}}, label: 'Prüfungstermin:' %>
      <%= f.input :comment, as: :text, label: 'Bemerkung:' %>
      <%= f.input :attachement, as: :file, label: 'PDF-Protokoll:' %>
      <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
      <%= f.submit "Mitarbeiter hinzufügen", {:class => "btn btn-primary", :name => "submit", :value => "submit"} %>
    <% end %>
  </div>
  <script type="text/javascript">
      $('[data-behaviour~=datepicker]').datepicker({
          "format": "dd.mm.yyyy",
          "weekStart": 1,
          "autoclose": true
      });
  </script>
  <script type="text/javascript">
      function GetCookie(name) {
          var arg=name+"=";
          var alen=arg.length;
          var clen=document.cookie.length;
          var i=0;

          while (i<clen) {
              var j=i+alen;
              if (document.cookie.substring(i,j)==arg)
                  return "here";
              i=document.cookie.indexOf(" ",i)+1;
              if (i==0)
                  break;
          }

          return null;
      };
      document.addEventListener("turbolinks:load", function () {
          $('.lineshow').hide();
          //$('.realform').hide();

              var visit=GetCookie("COOKIE1");

              if (visit==null){
                  $('.realform').hide();
              }
              var expire=new Date();
              expire=new Date(expire.getTime()+(5*60*1000));
              document.cookie="COOKIE1=here; expires="+expire;

          $('#anything_shift').change(function () {
              if ($('#anything_shift option:selected').text != "") {
                  $('.lineshow').show();
              }
          });
          $('#anything_line').change(function () {
              if ($('#anything_line option:selected').text != "") {
                  $("#filter").click();
              }
          });

      });
  </script>
  <script type="text/javascript">
      $('#micropost_picture').bind('change', function () {
          var size_in_megabytes = this.files[0].size / 1024 / 1024;
          if (size_in_megabytes > 5) {
              alert('Maximum file size is 5MB. Please choose a smaller file.');
          }
      });
  </script>
</div>

使用这些 javascripts 和 form.js.erb $("#filter").html("<%= j(render 'tform').html_safe %>") 在我的控制器中，我需要在方法结束之前添加它

respond_to do |format|
      format.js { render 'trainings/add_worker_tm'}
      format.html
    end

一切看起来都正常。 cookie 是一种肮脏的解决方案，它可以立即显示对过滤器的不同请求。

【讨论】：

如果你不想要它，你可以从你的 gemfile 中删除 turbolinks gem。我还是建议阅读 github 上的 Turbolinks 文档，因为它实际上很容易使用。
我宁愿保留它。删除加速我的页面的功能不是一个很好的解决方案。我是 Rails、js/jQuery 和 ajax 的新手，所以我遇到了麻烦，但我学到了足够多的东西来不删除 turbolinks。感谢您的建议，我会阅读它。
你知道比 cookie 更好的方法，我可以在页面上显示每个新的过滤器请求吗？如果我不使用我的 cookie，realform 将第一次隐藏并显示第二次...