AJAX fails using textarea and CKeditor

Hi guys,

following code will implement AJAX-Request as intended. Curiously, it’s only working with yii2-method textinput(). Using yii2-method textarea() or even widget CKEditor doesn’t work- Any ideas how to use AJAX-Request with more comfortable methods but textinput()?

Here is Controllercode:

<?php


namespace frontend\controllers;


use Yii;

use yii\helpers\Json;

use backend\modules\app_einstellung\models\Textbaustein;

use yii\web\Controller;


class TextbausteinController extends Controller {


    public function actionBaustein($textId) {

        $text = Textbaustein::findOne($textId);

        echo Json::encode($text);

    }


}

.

.

Here is JQueryCode:

<?=

Dialog::widget();


$script = <<< JS

        $('#bez').change(function(){

        //$('#mailausgang-inhalt').val('');

        var textId=$(this).val();

        $.get('textbaustein/baustein',{textId:textId},function(data){


   var data=$.parseJSON(data);

  krajeeDialog.alert('Fügen Sie eventuell  erzeugte Mailvorlagen manuell(Copy&Paste) in Ihren Maileditor ein');

   $('#mailausgang-inhalt').attr('value',data.inhalt);

   });

 	});


JS;


$this->registerJS($script);

?>

Following elements don’t work with AJAX! Why??

        //echo $form->field($model, 'bodytext')->textarea();

        /* echo $form->field($model, 'bodytext')->widget(\dosamigos\ckeditor\CKEditor::className(), [

          'preset' => 'full', 'clientOptions' => ['height' => 200],

          ]); */

Only this element works with AJAX! Why only this??

        echo $form->field($model, 'bodytext', ['addon' => [

                        'prepend' => ['content' => 'Vorlage']]])->widget(TwbsMaxlength::className())

                ->textInput();

Hi Thomas,

2 things come to my mind.

1. jQuery.change event is triggered when the input focus leaves the field. Pressing ENTER key in text area won’t trigger the event.

2. The value in a text area may contain CR/LF code, which may prevent the controller to get the intended id.

Okay. Thx for these informations. As it seems, I know so far why event won’t be triggered. It’d be better to know if there are possibilites to get AJAX triggered with alternative elements but textinput().

I can’t believe, that creators of framework just implemented AJAX using textinput(). This argument won’t be accepted by my chief, I assume

I think you have to attach an event handler on key press event, in which fire the Ajax call only when the key is ENTER.

Maybe, this will solve my problem for textarea().Definitively, I need AJAX-request for Widget [color=#1C2837][size=2]CKEditor[/size][/color]

[color=#1C2837][size=2][/size][/color][color="#1c2837"][size=2]Before coding like this:[/size][/color]

[color="#1c2837"][size=2]What do you think, will AJAX-request also be taken from Widget, if I attach event handler for key ENTER?

[/size][/color]

I have no experience on CKEditor. Maybe someone else may tell you how you can do it. But in the meantime you can try it for yourself.

So, I did, but of course, I don’t succeed. Following JQuery-code will have no error, but it’s also ineffective for textarea()

$script = <<< JS

$('#bez').change(function(){

//$('#mailausgang-inhalt').val('');

    var textId=$(this).val();

    $.get('textbaustein/baustein',{textId:textId},function(data){

        var data=$.parseJSON(data);

        krajeeDialog.alert('Fügen Sie eventuell  erzeugte Mailvorlagen manuell(Copy&Paste) in Ihren Maileditor ein');

        $('#bez').keypress(function(e) { //won't have any effect

        //$('#mailausgang-inhalt').keypress(function(e) { //won't have any effect,too

        if(e.which == 13) {

            $('#mailausgang-inhalt').attr('value',data.inhalt);

        }

            });

    });

});

How else should I understand ur suggestion [color="#1C2837"][size="2"] to attach an event handler on key press event, in which fire the Ajax call only when the key is ENTER?[/size][/color]

Not tested, but something like this.

$script = <<< JS

$('#bez').keypress(function(e){

    if(e.which == 13) {

        var textId=$(this).val();

        $.get('textbaustein/baustein',{textId:textId},function(data){

            var data=$.parseJSON(data);

            $('#mailausgang-inhalt').attr('value',data.inhalt);

        });

    }

});

Well, this fails which is a shame,really

Debugger of Firedebug shows up, that condition prevents getting data of function, so a breakpoint at condition will show:

e: (unavailable)

I’m not confused about this,'cause a DropDownBox(#bez) actually won’t be triggered using ENTER