Yii 2 kartik dialog.prompt с типом ввода textarea

У меня есть кнопка, которая вызывает диалоговое окно kartik.prompt, куда вводится текст. Мне нужно, чтобы ввод в диалоговом окне имел несколько строк и возможность разрыва строки (например, textarea)

Как изменить его с простого ввода текста на текстовое поле?

Вот мой javascript:

$("#bulk-email-button-invitations").on("click", function() {
    var grid = $("#invitations");
    var keys = grid.yiiGridView('getSelectedRows');

    if (keys.length >= 1){
    krajeeDialog.prompt({label:'Text emailu:', placeholder:'Zadejte text emailu'}, function (result) {
        if (result) {
            $(location).attr('href', '/educational-event-invitation/bulk-email?' + $.param({invitations: keys, text: result}));
        } else {
            krajeeDialog.alert('Text emailu nesmí být prázdný!');
        }
    });
    }else{
        krajeeDialog.alert("Nejprve vyberte studenty, kterým chcete poslat email!")
   }
});

Я обнаружил, что если тип не определен (в отличие от метки и заполнителя в моем случае), по умолчанию используется «текст». Но я не смог заставить диалог отображать какой-либо другой тип, кроме простого однострочного ввода текста.


person Adam Vtípil    schedule 09.11.2018    source источник


Ответы (2)


Судя по всему, это не поддерживается в расширении.

Причина:

Причина в том, что в dialog.js, где определено KrajeeDialog.prototype, функция bdPrompt отвечает за диалоговое окно подсказки, которое должно быть создано, и создает тип поля по умолчанию как input, а не выбирает какие-либо из переданных опций или параметров. на KrajeeDialog.prompt(), хотя вы можете передать параметр с именем type, например

krajeeDialog.prompt({
  label:'Text emailu:', 
  placeholder:'Zadejte text emailu',
  type:'password'
},function(){})

но это не решает, будет ли элемент иметь тип input или textarea, этот параметр type передается как attribute входного элемента. См. приведенный ниже блок кода, чтобы понять причину, по которой я объяснил, что третья строка всегда будет создавать поле ввода типа.

Файл yii2-dialog/assets/js/dialog.js Строка 110

if (typeof input === "object") {
    $inputDiv = $(document.createElement('div'));
    $input = $(document.createElement('input'));
    if (input['name'] === undefined) {
        $input.attr('name', 'krajee-dialog-prompt');
    }
    if (input['type'] === undefined) {
        $input.attr('type', 'text');
    }
    if (input['class'] === undefined) {
        $input.addClass('form-control');
    }
    $.each(input, function(key, val) {
        if (key !== 'label') {
            $input.attr(key, val);
        }
    });
    if (input.label !== undefined) {
        msg = '<label for="' + $input.attr('name') + '" class="control-label">' + input.label + '</label>';
    }
    $inputDiv.append($input);
    msg += $inputDiv.html();
    $input.remove();
    $inputDiv.remove();
} else {
    msg = input;
}

Поэтому вам может потребоваться переопределить функцию javascript в соответствии с вашими потребностями, если вы хотите работать таким образом.

person Muhammad Omer Aslam    schedule 09.11.2018

В конце концов, можно добавить собственный html в krajeeDialog.prompt. В документации kartik-v указано:

content: string|object: Если задано как строка, она обрабатывается как необработанный HTML-контент, который будет отображаться напрямую.

Поэтому, если я заменю исходный объект в своем коде строкой, содержащей нужный html, он отобразит мою текстовую область или любой другой элемент формы.

Например, замените его текстовым полем html:

$("#bulk-email-button-invitations").on("click", function() {
    var grid = $("#invitations");
    var keys = grid.yiiGridView('getSelectedRows');

    if (keys.length >= 1){
    krajeeDialog.prompt('<textarea>Sample text...</textarea>', function (result) {
        if (result) {
            $(location).attr('href', '/educational-event-invitation/bulk-email?' + $.param({invitations: keys, text: result}));
        } else {
            krajeeDialog.alert('Text emailu nesmí být prázdný!');
        }
    });
    }else{
        krajeeDialog.alert("Nejprve vyberte studenty, kterým chcete poslat email!")
   }
});
person Adam Vtípil    schedule 13.11.2018