CODEWITHSUNDEEP
jqueryyii2
fortm
fortm

Reputation: 4198

synchronous ajax error with yii2 activeform

The below view is rendered by ajax and returned from controller to JS which puts view inside correct container :

$page =  $this->renderAjax("view", [
                                "dataProvider" => $dataProvider
                     ]) ;
        Yii::$app->response->format = 'json';
        return array("error"=>false,"page"=>$page);

View :

<?= 
    ListView::widget([
        'id'=>'dataListId',
        'dataProvider' => $dataProvider,
        'itemOptions' => ['class' => 'item'],
        'itemView' => '_dataItemView',
        'summary'=>'',
        'emptyText'=>$emptyPage         
    ]) 
?>


<?=
         $this->render("_activeFormPage")
?>

messages?id=1:950 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

But this gives above error in chrome for synchronous XMLhttprequest on full refresh where I simulate ajax by trigger click on button which does ajax and gets above data. As soon as line to render _activeFormPage is commented, error goes away.

How can we get rid of synchronous ajax error since in javascript async has been left to default while making ajax calls from jquery

Upvotes: 3

Views: 804

Answers (1)

fortm
fortm

Reputation: 4198

After some debugging found solution , will post here for rest of yii2 folks ->

This is due to <script> tags coming in controller's output i.e HTML to ajax success callback which uses it for updating dom using jquery .html

We need to prefetch these javascript so that yii2 does not have to include a new script tag lazily on renderAjax, since it is already there. So in depends of AppAsset file, I specifically added imports to ActiveFormAsset and ValidationAsset which were culprit in my case

public $depends = [
        'yii\web\YiiAsset',
        'yii\widgets\ActiveFormAsset',
        'yii\validators\ValidationAsset',   
        'yii\grid\GridViewAsset',
        'yii\bootstrap\BootstrapPluginAsset',
        '\odaialali\yii2toastr\ToastrAsset' 
    ];

Upvotes: 6

Related Questions