railsアプリケーションでjavascriptを使用して機能を表示/非表示を実装する

実際には、私は自分のレールアプリケーションにjavascriptコードを実行したいと思います。railsアプリケーションでjavascriptを使用して機能を表示/非表示を実装する

"app/assets/javascripts"にcustom.jsという新しいファイルを作成しました。

custom.js

$(document).ready(function() { 
    $("div#test").hide(); 
    $("a").click(function(event) { 
     event.preventDefault(); 
     $("div#test").fadeToggle(); 
    }); 
});

私も追加、//は= application.jsファイルにカスタムが必要ですが、それでもコードは非常に最初に非表示にしていません。

application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require nicetitle 
//= require custom

index.html.erb

<a href="#" class="toggle-formed" style="float: right;" >Search</a> 

       <div id="sample" class="<%= @xvaziris_data.present? ? 'hidden' : '' %>"> 

        <%= form_tag xvaziris_path, method: 'get', class: "form-group", role: "search" do %> 
        <p> 
         <center><%= text_field_tag :search, params[:search], placeholder: "Search for.....", class: "form-control-search" %> 
          <%= submit_tag "Search", name: nil, class: "btn btn-md btn-primary" %></center> 
         </p> 
         <% end %><br> 

         <% if @xvaziris.empty? %> 

         <center><p><em>No results found for.</em></p></center>    

         <% end %> 

        </div>

general.scss

.hidden { 
    display: none; 
}

Iはindex.htmlの中に配置し、上記custom.jsコード.erb javascriptスクリプトタグの下でそれはうまく動作します。しかし、レールがDRY原則に従っているので、他のすべてのコントローラー/インデックスで自分自身を繰り返すことは望ましくありません.DONOT REPEAT YOURSELFです。

search.js

$(document).on('page:change', function() { 
     $("div#sample").hide(); 

    // | === HERE 
    $("a.toggle-formed").click(function(event) { 
     event.preventDefault(); 
     $("div#sample").fadeToggle(); 
    }); 
});

任意の提案は大歓迎です。

ありがとうございます。

出典

2016-07-02 Muhammad Yaseen

application.jsに入れたときにあなたのcustom.jsが利用可能です – uzaif

返信いただきありがとうございます。 custom.jsファイルは「app/assets/javascripts」にあり、別のファイルです。 –

はい、それは '

@Joe's answerにさらに追加：

をだからあなたは、あなたがこのようにそれを行うことができ、検索のために実装する必要がある場合：

.hidden { 
    display: none; 
}

：

は、クラスのライトであなたのCSSのクラスhiddenを追加

したがって、ページがロードされて検索データが存在するかどうかを確認するときは、クラスhiddenを追加しないでください。例：

<div id="test" class="<%= search_data.present? ? 'hidden' : '' %>">

これは、検索データが存在する場合に表示されます。

これが役に立ちます。

出典

2016-07-02 09:56:30 Deep

返事をありがとう。しかし、私はこのエラーを未定義のローカル変数またはメソッド 'search_data for＃<＃：0x00000009240dc0> –

としています。' search_data'の名前は単なる例でした。あなたのコントローラからのデータ。 – Deep

ありがとうございます。私は参照のためにsearch.jsを追加します。何か変更が必要ですか？もう一度、検索をクリックすると非表示に切り替わります。 –

railsアプリケーションでjavascriptを使用して機能を表示/非表示を実装する

関連する問題