0

次のような問題が発生しました。Rails3.2.9とjqueryUI1.9.0を使用しています。タブUIがあり、各タブにajaxを使用しています。htmlおよびJavascriptコードは次のようになります。

<!-- index.html.erb -->
<div id="tabs">
  <ul>
    <li><a href="home/page1">page1</a></li>
    <li><a href="home/page2">page2</a></li>
  </ul>
</div>

<!-- page1.html.erb-->
<p>this is page 1</p>

<!-- page2.html.erb-->
<p>this is page 2</p>

およびhome.js：

$(document).ready(function () {
  $( "#tabs" ).tabs();
});

そのため、サーバーを起動してタブをアクティブにしようとすると、フロントエンドはリクエストをサーバーに送り返し続けます。これで何が起こったのか誰か知っていますか？

ありがとうございました

アップデート

このようにhome.jsを変更しましたが、それでも機能しません。

$(document).ready(function () {
  $( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
      if ( ui.tab.data( "loaded" ) ) {
      event.preventDefault();
      return;
      }

      ui.jqXHR.success(function() {
        ui.tab.data( "loaded", true );
      });
    }
  });
});

私はまだこれが起こった理由を見つけることができません。誰かがそれを理解することができれば大いに感謝します。ありがとうございました！

4

2 に答える 2

0

hrefリンクを指定home/page1しているためhome/page2、関連するタブをクリックするたびにそれらがロードされます。

index.html.erb代わりに、パーシャルをページにレンダリングすることで、ページを一度ロードすることができます。名前page1.html.erbを_page1.html.erbとpage2.html.erbに変更すると_page2.html.erb、コードを次のように変更できます。

<div id="tabs">
    <ul>
        <li><a href="#page1">Page 1</a></li>
        <li><a href="#page2">Page 2</a></li>
    </ul>
    <div id="page1">
         <%= render 'home/page1' %>
    </div>
    <div id="page2">
         <%= render 'home/page2' %>
    </div>
</div>

編集

各タブをクリックしたときに1回だけページを動的にロードする場合は、パーシャルを使用しないでください。キャッシュオプションを使用できます。

 $( "#tabs" ).tabs({ 
            cache: true 
            //some other options 
  });
于 2012-12-05T22:48:57.997 に答える
0

コントローラーでこれを試してください

respond_to do |format|
      format.html { render :layout => false }
end

そのため、リクエストをループし続けることができませんでした。

于 2013-04-06T01:56:20.807 に答える