Editable with AJAX

[zserg84]

HI !
I have a problem. I need to load editable-widget, using AJAX.

//controller
public function actionItem(){
   return $this->renderAjax('_item');
}

// views/main.php
<div id = "cloneDiv">
<?=Yii::$app->controller->renderPartial('_item')?>
</div>
<input type="button" value="Click" onclick="a()">
<script>
function a(){
    $.post('item', function(data){
            $("#cloneDiv").html(data);
     });
}
</script>

// views/_item.php
<?
$widgetParams = [
    'type'=>'primary',
    'size'=>'md',
    'editableValueOptions'=>['class'=>'text-success']
];

echo \kartik\editable\Editable::widget(
    array_merge($widgetParams, [
        'id'=>'asdf',
        'name' => 'asd',
        'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
    ])
);

When I click to the button, editable-widget loads to '#cloneDiv', but widget doesn't work..
I tried to use renderAjax, renderPartial in my Action - no results.

[dub34]

I have the same problem. Any solutions?

[zserg84]

This problem is solved by PJAX :) You can see the solution in the internet or (if you don't want use pjax) you can see the file 'editable-pjax.js', which is contained to the plugin

[dub34]

Can you show your pjax code? I load modal with AJAX, in this modal i want to use editable. But it don`t work of course. I try to manual call $('#selector').editable(), but it not work to.
thank you for reply. Now will see 'editable-pjax.js'

[zserg84]

Somethink like that (it is my example):

//index.php
\yii\bootstrap\Modal::begin([
    'id'=>'objectModal',
    'header' => "<h2>".$modalHeader."</h2>",
]);

?>
    <div class="object-form">
        <div id="formContent">
        <?
        yii\widgets\Pjax::begin(['id' => 'pjax-container', 'enablePushState' => false]);?>
            <?=$this->render('_view', ['model'=>$model, 'form'=>$form]);
        yii\widgets\Pjax::end();
        ?>
        </div>
    </div>
<?php
\yii\bootstrap\Modal::end();

<?= \yii\helpers\Html::button(
    'create',
    ['value' => \yii\helpers\Url::to(['create']),
        'id' => 'modalButton'
    ]) ?>

<script>
    $('#modalButton').click(function (){
        $('#objectModal').modal('show');
        $.pjax.reload('#pjax-container');
    });
</script>

//_view.php
<?
$widgetParams = [
    'model'=>$model,
    'type'=>'primary',
    'size'=>'md',
    'editableValueOptions'=>['class'=>'text-success']
];

echo \kartik\editable\Editable::widget(
    array_merge($widgetParams, [
        'attribute' => 'name',
        'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
        'pjaxContainerId'=>'pjax-container',
    ])
);
?>

But it will not work, if you don't initial editable-widget before.

index.php
<?php
echo \kartik\editable\Editable::widget(
    array_merge($widgetParams, [
        'name' => 'hidden',
        'inputType'=>\kartik\editable\Editable::INPUT_TEXT,
       'containerOptions'=>['style'=>'display:none'],
       'pjaxContainerId'=>'none'
    ])
);
// ...............
?>

[dub34]

thanks. This will help me