1. ホーム
  2. 質問と答え
  3. JavascriptとAjaxコール

JavascriptとAjaxコール

2016-03-20 13 views
0

ajax呼び出しの後にjavascriptをロードすることに関するいくつかの質問があります。JavascriptとAjaxコール

Rubyをレールに使用していて、別のページをajax呼び出しでロードしています（これは、ページをリロードして再生を続けるオーディオプレーヤーがあるためです）。

問題は、私がajaxでページを変更すると、javascriptが新しいページでリロード（または動作）しないということです。

たとえば、私は、JavaScriptを使って幅に基づいてグリッドイメージの高さを設定するグリッドシステムを持っています。スクリプトは、ページをリロードしないか、htmlファイルの一番下にあるスクリプトタグにスクリプトを置かない限り動作しません。

JavaScriptをリロードする方法はありますか？私はlocation.reload（）を試みましたが、ページを更新して目的全体を破棄します。ありがとうございました！ここで

は一例です：ページに

<%= link_to song, remote: true do %><%= song.title %><% end %>

を表示

def show 
    respond_to do |format| 
     format.js 
     format.html 
    end 
    end

リンク

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>");

songs_controller

show.js.erbは、ここで私はcardSize機能です私はファイルと呼ばれるcardSize.js UJSファイルで

$(document).ready(function cardSize() { 
    var cardWidth = $('.card-image').width(); 
    $('.card-image').css({ 
    'height': cardWidth + 'px' 
    }); 
});

出典

2016-03-20 Matt Thomas

答えて

2

にshow.js.erbは、ビュー/グリッドを制御するグローバル関数を呼び出す必要があります。

たとえば、などの高さを制御するためのグローバルな方法がimplement_grid()ある場合は、その後、ファイルは次のようになります。あなたが指定しない限り、DOMに追加

$('#results').html("<%= escape_javascript(render partial: 'songs/showcard', locals: { song: @song }) %>"); 
implement_grid();

アイテムが動的に、必ずしもすべてのアクションをトリガしません。それら。あなたは、リスナーをバインドして、div/table（グリッド）上でhtmlを変更し、UJSファイルからそのコードを削除したい場合は、探している高さの変更を呼び出すことができます。あなたが持っている問題はturbolinksに関連すると思わ

$('#results').html("<%= j render 'songs/showcard', song: @song %>");

出典

2016-03-20 00:53:33

+0

恐ろしいd_ethier。私はそれを考えていたはずです。それを指摘していただきありがとうございます！短縮されたコードに感謝します。私のファイルは今よりきれいに見えます！ –

0

：$('#results')が大幅に短縮することができる。また

、。 Turbolinksは、ドキュメントの<body>タグ内のコンテンツを更新/変更します。ドキュメントの<head>タグ内のスクリプトやスタイルシートは使用しません。これは、RailsがカスタムJavaScriptをすべて読み込む場所です。

ファイルの末尾にある<script>タグにJavaScriptを貼り付けると、どうして機能しますか？これを行うと、<script>タグは、文書の<body>タグ内のになりました。したがって、ページを変更すると、スクリプトは新しく読み込まれ、イベントハンドラをページ上のDOM要素に正しくバインドできます。

ページを完全にリロードすると、どのように表示されますか？あなたのjqueryは$(document).ready(...)にラップされています。ページ全体を手動で更新すると、ターボリンクも完全に更新されてDOMに再ロードされるので、の場合はの特定のページになると、$(document).ready(...)ハンドラが正しくバインドされます。しかし、ページを変更して内容を変更すると、文書は技術的に準備が整っていて、新しいページにバインドされないため、コード自体は実行されません。どうして？ターボリンクがどのように機能するかによって、ページ全体が技術的にリロードされるわけではなく、<body>タグ内のコンテンツは、$(document).ready(...)のコードにバインドできない動的に生成されたコンテンツのように見えます。

だから修正は何ですか？

jquery turbolinks gemの使用を希望する場合とそうでない場合があります。これにより、ターボリンクを維持し、ページを変更するたびに$(document).ready(...)通話ができるようになります。

出典

2016-03-20 04:17:25

 関連する問題

  • 関連する問題はありません^_^