Reply To: Setting Field values using the Javascript API

• antishow

• June 20, 2019 at 11:28 pm

After doing more digging it seems that there’s nothing built into the api for this. So instead I had to write a bunch of code to take care of it. It’s just a start, and might not work for some field configurations (like cases where an image field returns just an id instead of an object), I’m not sure I’d paste this straight into production, but it’s a decent starting point. At the very least it could use a refactor to not be a single big, ugly function.

function setFieldValue(field, value) {
    switch (field.data.type) {
        case 'repeater':
            //Clean out any row there by default
            var rows = field.$rows();
            if (rows.length > 0) {
                field.remove(field.$rows().eq(0));
            }

            for (var rowIndex in value) {
                var row = value[rowIndex];
                var rowEl = field.add();

                for (var rowName in row) {
                    var rowVal = row[rowName];
                    var repeaterSubField = acf.getField(rowEl.find('[data-name="' + rowName + '"]'));

                    setFieldValue(repeaterSubField, rowVal);
                }
            }

            break;

        case 'clone':
            for (var cloneKey in value) {
                var cloneValue = value[cloneKey];
                var cloneSubField = acf.getField(field.$el.find('[data-name="' + cloneKey + '"]'));

                setFieldValue(cloneSubField, cloneValue);
            }
            break;

        case 'image':
        case 'file':
            var atts = {};
            for (var k in value) {
                atts[k] = value[k];
            }
            value.attributes = atts;
            field.render(value);
            break;

        case 'wysiwyg':
            var $wrap = field.$control();
            if ($wrap.hasClass('delay')) {
                $wrap.removeClass('delay');
                $wrap.find('.acf-editor-toolbar').remove();
                field.initializeEditor();
            }

            var editorWrap = field.$el.find('.wp-editor-wrap');
            if (editorWrap.length > 0) {
                var editorID = editorWrap.eq(0).attr('id').replace(/^wp-/, '').replace(/-wrap$/, '')
                window.tinyMCE.get(editorID).setContent(value);
            }

            break;

        case 'oembed':
            var url = $(value).attr('src').split('?').shift();

            field.$search().val(url);
            field.val(url);
            field.$el.find('.canvas-media').html(value);

            break;

        case 'gallery':
            for (var attIndex in value) {
                var att = value[attIndex];
                field.appendAttachment(att, attIndex);
            }

            break;

        case 'checkbox':
            field.$inputs().each(function (i, checkbox) {
                if (value.indexOf(checkbox.value) >= 0) {
                    checkbox.setAttribute('checked', 'checked');
                }
            });
            break;

        case 'radio':
            field.$control().find('[value="' + value + '"]').prop('checked', 'checked');
            break;

        case 'button_group':
            field.val(value);
            field.$el.find('input[value="' + value + '"]').prop('checked', 'checked').trigger('click');
            break;

        case 'true_false':
            if (value) {
                field.$input().prop('checked', 'checked');
            }
            break;

        case 'post_object':
            setSelect2FieldValue(field, value.ID, value.post_title);
            break;

        case 'page_link':
            setSelect2FieldValue(field, value, value);
            break;

        case 'relationship':
            var loadCheck = setInterval(function () {
                if (!field.get('loading')) {
                    clearInterval(loadCheck);
                    for (var relIndex in value) {
                        var post = value[relIndex];
                        field.$el.find('[data-id=' + post.ID + ']').trigger('click');
                    }
                }
            }, 100);

            break;

        case 'taxonomy':
            for (var taxIndex in value) {
                field.$el
                    .find('[value=' + value[taxIndex] + ']')
                    .prop('checked', 'checked');
            }
            break;

        case 'user':
            var userLabel = value.user_nicename + ' (' + value.nickname + ')';
            setSelect2FieldValue(field, value.ID, userLabel);
            break;

        case 'google_map':
            break;

        case 'date_picker':
        case 'date_time_picker':
        case 'time_picker':
            field.val(value);
            field.$el.find('[type=text]').val(value);
            break;

        default:
            field.val(value);
    }
}