2

問題は今のところ修正されています。

ページとともにスクロールするスティッキー ヘッダーの JavaScript セクションを削除して修正しました。そのコードがapplication.html.erbにあるときに、なぜ私のJavaScriptがくだらないのか本当にわかりません

application.html.erb が次のようになると、データテーブルが機能します。

<!DOCTYPE html>
<html>

    <head>
        <title>Dummyapp1</title>
          <%= stylesheet_link_tag "application" %>
          <%= javascript_include_tag "application", "contractens" %>
          <%= csrf_meta_tags %>

    <div>

    </head>

<body>
==rest of script==

私のapplication.html.erbが次のようになっていると機能しません：

<!DOCTYPE html>
<html>

    <head>
        <title>Dummyapp1</title>
          <%= stylesheet_link_tag "application" %>
          <%= javascript_include_tag "application", "contractens" %>
          <%= csrf_meta_tags %>

    <div>

</div>

    <!-- If you have jQuery directly, then skip next line -->
    <script src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
    // If you have jQuery directly, then skip next line
    google.load("jquery", "1");

    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;
      if (window_top > div_top)
        $('#sticky').addClass('stick')
      else
        $('#sticky').removeClass('stick');
      }
    // If you have jQuery directly, use the following line, instead
    // $(function() {
    // If you have jQuery via Google AJAX Libraries
    google.setOnLoadCallback(function() {
      $(window).scroll(sticky_relocate);
      sticky_relocate();
      });
    </script>

    </head>

<body>

Railsのデータテーブルについては、このRailscastsチュートリアルに従います。私は他のアプリでこれを持っていました。そこではうまくいきます。他のアプリと同じことをしましたが、実際の表ではなくテキストが表示されています。

テーブルに対する私の見解は次のとおりです。

    <h1>Listing contracten</h1>

    <table id="contractens" class="display">
      <thead>
          <tr>
            <th>Naam</th>
            <th>Omschrijving</th>
            <th>Datumingang</th>
            <th>Contractduur</th>
            <th>Opzegtermijn</th>
            <th>Betalingstermijn</th>
          </tr>
      </thead>
    <tbody>
      <%= @contractens.each do |contracten| %>
      <tr>
        <td><%= contracten.naam %></td>
        <td><%= contracten.omschrijving %></td>
        <td><%= contracten.datumingang %></td>
        <td><%= contracten.contractduur %></td>
        <td><%= contracten.opzegtermijn %></td>
        <td><%= contracten.betalingstermijn %></td>
      </tr>
    <% end %>
    </tbody>
    </table>

<%= link_to "Nieuw", new_contracten_path %>

私のjavascriptファイルは正しく入力されています。

問題のスクリーンショットは次のとおりです。

問題

あなたが私を助けてくれることを願っています:)

編集: css なしで次のようになります。

ここに画像の説明を入力

css を使用すると、次のようになります。

ここに画像の説明を入力

これは私の contractens.js.coffee です:

jQuery ->
        $('#contractens').dataTable
          sPaginationType: "full_numbers"
          bJQueryUI: true

これは私のapplication.jsです：

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

そして、これは私のapplication.cssです：

/*
*= require_self
*= require dataTables/jquery.dataTables
*= require_tree .
*/

編集2：

チェックボックスをクリックしたときにdivを非表示にするJavaScript関数がある場合。私が持っているとき

jQuery ->
        $('#contractens').dataTable

私の contractens.js.coffee では動作しますが、次の場合:

jQuery ->
        $('#contractens').dataTable
        sPaginationType: "full_numbers"
        bJQueryUI: true

どちらも機能しません。何かがjqueryをブロックしていると思います。

4

2 に答える 2

2

変化する

<%= @contractens.each do |contracten| %>

にとって

<% @contractens.each do |contracten| %>

タグセットは、<%= %>出力が必要な場合に使用されます。

于 2012-06-27T14:13:38.253 に答える
1

私もこれを変更した同じ問題を抱えていました:私のapplication.jsで:

//= require jquery
//= require jquery_ujs
//= require dataTables/jquery.dataTables
//= require_tree .

に

//= require jquery
//= require_tree .
//= require jquery_ujs
//= require dataTables/jquery.dataTables

そして、それは今動作します。

于 2013-07-02T07:05:01.950 に答える