CODEWITHSUNDEEP
javascriptyii2dialogpromptkartik-v
Adam Vtípil
Adam Vtípil

Reputation: 90

Yii 2 kartik dialog.prompt with input type textarea

I have a button that triggers a kartik dialog.prompt, where text is put in. I need the input in the dialog to have several rows and line breaking capability (like textarea)

How to change it from a simple text input to textarea?

Here is my 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!")
   }
});

I found that if type is not defined (unlike label and placeholder in my case), it defaults to "text". But I wasn't able to make the dialog render any type other than a simple one-row text input.

Upvotes: 0

Views: 1102

Answers (2)

Adam Vtípil
Adam Vtípil

Reputation: 90

It is possible to add custom html to krajeeDialog.prompt after all. In the documentation, kartik-v states:

content: string|object: If set as a string, it is treated as a raw HTML content that will be directly displayed.

So if I replace the original object in my code with a string containing the desired html, it will render my textarea or any other form element.

For example, replace it with a 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!")
   }
});

Upvotes: 1

Muhammad Omer Aslam
Muhammad Omer Aslam

Reputation: 23778

Apparently, this is not supported in the extension.

Reason:

The reason is that in the dialog.js where the KrajeeDialog.prototype is defined the function bdPrompt is the one that takes care of the prompt dialog that is to be created and it creates the default field type as input rather than deciding on any of the options or parameters passed to KrajeeDialog.prompt() although you can pass a parameter of name type like

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

but this does not decide if the element will be input or textarea type, this parameter type is passed as the attribute of the input element. See the below code block to understand the reason i explained the third line will always create a field of type input.

File yii2-dialog/assets/js/dialog.js Line 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;
}

So you might need to override the javascript function according to your needs if you want to work it that way.

Upvotes: 1

Related Questions