使用WordPress将JSON对象发送到jQuery Tabs的AJAX

Question

I am using jQuery Tabs to program a messaging system using WordPress. The point is that when the user clicks one tab, which represents one conversation, an AJAX call is performed automatically with the functionality of jQuery Tabs.

I programmed the jQuery Tab to call an action (that I programmed as well). The action is programmed in PHP using WordPress and I can call it through localhost/mywebpage/wp-admin/admin-ajax.php?action=my_action.

The problem is the following: The default functionality of the jQuery tabs expects the raw output of the PHP file (the ajax action). This means I have to code HTML on the PHP file so I just put the response on the tabs panel (ui.panel.html). However I think this is inefficient and I would like to create a JSON object using WordPres function wp_send_json_success( jsonObject ) which is received on the ui.ajaxSettings.dataFilter function.

When I send HTML to the ui.ajaxSettings.dataFilter function, everything is correctly displayed on the jQuery tabs panel. But when I send a json success, I can see it on the console but I can't display it on the jQuery tabs panel. It appears for a millisecond and then disappears. So the JSON object is being received but for some reason can't be displayed. The only way something is displayed at the jQuery tabs panel is by sending raw HTML by my PHP function. Here is a very simple code example:

This is the JS function:

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

This is the PHP function that works good:

<?php
    echo 'Hello World!';

This is the PHP function that displays on the panel por a millisecond and then disappears.

<?php
    wp_send_json_success( 'Hello World! );

In my opinion, I think something else is executing and erasing what I have displayed on the ui.panel.html but I'm not that expert in jQuery tabs so if there is anyone out there with more experience that can tell me what it's going on I would really appreciate it.

Answer 1

I got it working and the fix was obvious but I am still unsure if this is the best way to do it. This is what I did:

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
    }
} );