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


34

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

オプションを選択してから再ロードされるビューまでの短い遅延で、おなじみの青いAJAXスロバがフォームの下部に表示されます(非表示の送信ボタンは現在どこにあると思います)。

throbber要素のCSSをオーバーライドすることでこの画像をカスタマイズできることは知っていますが、まったく使用したくないと思います。

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

それに失敗すると、Views UIモジュールが更新するときに使用するのと同じメソッド、つまり、このアイコンをページの中央に配置したいと思います。

ここに画像の説明を入力してください

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

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

ビュー7.x-3.3でDrupal 7を使用しています。


うーん...朝のプロジェクト:)
レスター・ピーボディ

あなたがこれを行う必要がある期間は何ですか?
レスターピーボディ

@Lester私が取り組んでいるプロジェクトのリリースブロッカーではないので、私は大急ぎではありません... 私はめったにViewsを使用せず、それよりも低いレベルで「関与」する時間(または率直に言ってエネルギー)がありません。しかし、私は現在、eコマースの取り組みをDrupal Commerceに移植し始めているので、この種のことを行えるようにする必要があります。7日間の賞金期間中に良い回答を受け取ったら、月を越えます:)
クライヴ

ビューのスロバをスタイリングするためのカスタムモジュール(設定管理ページ付き)の作成が完了しました。まだ興味をお持ちですか?drupal.orgで数日以内にアップロードできます
-ANDiTKO

1
#random-:-o @Cliveは答えがすべてだと思った、あなたは質問さえする;):D
SGhosh

回答:


42

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

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

4
はい、この解決策に同意します。ただ、jQuery ajaxSendajaxComplete条件if (settings.url == '/views/ajax') {//... }を使用して、より詳細に制御できることに注意してください。
カラブロ

うわー、私は本当に過度に複雑なことを今ではとても明白に思えます!ビューではなくイベントをフィルターフォームにアタッチする必要がありました(それ以外の場合ajaxSuccessは1回だけ発生します。イベントは置換されたに自動的に再バインドされないためだと思います<div>)が、それ以外は完璧であり、美しいことは言うまでもありません。どうもありがとう
クライブ

@kalabroこれであなたの助けてくれてありがとう、私がこれとあなたの答えの間に報奨金を分けることができれば私はそうする; しかし、これはほぼ完全に機能する例であるため、実際にこのために行かなければなりません:)
クライブ

@Clive、解決策が見つかったことを非常に嬉しく思います:)
kalabro

1
jQuery 1.8以降、.ajaxSuccess()メソッドはdocumentにのみ添付する必要があります。上記のkalabroで提案されているように、設定値を比較することが方法です。ソース:api.jquery.com/ajaxSuccess
cjoy

29

完全を期すために、私が最終的に使用したコードを次に示します。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);

驚くばかり!お役に立ててうれしいです。
チャンスG

これはDrupal 6でどのように行われますか?
ライアンG

本当に素晴らしいですが、一度だけ適用されます:)
Kojo 14

10

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

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

有用であると思う場合は、公式プロジェクトとして承認できるように、ここで公開してください:http ://drupal.org/node/1556114


それはすばらしく感謝します:)私はそれをインストールし、機会があればレビューにコメントを投稿します
Clive

6

私はちょうど研究をしました。ハードコーディングされて、ここでのコンストラクタで。 のインスタンスはに保存されておらず、そこにあります。 これは、オブジェクトにアクセスして独自のパラメーターを設定できないことを意味します。
throbberDrupal.views.ajaxView
Drupal.views.ajaxViewDrupal.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 Form AJAXを拡張または「フック」する方法は?。しかし、この場合、それはあまり良くありません。
進行中の要素がbeforeSend段階的に表示されるため、発生する前に何かを行うことができます。


情報をどうもありがとうございますが、問題を解決するためにどのようにそれを使用するのかわかりません。少なくともViewsモジュールをハッキングせずに、CSSを超えるデフォルトのビューのAjaxロード動作を追加/変更することは不可能だと言っていますか?
クライブ

ビューもCSSを使用するため、CSSを使用できます。.throbberいくつかのスタイルを非表示にして追加するだけです.ajax-progress-throbber
kalabro

OK、ブロック内の公開されたフィルターフォームとビュー自体の両方が、.ajax-progress-throbberAJAXが呼び出されたときのクラスを取得しますか?そのことに気づいていないことを認めなければなりませんが、確認します。そして、あなたは私がbeforeSend関数でjQueryアニメーションを呼び出すことができると思います(あなたの他の質問への答えに基づいて)?おかげで、私は実際にはビューを使用していませんし、何が起こっているのかを知るためにあらゆるコードを掘り下げて調べることもできません!私はそれを試してみる方法をお知らせします
クライブ

1
フォーム要素で必要なフェード効果を達成するために留意すべきことは、jQueryアニメーションの代わりにCSSトランジションを利用することもできますが、jQueryアニメーションはすべてのブラウザーとCSSトランジションで最新世代でのみ機能します。
レスターピーボディ

@Lesterに感謝します。とりあえずjQueryを使いたいです。@kalabro残念ながらあなたの提案はうまくいきません。ビューも公開されたフィルターブロックも、.ajax-progress-throbberどの時点でもクラスに適用されるわけではないため、メソッドは機能しません。試してくれてありがとう
クライブ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.