Yii2 render view displays HTML code as text

Question

I have a problem in rendering a view in Yii2 that has been troubling me for a couple of days.The rendering was working just fine until one morning it decided not to work. The view displays raw HTML code instead of the user interface.

Here is the code for my controller that renders the view

if ($fails == TRUE)
{
    Yii::$app->session->setFlash('error', 'The following records failed validation, kindly update and submit');
    return $this->render('failedvalidation',['fails' => $fails,]);
} else {
    Yii::$app->session->setFlash('success', 'File uploaded successfully,waiting approval');
    return $this->redirect(Yii::$app->request->referrer);
}

Below is the code for my view file(failedvalidation.php)

<?php
use yii\helpers\Html;
use yii\bootstrap\Modal;
use yii\helpers\Url;
?>
<div class="bulkpayments-view">
<div class="box box-default">
    <div class="table-responsive">
        <table class="display nowrap" id="example1">
            <thead>
            <tr>
                <th>Ref No</th>
                <th>Full Names</th>
                <th>Id No</th>
                <th>Credit Account</th>
                <th>Amount</th>
                <th>Narration</th>
                <th>Action</th>
            </tr>
            </thead>
            <tbody>
            <?php foreach($fails as $data) {?>
                <tr class="gradeX">
                    <td><?= $data['BENEFICIARYREFNO'];?></td>
                    <td><?= $data['BENEFICIARYFULLNAMES'];?></td>
                    <td><?= $data['IDNO'];?></td>
                    <td><?= $data['TOACCOUNT'];?></td>
                    <td><?= $data['AMOUNT'];?></td>
                    <td><?= $data['NARRATION'];?></td>
                    <td><?= Html::button('<i class="fa fa-pencil"></i> 
    Update', ['value' => Url::to(['update-failed-validation', 'id' => 
    $data['ID'],'transid' => $data['TRANSACTIONID']]), 'class' => 'button btn 
     btn-primary btn-xs']) ?></td>

                </tr>
            <?php }?>
            </tbody>
        </table>
    </div>
</div>
</div>
<?php
Modal::begin([
'header' => '<h4>Update Record</h4>',
'id' => 'modal',
'size' => 'modal-lg',
'clientOptions' => ['backdrop' => 'static', 'keyboard' => false],
]);
  echo '<div id="content"></div>';
 Modal::end();
 ?>

<?php
$js = <<<JS
$('.button').click(function() {
if($('#modal').data('shown.bs.modal')) {
    $('#modal').find('#content')
        .html('<i class="fa fa-spinner fa-pulse fa-2x"></i>')
        .load($(this).attr('value'));
} 
else {
    $('#modal').modal('show')
        .find('#content')
        .html('<i class="fa fa-spinner fa-pulse fa-2x"></i>')
        .load($(this).attr('value'));
}
});
JS;
$this->registerJs($js);
?>
<?php
$script = <<< JS
$(function () { 
    $('#example1').DataTable( {
      dom: 'Bfrtip',
        buttons: [
        {
            //extend: 'excel',
            exportOptions: {
                orthogonal: 'sort'
            }
        }        
        ],
        columnDefs: [{
           targets:[0,1,2],
           render: function(data, type, row, meta){
              if(type === 'sort'){
                 //data = ' ' + data ;
                  return "\u200C" + data ; 
              }

              return data ;   

           }
        }]

} );
});
JS;
$this->registerJs($script);
?>
<style>
.box{
    padding:30px;
}
</style>

Screenshot of my view on browser and the raw HTML it displays:

Answer 1

Use "JSON.parse(data);" in your JS code.

Answer 2

Hi I had a similar situation and struggled for a few days. Finally I found that in one of my functions had this statement \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON; So I had disabled this statement. It worked but I need to find a better solution. Hope this help