實現在rails應用程序中使用javascript顯示/隱藏功能

實際上，我想要在我的rails應用程序中執行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; 
}

上面custom.js代碼，當我index.html中放置在JavaScript腳本標記.erb它工作正常。但我不想在其他控制器/索引中重複自己，因爲導軌遵循乾的原則，即不要重複自己。

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 – uzaif

感謝您的回覆，您的custom.js在您的頁面中可用。 custom.js文件在「app/assets/javascripts」下，它是一個單獨的文件。 –

是的，但它必須包含在'

添加更多@Joe's answer：

所以，當你需要實現搜索，你可以做這樣的：

在你的CSS添加類hidden在班上寫：

.hidden { 
    display: none; 
}

因此，當頁面加載檢查是否存在搜索數據時，請不要添加類hidden或添加它。例如：

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

因此，這將顯示它時，搜索數據存在。

希望這會有所幫助。

來源

2016-07-02 09:56:30 Deep

感謝您的回覆。但我得到這個錯誤未定義的局部變量或方法'search_data'爲＃<＃：0x00000009240dc0> –

'search_data'只是一個例子，請將它替換爲您正在使用的實例變量來自控制器的數據。 – Deep

謝謝。我添加了search.js作爲參考。它需要任何修改嗎？當我點擊搜索時，它再次切換回隱藏... –

相關問題