WordPressを使用してjQueryタブのAJAXにJSONオブジェクトを送信します。

Question

WordPressを使用してメッセージングシステムをプログラミングするためにjQueryタブを使用しています。要点は、ユーザーが1つの会話を表す1つのタブをクリックすると、AJAX呼び出しがjQueryタブの機能で自動的に実行されることです。

アクションを呼び出すためにjQuery Tabをプログラミングしました（これもプログラムしました）。このアクションは、WordPressを使用してPHPでプログラミングされており、私はlocalhost/mywebpage/wp-admin/admin-ajax.php？action = my_actionを使ってアクションを呼び出すことができます。

問題は次のとおりです。jQueryタブのデフォルト機能は、PHPファイルの生の出力（ajaxアクション）を期待しています。つまり、PHPファイルにHTMLを記述する必要があるので、タブパネル（ui.panel.html）にレスポンスを置くだけです。しかし、私はこれが非効率的だと思うし、WordPres関数wp_send_json_success（jsonObject）を使ってJSONオブジェクトを作成したいと思います。これはui.ajaxSettings.dataFilter関数で受け取ります。

HTMLをui.ajaxSettings.dataFilter関数に送信すると、すべてが正しくjQueryタブパネルに表示されます。しかし、私がjsonの成功を送ると、コンソール上で見ることができますが、jQueryのタブパネルに表示することはできません。それはミリ秒表示され、その後消えます。そのため、JSONオブジェクトは受信されていますが、何らかの理由で表示できません。 jQueryのタブパネルに何かが表示される唯一の方法は、PHP関数で生のHTMLを送信することです。ここでは非常に簡単なコードの例です：

これは、JS関数です：

$(selector).tabs({ 
    beforeLoad: function(event, ui) { 
     ui.ajaxSettings.dataFilter = function(response) { 
      console.log(response); 
      ui.panel.html(response); 
    } 
}); 

これは良い作品PHP関数です：

<?php 
    echo 'Hello World!'; 

これは、上で表示されるPHP関数ですパネルはミリ秒後に消滅します。私の意見で

<?php 
    wp_send_json_success('Hello World!); 

、私は何か他のものを実行し、私はui.panel.htmlに表示されているものを消去していると思いますが、誰もがより多くの経験とそこにそこにあるかのように、私はjQueryのタブでその専門家ではありませんよそれが何が起こっているのか私に教えてもらえます。本当に感謝しています。

Answer 1

私はそれを稼働させましたが、修正は明白でしたが、これが最良の方法であるかどうかはまだ分かりません。これは私がやったことです：

var html = $('<div>').addClass('wrapper'); 

$(selector).tabs({ 
    beforeLoad: function(event, ui) { 
     ui.ajaxSettings.dataFilter = function(response) { 

      // Do whatever you want with the JSON object (obviously validations) 
      // In my case I want to create HTML elements with info from the response 
      var response_js_array = JSON.parse(response); 

      html.append($('<div>').text(response_js_array['message'])); 
    }, 
    load: function(event, ui) { 

     ui.panel.html(html); 

     // Do also whatever you want after the messages have been loaded. In my case, 
     // I scroll down to the last message 
     scrollDown(); // This is also a function I programmed 
    } 
});