この回答は Magnific の ajax 呼び出しにデータを挿入することに関する最初の質問だったので、ここに投稿します。これを理解しようと何時間も試みた後、ポップアップを閉じずにギャラリーアイテム間を移動できるギャラリーを使用している場合elementParse
、AJAX データを設定するために使用すると、アイテムを表示した後にアイテムにアクセスすると失敗することを知っておく必要があります。それ(ポップアップがまだ開いている間)。
これはelementParse
、アイテムがすでに「解析」されているかどうかを検出するチェックにラップされているためです。何が起こるかについての簡単な説明は次のとおりです。
- アイテム インデックス 2 のギャラリーを開きます。
- アイテムはまだ解析されていないため、解析済みフラグを に設定し、コールバックを (この順序で)
true
実行します。elementParse
あなたのコールバックは、このアイテムのデータを取得する ajax オプションを設定します。すべて問題ありません。
- アイテム インデックス 3 に移動 (右)。
- 同上。アイテムは解析されていないため、コールバックを実行します。コールバックがデータを設定します。できます。
- アイテム インデックス 2 に戻ります (左)。
- 今回はアイテムが解析されました。想定される潜在的なパフォーマンス上の理由から、アイテムの要素の再解析をスキップします。コールバックは実行されません。Magnific の ajax データ設定は、アイテム インデックス 3 の場合と同じままです。
- AJAX 呼び出しは古い設定で実行され、代わりにアイテム インデックス 3 のデータが返され、ユーザーにレンダリングされます。Magnific はインデックス 2 にあると認識しますが、インデックス 3 のデータをレンダリングしています。
これを解決するには、常に ajax 呼び出し前に実行されるコールバックにフックする必要がありますbeforeChange
。
主な違いは、現在のアイテムがコールバックに渡されないことです。幸いなことに、この時点で、magnific はポインターを正しいインデックスに更新しました。以下を使用して、現在のアイテムの要素を取得する必要があります。
var data = {}; // Your key-value data object for jQuery's $.ajax call.
// For non-closures, you can reference mfp's instance using
// $.magnificPopup.instance instead of 'this'.
// e.g.
// var mfp = $.magnificPopup.instance;
// var itemElement = mfp.items[mfp.index].el;
var itemElement = this.items[this.index].el;
// Set the ajax data settings directly.
if(typeof this.st.ajax.settings !== 'object') {
this.st.ajax.settings = {};
}
this.st.ajax.settings.data = data;
この回答は、どちらの方法でも機能するため、現在最も投票されている回答の適切な代替手段としても使用できます。