web-dev-qa-db-ja.com

ビューでのajaxロード動作を変更するにはどうすればよいですか？

ブロックにいくつかの公開されたフィルターがあるビューがあります。 AJAXおよび自動送信機能を使用しているため、フィルターオプションが変更されるとすぐにビューが再ロードされます。

オプションを選択してからビューが再ロードされるまでの短い遅延の間に、おなじみの青いAJAX= throbberがフォームの下部のどこかに表示されます（非表示の送信ボタンが現在配置されている場所だと思います） ）。

Throbber要素のCSSをオーバーライドすることでこの画像をカスタマイズできることはわかっていますが、まったく使用しないほうがよいでしょう。

むしろ、jQueryアニメーションを使用して、公開されたフィルターフォーム（理想的にはメインビューも）をフェードアウトします。次に、AJAX呼び出しが完了すると、フェードインします。

それができない場合は、ビューのUIモジュールが更新時に使用するのと同じ方法を使用します。つまり、このアイコンをページの中央に配置します。

enter image description here

これはすでに組み込まれているので、この読み込み動作のスタイル/場所を変更する設定がどこかにあると思いました。そのような運はありません。

これらの方法のいずれかを実装するにはどうすればよいですか？

Drupal 7 with Views 7.x-3.3を使用しています。

7viewsajaxjavascript
34
Clive

小さなjqueryを使用してもかまわない場合は、常に次のようにすることができます。

$('#view-id').ajaxStart(function(){
   $('#view-filters-id').fadeTo(300, 0.5);
});
$('#view-id').ajaxSuccess(function(){
   $('#view-filters-id').fadeTo(300, 1.0);
});
42
Chance G

完全を期すために、ここで私が最終的に使用したコードを示します。 AJAXロードの開始時に公開されたフィルターフォームとビューの両方をフェードアウトし、終了時に再びフェードインします。

(function($) {
  Drupal.behaviors.events = {
    attach: function(context, settings) {
      $('#views-exposed-form-events-page', context).ajaxStart(function(){
        $('#views-exposed-form-events-page,div.view-id-events', context).fadeTo(300, 0.5);
      });
      $('#views-exposed-form-events-page', context).ajaxSuccess(function(){
         $('#views-exposed-form-events-page', context).fadeTo(300, 1.0);
         $('div.view-id-events', context).css('opacity', 0.5).fadeTo(300, 1.0);
      });
    }
  };
})(jQuery);
29
Clive

こんにちは私はあなたがしたいことを正確に行う非常にシンプルなモジュールを作成しました。モジュールには、スロバーのスタイルを制御したり、ハッキングすることなく独自の画像をアップロードしたりできる設定ページがあります。

これはサンドボックスリンクです： http://drupal.org/sandbox/ANDiTKO/1556808

もしそれが役に立ったと思ったら、公式プロジェクトとして承認されるように、ここでレビューしてください： http://drupal.org/node/1556114

10
ANDiTKO

私は研究をしました。
throbberは、_Drupal.views.ajaxView_のコンストラクターにハードコードされています ここ 。
_Drupal.views.ajaxView_のインスタンスは_Drupal.ajax_に格納されておらず、 そこにあります _@todo_について。
これは、オブジェクトにアクセスして独自のパラメーターを設定できないことを意味します。

ビューはどのように機能しますか？

短い答えはCSSです。
ビューの管理ページ throbberを非表示にして 親の_.ajax-progress-throbber_にスタイルを追加します。

_.ajax-progress-throbber {
  background-color: #232323;
  background-image: url("../images/loading-small.gif");
  background-position: center center;
  background-repeat: no-repeat;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  height: 24px;
  opacity: .9;
  padding: 4px;
  width: 24px;
}
_

Drupal.ajaxで何かできますか？

はい、私はAJAX要素（ボタン、リンクなど）に対して上書きできるいくつかのメソッドを見つけました。ここに例を示しました： 拡張する方法または“フック」DrupalフォームAJAX？ 。しかし、この場合はあまり良くありません。
Progress要素はbeforeSendの段階で表示されるため、発生する前に何かを行うことができます。

6
kalabro