Carbon-fields: Country list and city list in container Post Meta

Created on 27 Jun 2018 · 5Comments · Source: htmlburger/carbon-fields

Hello!
I want to create two drop-down lists. The first list is a list of all countries in the world, which is loaded from the database. The second list is the list of cities in the country that is selected in the first list. But I don't understand how do I update the choices in the second list(city list), depending on which country is selected in the first list. The first list is made using the select field, second list is made using the multiselect field. And they are both in Post Meta Container.

I tried to connect AJAX. I'm sending a request to the country whose cities I need to get. The query succeeds, but how do you now insert the resulting array instead of the values that are already in multiselect field?

[type] question

Source

Excelsiorer

All 5 comments

Hi @Excelsiorer,

You need to replace the options property which holds the data rendered by the multi-select field.
When your AJAX request is done you should dispatch the updateField action through the API.

window.carbonFields.api.store.dispatch({
   type: 'fields/UPDATE_FIELD',
   payload: {
       fieldId: 'someFieldId',
       data: {
           options: yourResponseVariable
       }
   },
   meta: {
       dirty: true
   }
});

vvasilev- on 28 Jun 2018

👍1

Which type og response variable i need insert in the
data: {
options: yourResponseVariable
}
?

My AJAX:

function display_city_list(id){
        $.ajax({
            url:     ajax_url, 
            type:     "POST",
            dataType: "json", 
            data: { action: 'carbon_city', id: id },  
            success: function(response) { 
                window.carbonFields.api.store.dispatch({
                   type: 'fields/multiselect',
                   payload: {
                       fieldId: 'product_city',
                       data: {
                           options: JSON.stringify(response)
                       }
                   },
                   meta: {
                       dirty: true
                   }
                });
            },
            error: function(response) { 
                console.log('bad');
            }
        });

And my function in function.php

function carbon_start_send_city(){
    $list_name = array('name' => 'test');
    return($list_name);
}

Excelsiorer on 28 Jun 2018

Hi @Excelsiorer,

Even if you change/update the choices of the multiselect field through the API, the new values would not be saved in the database, because these new values are not added with add_options or set_options method. Currently, the value which is passed from the field is compared with the predefined options.

We will try to add an ability to change the values of select and multiselect fields through the API in some of feature releases.