2

Wordpress テーマの管理ページに AJAX を実装したいと考えています。私はほとんどそこにいるように見えますが、どういうわけか間違ったクラスにフェードインしています.

提供されたクラス ラベルを含むこのスクリーンショットを参照してください。

テーマ オプションのスクリーンショット

何が起こっているかは次のとおりです。

  1. [外観] > [サイト オプション] をクリックすると、ページが正しく表示され、1 ページのオプションが表示されます。

  2. 上部のナビゲーション タブの 1 つをクリックすると、ページが正しくフェードアウトします。

  3. ページがフェードインすると、下の 2 番目のスクリーンショットのように表示されます。

ここに画像の説明を入力

現在リクエストを処理しているコードは次のとおりです。

 jQuery('.nav-tab').live('click', function(e){ 
     e.preventDefault();
     var link = jQuery(this).attr('href'); //Get the href attribute
 jQuery('.page-form').fadeOut(500, function(){ //fade out the content area
 jQuery("#loader").show(); // show the loader animation
    }).load(link + '.page-form', function(){ jQuery('.page-form').fadeIn(500, function(){ 
 jQuery("#loader").hide(); //hide the loader
   });
  });
 });

したがって、ワードプレスの管理領域全体ではなく、レンダリングされたコンテンツ内の「ページフォーム」クラスのみを表示する方法を知る必要があります。

4

3 に答える 3

3

AJAX リクエストでページ全体をロードしており (Bence が述べているように)、応答サーバー側を変更することが最善の選択肢ですが、jQuery を使用してこれを修正することは可能です。

jQuery('.nav-tab').on('click', function(e){ 
    e.preventDefault();
    jQuery('.page-form').load(jQuery(this).attr('href') + ' .page-form');
});

これにより、クリックされたリンクの場所から URL が読み込まれ、結果からクラス '.page-form' を持つ要素が抽出され、'.page-form' によって選択された要素がそのコンテンツに置き換えられます。でも;

  • URL とセレクター (' .page-form') の間に [スペース] があることを確認してください。コードにスペースがありません
  • セレクターとして「クラス」を使用すると、複数の要素が返される可能性があります。複数の要素が選択された場合の結果がどうなるかわかりません

こちらのドキュメントを参照してください: http://api.jquery.com/load/

注: コードで jQuery.live() を使用していますが、これは jQuery 1.7 ( http://api.jquery.com/live/ ) 以降非推奨です。コードを書き直して、代わりに jQuery.on() を使用することもできます ( http://api.jquery.com/on/ )

于 2013-01-27T23:09:46.967 に答える
1

個々のタブごとに ajax する代わりに、jQuery ui タブ ウィジェットをページに適用することもできます。次に、マークアップは次のようになります。

<head>

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript>
  $(document).ready(function() {
    $("#tabs").tabs();
  });
</script>

</head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-General">General Settings</a></li>
    <li><a href="#tabs-Layout">Layout Options</a></li>
    <li><a href="#tabs-Content">Content Display</a></li>
    <li><a href="#tabs-Advanced">Advanced Options</a></li>
  </ul>
  <div id="tabs-General">
    <!-- general settings form -->
  </div>
  <div id="tabs-Layout">
    <!-- Layout options form -->
  </div>
  <div id="tabs-Content">
    <!-- content display form -->
  </div>
  <div id="tabs-Advanced">
    <!-- advance options form -->
  </div>
</div>
</body>

これは、head にカスタム スクリプトを追加できることを前提としています。また、提供する保存/キャンセル アクションでタブが適切に動作するように注意する必要がありますが、これは AJAX ソリューションにも当てはまります。ただ違う。

編集：フェードインとフェードアウトのアニメーションを制御する非表示と表示のオプションにもリンクする必要がありました。次のように、これらのオプションをコンストラクターに追加できると思います (tabs()リンクされたドキュメントのサンプルコードのように、呼び出しが終了した後に追加することに加えて)。

<script type="text/javascript>
  $(document).ready(function() {
    $("#tabs").tabs(
                hide : {
                    effect : 'fadeOut',
                    duration : 500
                },
                show : {
                    effect : 'fadeIn',
                    duration : 500
                }
            );
  });
</script>
于 2013-01-27T22:40:48.727 に答える
1

を使用してページ全体を渡し続けAJAX、これをナビゲーション バーとヘッダーに追加できます。

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    return;
}

AJAXこれは、ページが経由でリクエストされたかどうかを確認し、ページへのreturn;読み込みを停止します。ifまたは、 経由で呼び出されているときに、このステートメント内に必要なコードを配置することもできますAJAX。

于 2013-01-27T23:17:20.433 に答える