0

JQueryとRailsの両方に慣れていないので、どんな助けでも大歓迎です。

動的選択メニューに関するRailsCastチュートリアルに従っていますが、フォームを読み込もうとすると、動的選択が機能せず、FirebugでJQueryが読み込まれていないというエラーが発生します。Assets / application.jsを確認しましたが、関数が正しく読み込まれているようです。また、他のコンテンツが生成される前に、javascript_include_tagをレイアウトファイルに含めています。アセットをプリコンパイルしてみましたが、何も起こらなかったようです。

奇妙なことに、別のコントローラー用に別のJQuery関数が定義されていて、その関数は完全に正常に機能しています。私はここで何が起こっているのか完全に困惑しています。

更新-コードスニペットを追加します。

application.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree .

application.html.erb

    <head>
      <title> <%= default_title(yield(:title)) %> </title>
      <%= stylesheet_link_tag "application", :media => "all" %>
      <%= javascript_include_tag "application" %>
      <%= csrf_meta_tags %>
    </head>
    ...
    <div class="container">
      ...
      <%= yield %>  
      <%= debug(params) if Rails.env.development? %>
    </div>

hostprofiles.js.coffee

JQuery ->
    cities = $('#hostprofile_city_id').html()
    console.log(cities)
    $('#hostprofile_country_id').change ->
        country = $('#hostprofile_country_id :selected').text()
        escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1')   
        options = $(cities).filter("optgroup[lable=#{escaped_country}]").html()
        console.log(options)
        if options
            $('#hostprofile_city_id').html(options)
            $('#hostprofile_city_id').parent().show()
        else
            $('#hostprofile_city_id').empty()
            $('#hostprofile_city_id').parent().hide()

生成されたjquery関数はapplication.jsです 

(function() {   
      JQuery(function() {
        var cities;
        cities = $('#hostprofile_city_id').html();
        console.log(cities);
        return $('#hostprofile_country_id').change(function() {
          var country, escaped_country, options;
          country = $('#hostprofile_country_id :selected').text();
          escaped_country = country.replace(/([ #;&,.+*~\':"!^$[\]()=>|\/@])/g, '\\$1');
          options = $(cities).filter("optgroup[lable=" + escaped_country + "]").html();
          console.log(options);
          if (options) {
            $('#hostprofile_city_id').html(options);
            return $('#hostprofile_city_id').parent().show();
          } else {
            $('#hostprofile_city_id').empty();
            return $('#hostprofile_city_id').parent().hide();
          }
        });
      });

    }).call(this);
4

5 に答える 5

0

わかりました、問題が見つかりました。私の側では本当にばかげた間違いで、関数のjQueryで「j」を大文字にしました。そのような愚かな間違いをお詫びします。

于 2012-06-07T06:24:33.473 に答える
0

jQueryがページソースにロードされていることを確認します（FFまたはChromeを使用している場合はF12）。また、エラーが発生するコードの前にJavaScriptエラーがあるかどうかを確認してください。

于 2012-06-06T15:02:34.827 に答える
0

Gemfileにこれをチェックしてください

gem 'jquery-rails'

そしてapp/Assets / javascript / 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 vendor/assets/javascripts of plugins, if any, 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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .

行//=require jquery load jQuery into Rails 3

于 2012-06-06T15:13:52.397 に答える
0

これに遭遇する可能性のある他の人にとって、私は同じ問題を抱えていましたが、私の場合、それは-何らかの驚くべき理由で-jqueryを2回必要としたことが原因でした。

...
//= require jquery
//= require jquery
...

余分なものを取り出すことは私のためにそれをしました。

于 2012-09-23T01:38:21.747 に答える
0

多くの検索の後。（24時間の価値があります！）これが私が見つけたものです。

これを考えると、このRailsのセットアップ。

$ gem list --local | egrep "jquery|rails"
coffee-rails (3.2.2)
jquery-rails (3.0.1)
rails (3.2.13)
sass-rails (3.2.6)

これはapplication.jsマニフェストスニペットです。これは、Rails3.2.13がデフォルトとして提供するものです。問題ない。

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

Railsはコントローラーセッションインデックスを生成しますnewcreateedit destroy

フォームは次のようになります。

フォームの周りにdividを追加する必要があります

（：remote => trueを忘れないでください）

<div id="login_form">
  <% if flash[:alert] %>
    <p id="notice" ><%= flash[:alert] %></p>
  <% end %>
  <%= form_tag  :remote => true  do %>
    <fieldset>
      <legend>Please Log In</legend>
      <div>
        <label for="name" >Name:</label>
        <%= text_field_tag :name, params[:name] %>
      </div>
      <div>
        <label for="password" >Password:</label>
        <%= password_field_tag :password, params[:password] %>
      </div>
      <div id="login_submit_button">
        <%= submit_tag "Login" %>
      </div>
    </fieldset>
   <% end %>
</div>

以下のJavaScriptファイルを作成しました。

jQuery.noConflict（）; 鍵です！

//./app/assets/javascripts/my_session.js

// These requires tell manifest to load these first from application.js
//= require jquery
//= require jquery_ujs


// $.fn  is  alias for   Jquery.prototype
//
// You can define plugins like this.
jQuery.prototype.hello = function() {
    alert("hello");
}

// Or, you may wish to use the $.fn
jQuery.noConflict();            // http://api.jquery.com/jQuery.noConflict/
(function($) {
    $.fn.world = function() {
        alert("world");
    };                        // watch your semicolons!!

    $.fn.clearForm = function() {
        return this.each(function() {
            var type = this.type, tag = this.tagName.toLowerCase();
            if (tag == 'form')
                return $(':input', this).clearForm();
            if (type == 'text' || type == 'password' || tag == 'textarea')
                this.value = '';
            else if (type == 'checkbox' || type == 'radio')
                this.checked = false;
            else if (tag == 'select')
                this.selectedIndex = -1;
        });
    };
})(jQuery);

jQuery(document).ready(function($) {
    // Code that uses jQuery's $ can follow here.
    if ($("#login_form").length) {  // If exists, then reset
        //$("#login_form form")[0].reset();
        $().hello();
        $().world();
        $("#login_form form").clearForm();
    }
});
// Code that uses other library's $ can follow here.


// OR, you can just use JQuery in place of $     (The plugins hello and world still need the above magic though!)

//jQuery(document).ready(function() {
//    if (jQuery("#login_form").length) {  // If exists, then reset
//        jQuery("#login_form form")[0].reset();
//        jQuery().hello();
//        jQuery().world();
//    }
//});
于 2013-07-10T18:49:38.847 に答える