Get the saved value from a dynamically loaded Select field using JavaScript API

• jkohlin

• January 12, 2022 at 5:14 pm

I’ve looked through the documentation and tried everything I could think of, but I can’t seem to find the value saved in the database for a specific field using the JavaScript API.
Here’s my situation.
I have a Post Object field loading posts from a specific post type (courses).
After that I have a Select field (empty from start, no extra styling no Ajax option set) that I fill with options (course description alternatives) from that course using Ajax (on my own) once a course is selected from the Post object field.
When the front end page loads it works like a charm, but when I want to edit this page, the choices from the Select field is forgotten (since they are blank at load time).
My plan was to fetch the saved value for this field somehow so that I can set selected on the correct option once the Ajax results come in.

Now finally, my problem: How can I find the value saved in the database from the Select field (course description alternatives) when editing the page, using the JavaScript API?

Alternatively, should I have done this differently to begin with? if so, how?

• John Huebner

• January 13, 2022 at 8:49 am

To get the value of the field

1) Return the current value for the post being shown as part of the AJAX response you are already doing.

2) Use wp_localize_script() to set the current value in a JS var so that you can access it.

• jkohlin

• January 13, 2022 at 9:05 am

Hi John and thank you for taking the time to answer.
I am using wp_localize_script() when I’m getting the course description alternatives, but I don’t know how, in that php script (that responds to the ajax call), to get the value of the Select field for that specific post.
This is how it’s set up:

 
{
    "key": "field_61d5a151263bf",
    "name": "optional_block",
    "type": "flexible_content",
    "layouts": {
        "layout_61d5a167e8fda": {
            "key": "layout_61d5a167e8fda",
            "name": "course_teaser_block",
            "sub_fields": [
                {
                    "key": "field_61d592c4129c9",
                    "name": "course_teasers",
                    "type": "repeater",
                    "sub_fields": [
                        {
                            "key": "field_61d59682129cf",
                            "name": "course_teaser_course",
                            "type": "post_object",
                            "post_type": [
                                "mscourse"
                            ],
                            "return_format": "id",
                        },
                        {
                            "key": "field_61d594db129cb",
                            "label": "Kurspuff",
                            "name": "course_teaser_num",
                            "type": "select",
                            "ui": 0,
                            "return_format": "value",
                            "ajax": 0,
                            "placeholder": ""
                        }
                    ]
                }
            ]
        }
    }
}

• John Huebner

• January 13, 2022 at 9:58 am

The field definition really won’t help me.

When you make the AJAX request you need to send the current post ID as well as any other data you’ll need to get the current value to be returned.

Another alternative is to also use an acf/prepare_field filter to also set the choices in PHP. If you do this then ACF will set the selected value. You can then get the selected value before updating the choices using JS and then reset the selected value after.