Автоматический выбор Select2 из запроса JSON: с помощью редактора таблиц данных - PullRequest
0 голосов
/ 09 февраля 2019

Я использую select2 как тип вещи типа typehhead: когда пользователь печатает, результаты заполняются в зависимости от изменяющегося ввода.Я использую templateResult для настройки результатов поиска с изображениями, кнопками и т. Д. TemplateSelection вернет на вход select2 только определенные части JSON ajax.

Отлично работает.

Сейчас я использую Редактор таблиц данных, чтобы показать форму.Как часть редактора, когда форма открывается в режиме редактирования, тот же самый запрос ajax URL-адреса, основанный на моем коде ниже, добавит параметры initialValue = true и value = "кое-что" к URL-адресу.

На странице AJAX php я улавливаю if initialValue = true, а затем отвечаю данными JSON, соответствующими отправляемому значению.

Вот мой select2:

{
   "label": "Attach to Contact:",
   "name": "assigned_to_contact_id",
   "type": "select2",
        "opts": {
             value: "",
             initialValue: true,
             ajax: {
                    url: "ajax_get_json.php?what=company_autocomplete_contacts",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            query: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used                            
                        params.page = params.page || 1;

                        return {
                            results: data,
                            pagination: {
                                more: (params.page * 30) < data.total_count
                            }
                        };
                    },
                    cache: true
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatResults_editor,
                templateSelection: formatResultsSelection_editor,
                allowClear: true,
                placeholder: {
                    "id": "",
                    "text": "(Searching all locations)"
                }
            }
 }

Вот мои функции форматирования:

function formatResults_editor(results) {

    if (results.loading) {
        return "Searching...";
    }

    //set image to contact pic
    var image = '';

    if (results.no_contact_pic_requested == 'Y') {
        image = 'company_specific_files/contacts_images/no_pic_requested.png';
    } else {
        image = 'company_specific_files/contacts_images/' + results.company_id + '/' + results.id + '/' + 'webcam.jpg';
        //check to see if the pic exists, else set default image
        $.ajax({
            type: "POST",
            async: false,
            url: 'company_specific_files/contacts_images/' + results.company_id + '/' + results.id + '/' + 'webcam.jpg',
            error: function (response, status, xhr) {
                //if no image present, use default image
                image = 'company_specific_files/contacts_images/blank_avatar.png';

            },
            success: function (response, status, xhr) {
                //this is how I see if there's an image:  check the content-type response from ajax call. Make sure ajax is not async to work
                var ct = xhr.getResponseHeader("content-type") || "";

                if (ct == "image/jpeg") {
                    image = 'company_specific_files/contacts_images/' + results.company_id + '/' + results.id + '/' + 'webcam.jpg';
                } else {
                    image = 'company_specific_files/contacts_images/blank_avatar.png';
                }

            }
        });
    }

    var markup = "<div class='clearfix'><img style='float:left; padding-right: 5px' class='img-responsive' height='50' width='50' src='" + image + "'>" + ' ' + results.label + "</div>";
    return markup;

}

function formatResultsSelection_editor(results) {


    if (results.id === '') {
        return '(Searching all locations)'; //placeholder added this way since using ajax per docs.
    }

    return results.contact_name + ' ' + results.birthdate;

}

Когда пользователь печатает / ищет имя в select2, все работает нормально: значение заполняется, результаты форматируются в раскрывающемся списке, результат отображается после выбора во входных данных select2.

Теперь, если редактор открывается и заполняет значение select2, запрос AJAX выглядитнапример:

ajax_get_json.php?what=company_autocomplete_contacts&initialValue=true&value=%224258%22  

... и ответ на этой странице выглядит следующим образом:

{"id":"1","text":"sample text","location":"Bayview","contact_name":"Mark","birthdate":"2010-05-28","label":"Mark from Bayview","value":"22","location_id":"4322","company_id":"432342","no_contact_pic_requested":"N"}

Так почему же select2 не заполняется автоматически с меткой ответа JSON, как это было быесли он был выбран из templateSelection?

Заполнитель при наличии начального значения по-прежнему говорит «Поиск ...», когда форма открывается в режиме редактирования, когда она действительно должна сказать «Отметить» (2010-05-28)'как это происходит, если пользователь ищет его и выбирает параметр templateResult.

Это все, что у меня есть, и, похоже, я больше не могу прогрессировать.

1 Ответ

0 голосов
/ 12 февраля 2019

Если кто-нибудь когда-либо сталкивался с этим:

Это связано с редактором Datatables, я обнаружил.

Я не могу использовать templateSelection.Я форматирую результаты с идентификатором и текстом.Оттуда он будет заполняться соответственно.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...