Select2 results not showing using js/api select2_ajax_results filter

• motocom

• June 20, 2021 at 3:19 am

Hello,

I think I am really close with this, if you could point me in the right direction.

I have 2 select2 select fields.

The first select field, my choices are dynamically loaded using php.

The second select field, I using the acf.add_filter('select2_ajax_results') javascript filter to load/render the choices based on the first select field value (id).

Here is my javascript…

// select2 ajax results filter
acf.add_filter('select2_ajax_results', function( json, params, instance ){

    // if field id is packaging options select
    if(instance.data.field.data.key === 'field_60cd1751993d1') {

        // get the current post id value of the previous select field
        let post_id = instance.data.field.$el.prev('.acf-field-select').find('SELECT').val();

        // if we got post id else false
        if(post_id) {
            post_id = parseInt(post_id);
        } else {
            post_id = false;
        }

        // jquery ajax call
        $.ajax({
            cache: false,
            timeout: 30000,
            url: ajaxurl,
            type: 'GET',
            data: {
                action: 'get_packaging_options',
                post_id: post_id
            },
            dataType: 'json',
            success: function (response) {

                // add our array to json results array
                json.results = response.data;

                // log our updated json
                console.log(json);

                // return updated json
                return json;

            }
         });

    }

    // return default json
    return json;

});

When I click the second select field, the ajax success returned updated json console.log is this…

{
  limit: 0,
  more: false,
  results: Array(6)
    0: {id: "60cd5553b7a86", text: "Green"}
    1: {id: "60cd5565b7a87", text: "Orange"}
    2: {id: "60cd556db7a88", text: "Yellow"}
    3: {id: "60cd5575b7a89", text: "Blue"}
    4: {id: "60cd5586b7a8a", text: "Cyan"}
    5: {id: "60cd558cb7a8b", text: "Red"}
    length: 6
}

Which is as expected, this is my data sent via my ajax, but the select2 dropdown says No Results Found.

Can you see what I’m doing wrong here?

Many Thanks

• motocom

• June 20, 2021 at 4:15 am

I spotted an issue with my original javascript, I was returning to early at the end of my script, so my ajax request would of have not completed by the time this end return was hit.

So I’ve fixed this issue using this code below…

// select2 ajax results filter
acf.add_filter('select2_ajax_results', function( json, params, instance ){

    // if field id is packaging options select (second select field)
    if(instance.data.field.data.key === 'field_60cd1751993d1') {

        // get the current post id value of the previous select field
        let post_id = instance.data.field.$el.prev('.acf-field-select').find('SELECT').val();

        // if we got post id else false
        if(post_id) {
            post_id = parseInt(post_id);
        } else {
            post_id = false;
        }

        // jquery ajax call
        $.ajax({
            cache: false,
            timeout: 30000,
            url: ajaxurl,
            type: 'GET',
            data: {
                action: 'get_packaging_options',
                post_id: post_id
            },
            dataType: 'json',
            success: function (response) {

                // add our array to json results array
                json.results = response.data;
         
            }
         }).then(function () {

            // log our updated json
            console.log(json);

            // return updated json
            return json;

        });

    } else {

        // log our default json
        console.log(json);

        // return default json
        return json;

    }

});

So now when I click on my second select2 field, this is the updated json console log…

{
  limit: 0,
  more: false,
  results: Array(6)
    0: {id: "60cd5553b7a86", text: "Green"}
    1: {id: "60cd5565b7a87", text: "Orange"}
    2: {id: "60cd556db7a88", text: "Yellow"}
    3: {id: "60cd5575b7a89", text: "Blue"}
    4: {id: "60cd5586b7a8a", text: "Cyan"}
    5: {id: "60cd558cb7a8b", text: "Red"}
    length: 6
}

Log looks good, but instead of the the select2 dropdown saying No Results Found, it now says Searching…

But still my results are not loading?

Screenshot-2....png