Rails 3用のスピナーを表示UJSがタイプエラー

私は3つのリンクをUJSを使用してそれらの下のコンテナに情報をロードする3つのアプリケーションがあります。経験を完結させるために、情報が読み込まれている間に「Loading ...」というテキストを少し表示したいと思います。そこで私はSimone CarlettiのpostのjQueryを使ってそれを達成しようとしました。しかし、jQueryによっては、最初のリンクがクリックされたときに2つの異なることが起こります。（他の二つがクリックされたときに両方のシナリオでは、何も起こりません。）Rails 3用のスピナーを表示UJSがタイプエラー

私はだから私は$("#tabs-1").html(data);に私のjQueryを変更することを修正するためにTypeError: 'undefined' is not a function (evaluating '$("#tabs-1").js(data)')

を取得下のコードを考えます。その後：

$（「#tabs：
- 例外TypeErrorが離れ
- 行く 'ロードを...' 私の最初のリンクをクリックする
- が表示されないようにフォーマットされていない、余分なコードのすべての種類をレンダリング-1" ）.htmlを（「n個のテキスト\ ：</H4> \ nは \ nはテキスト</LI> \ nは</div> \ nは</div> \ nは

HTMLを生成：

<div id="tabs"> 
    <ul id="infoContainer"> 
    <li><a href="/profiles/1/profile_reviews" class="active" data-remote="true" id="profile_loader">Cred</a></li> 
    <li><a href="/profiles/1/profile_about" class="inactive" data-remote="true" id="profile_loader">About</a></li> 
    <li><a href="/profiles/1/profile_credits" class="inactive" data-remote="true" id="profile_loader">Credits</a></li> 
    <span id="loading">Loading...</span> 
    </ul> 
    <div id="tabs-1"> 
    # load info here 
    </div> 
</div>

を情報を読み込み、私profiles_controller.rbアクションの例：

def profile_about 
    @profile = Profile.find(params[:id]) 
    respond_to do |format| 
    format.js { render :layout => nil } 
    end 
end

マイprofile_about.js.erb：

$("#tabs-1").html("<%= escape_javascript(render (:partial => "profile_about")) %>");

の私application.js：私のCSSで

$(function() { 
    var toggleLoading = function() { $("span#loading").toggle() }; 
    $("#profile_loader") 
    .bind("ajax:loading", toggleLoading) 
    .bind("ajax:complete", toggleLoading) 
    .bind("ajax:success", function(event, data, status, xhr) { 
     $("#tabs-1").js(data); 
    }); 
});

：私の<head>で

span#loading { 
    float:right; 
    padding:10px 5px; 
    color:#666666; 
}

：

<script src="/javascripts/jquery.js?1316133561" type="text/javascript"></script> 
<script src="/javascripts/jquery-ui.js?1316133957" type="text/javascript"></script> 
<script src="/javascripts/jquery-ujs.js?1316133561" type="text/javascript"></script> 
<script src="/javascripts/application.js?1317960952" type="text/javascript"></script> 
<meta name="csrf-param" content="authenticity-token"/> 
<meta name="csrf-token" content="k1RB3GSMFweZ&#47;ty9haXTCWxYTOZB4DxQ90uEGTIhNo8="/>

UPDATE：

私はrespond_toのformat.jsとformat.xmlを削除し、のみformat.html保つ、profile_about.js.erbを削除、および.htmlの（データ）としてバインディングを維持した場合、コンソールは言う：

ActionView:MissingTemplate (Missing template profiles/profile_about with {:handlers=>[:rxml, :builder, :rjs, :erb, :rhtml], :locale=>[:en, :en], :formats=>[:html] in view paths "/Users/me/Desktop/app/views", "/Users/me/Desktop/app/vendor/plugins/paperclip/app/views"): 
app/controllers/profiles_controller.rb:87:in 'profile_about' #format.html 
app/controllers/profiles_controller.rb:86:in 'profile_about' #the respond_to to |format| 

Rendered /Library/Ruby/Gems/1.8/gems/actionpack-3.0.5/lib/action_dispatch/middleware/templates/rescues/missing_template.erb within rescues/layout

出典

2011-10-31 tvalent2

jQueryを使用していたjQuery（上記）をthis questionに置き換えて動作させました。 jQueryよりも簡単です。

$(function() { 
    $('#loading') 
     .hide() // hide initially 
     .ajaxStart(function(){ 
      $(this).show(); 
     }) 
     .ajaxStop(function(){ 
      $(this).hide(); 
     }) 
});

私は上記の私の質問でコードを少し変更して動作させました。特に、私は削除しました：私のCSSでdisplay:none、コントローラのアクションではformat.htmlとformat.xmlを削除しました。

出典

2011-11-02 01:59:27 tvalent2

現在、同じIDを持つ3つのリンクがあります。これは無効なHTMLであり、問題を引き起こします。

.jsで何を試していたかわかりません。私はそれがjQueryメソッドだとは思わない。

これはJSでもHTMLでも可能ですが、私は両方をお勧めしません - xmlとjs respond_toを削除し、htmlだけを残してください。 JS erbファイルを削除します。

"ajax：success"バインディングでは、.html(data)としてください。

他のすべてが正しく設定されていると仮定すると、これは必要な作業です。

使用しているRailsのバージョンはどれですか？

出典

2011-10-31 17:43:52

私はすべてが正しく設定されていないようです。 'respond_to'という形式のformat.js（とjs.erbファイル）を削除すると、リンクをクリックした後でパーシャルがレンダリングされることはなくなりました。 – tvalent2

@ tvalent2コンソールには何もありませんか？どのバージョンのRails？私のテストでも部分的にレンダリングされますが、私はそれが重要ではないと思っています。そしてあなたは間違いなくjQuery（プロトタイプではない）を使用していますか？ –

@tvalentレイクルートはあなたが期待していることを示していますか？適切な場所にテンプレート？ –

Rails 3用のスピナーを表示UJSがタイプエラー

答えて

関連する問題