How to have multiple responses in same ajax call?

  • Hello,

    I am making an ajax call with some parameters in wordpress

     $.ajax({
            type : 'POST',
            dataType : 'html',
            url: '<?php echo admin_url('admin-ajax.php'); ?>',
        data : {
            'yearArr' : yearArr,
            'transmissionArr' : transmissionArr,
            'doorsArr' : doorsArr,
            'cylindersArr': cylindersArr,
            'drivetrainArr' : drivetrainArr,
            'certifiedArr' : certifiedArr,
            'fueltypeArr' : fuelTypeArr,
            'bodystyleArr' : bodystyleArr,
            'makeVal' : makeVal,
            'modelVal' : modelVal,
            'bodytypeVal' : bodyTypeVal,
            'minpriceVal' : minPrice,
            'maxpriceVal' : maxPrice,
            'minmileageVal' : minMileage,
            'maxmileageVal' : maxMileage,
            'exteriorcolorVal' : exteriorColor,
            'interiorcolorVal' : interiorColor,
            'sortbydesktopVal' : sortbyDesktop,
            'sortbymobileVal' : sortbyMobile,
            'searchbarVal' : searchBar, 
            'action' : 'Get_Ajax_Filters',
        },
        success : function(result){
            $('element1').html(result1)
            $('element2').html(result2)
        },
        error : function(error) {
            alert('something went wrong please try again or refresh the page')
            $('.inventory-products__overlay').css('display','none');
        }
    })

    I made a function in functions.php file. the function is running wp query which i can output on frontend in success call.

    What i want is to modify the function in a way that it returns two array or some sort of data by which i can show the selected filters in #results element and the listings returned from wp_query in #listings element
    IDK how i can do this. I can not send multiple actions to function.php, and the result parameter in success function also returning the whole content so i’m little confused what to do now.

    I will really apperaciate if you can help.

    Regards

    Junaid

Viewing 4 replies - 1 through 4 (of 4 total)

  • Use wp_send_json_success() to send a response array in JSON. Use values inside that response array to do different things inside your AJAX success function, which is listening for that “result.”

    Moderator bcworkz

    (@bcworkz)

    Your PHP can make two different queries, one for results and one for listings. Or if a query is inappropriate for either, do whatever is needed to collect the requested data. You can roll the data into one overall, 2 element array, for example:

    $everything = [
  'results' => [object, object, object, etc. or whatever sort of data];
  'listings' => [object, object, object, etc. or whatever sort of data];
];

    JSON encode $everything for the Ajax response.

    In your jQuery success:, decode the JSON and extract each inner array of objects or whatever data and assign it to its respective DOM elements.

    Thread Starter jasghar

    (@jasghar)

    @bcworkz I am returning huge html in the wp query calll which is the html of the post layout.
    and when i use json_encode it gives me error that the html is not a valid json

    Moderator bcworkz

    (@bcworkz)

    json_encode() has such a specific error message? I thought it just returns false on error.

    Anyway, you maybe need to run the HTML through htmlspecialchars() first?

    Just how large is “huge”? Textual data doesn’t normally consume that much space in a data stream. If we’re talking about many dozens of kbs, you might want to eventually consider some sort of lazy load scheme or some other way to break up the data into more manageable chunks. After all, the user can only see a screen full of data at a time. A page can always get more data as the user scrolls down.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to have multiple responses in same ajax call?’ is closed to new replies.