具有输入类型textarea的Yii 2 kartik dialog.prompt

Question

我有一个触发kartik dialog.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!")
   }
});

我发现如果类型没有定义(不像我的例子中的标签和占位符)，它默认为"text“。但是，除了简单的一行文本输入之外，我无法使对话框呈现任何类型。

Answer 1

显然，扩展中不支持这一点。

原因：

原因是，在定义了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函数。

Answer 2

毕竟，向krajeeDialog.prompt添加自定义html是可能的。在文件中，kartik说：

如果设置为字符串，则将其视为将直接显示的原始HTML内容。

因此，如果我用包含所需html的字符串替换代码中的原始对象，它将呈现我的textarea或任何其他表单元素。

例如，将其替换为textarea 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!")
   }
});