5

ページネーション リンクでは、Ben Almans の jQuery BBQ および jQuery hashchange プラグインを使用しています。どちらも Opera と Firefox では期待どおりに動作しますが、IE 8 では動作しません (驚いたでしょう?)。IE は ajax、戻るボタン、hashchange でもうまく機能しますが、リロード ボタンをクリックすると失敗し、以前に読み込まれたページで実行する代わりに生の ajax応答が表示されます。

したがって、ここに私の醜いコードと、ページネーションに実装しようとしている機能に関するいくつかの説明があります。

1) 検索エンジンに適したリンク (サーバーは、クライアント側の JavaScript の可用性に応じて、html または js に応答します)。

2) JS がオンになっている場合に動的に変更可能な URL (「#」記号を使用)。

3) 履歴と戻るボタンのサポート。

4) 二重リクエストの最小化 (同じコンテンツが html ページでロードされた場合、ajax リクエストを行わないでください)。

JS:

$(function ($) {
  if (ajax_init) {
    $('.pagination a').live("click", function () {
      $.bbq.pushState({page: $.deparam.querystring($(this).attr('href')).page});
      return false;
    });
    $(window).bind("hashchange", function(e) {
      var anchor = $.deparam.fragment().page;
      var query = $.deparam.querystring().page;
      if (ajax_load(anchor, query)) {
        $(ajax_div).css('opacity', '0.4');
        $(ajax_div + '-processing').removeClass('hidden');
        $.ajax({
          type: 'GET',
          url: $.param.querystring('', {page: anchor}),
          dataType: 'script',
          cache: false
        });
      }
    });
    $(window).trigger('hashchange');
  }
});

function ajax_load(anchor, query) {
  if ((anchor && anchor !== query && !(!query && anchor == 1)) || $('#noscript').length < 1) {
    return true;
  }
  else {
    return false;
  }
}

テンプレート (Rails ビュー):

<div id="products-container" >

  <div id="products-processing" class="hidden">
    <%= image_tag "spinner.gif" %>
  </div>

  <div id="products">

    <div id="noscript">
      <%= render "products_list.erb" %>
    </div>

    <script type="text/javascript">
      var ajax_init = true;
      var ajax_div = '#products';
      var anchor = $.deparam.fragment().page;
      var query = $.deparam.querystring().page;
      if (!ajax_load(anchor, query)) {
        url = anchor ? anchor : (query ? query : 1);
        $.bbq.pushState({page: url});
      }
      else {
        $('#noscript').hide();
        $('#products-processing').removeClass('hidden');
      }
    </script>

  </div>

  <div id="products-min-height"></div>

</div>

AJAX テンプレート (Rails js ビュー):

$('#products').html('<%= escape_javascript(render "products_list") %>').css('opacity', '1');

UPD:更新中に IE がリクエスト タイプ ヘッダーを送信しない (または Rails が判断できない)。そのため、Rails は HTML ではなく JS ビューを生成します。解決方法:

  respond_to do |format|
    request.format.js? ? (format.js {render :index}) : (format.html {render :index})
  end

より良い解決策はありますか？

4

2 に答える 2

6

IE は更新時に「*/*」を要求するように見えますが、Rails は HTML よりも JavaScript の方が優れた応答であると考えているようです。更新は html に対してのみ行われる必要があるため、"*/*" は html を意味することをレールに伝えることで、この問題を修正できます。

 before_filter :set_request_type
 ...
 protected    

 def set_request_type
   request.format = :html if request.format == "*/*"
 end
于 2011-11-14T17:24:50.917 に答える
3

IE8でも同じ問題が発生しました。私のコントローラーは、JSとHTMLの応答を提供していました。私にとって、html形式のブロックがコードの最初に記載されていることを確認すると、問題が解決しました。

railsはjsテンプレートで応答するため、これは機能しません。

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

ただし、これは問題なく機能します。

respond_to do |format|
  format.html
  format.js
end
于 2012-02-09T16:14:09.140 に答える