Question

Jquery技术的新手，寻找了一种解决方案，该解决方案是在将新记录添加到数据库后如何使用ajax重新加载DIV容器。就像实时聊天一样。请问是否有人知道该怎么做，请给我一个有关如何解决这个问题的指南Yii2。

这是我的控制器代码

 public function actionMessage($id){

        if(!Yii::$app->getUser()->isGuest){

          // THIS IS INSTANCE OF CHAT FORM
          $model = new Message();
            if($model->load(Yii::$app->request->post())){

             $model->updated_date = date ('Y-m-d H:i:s');
             $model->user_id = Yii::$app->user->identity->id;
            //THIS REGISTER MESSAGE COUNT IN DB
             Message::register_changes();
             $model->to = $id;
             $model->save(); 
             return $this->refresh();
            }

         // THIS LOAD THE MODEL OF THE USER
         $models = $this->findModels($id);
        // THIS QUERY THE CHAT MESSAGE FROM THE DB
         $send = new ActiveDataProvider([
            'query' => Message::find()->
                orderBy('updated_date ASC'),
            'pagination' => [
                'pageSize' => 1000000000000,
            ],
        ]);



        // THE IS INSTANT OF USER SEARCH FORM
        $searchModel = new UserlistSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
        return $this->render('chating', [
            'models' => $models,
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'send' => $send,

            'model'=>$model,

        ]);

    }else{
        return $this->redirect(['site/login']);
    }
}

这是我的查看代码

<div class="chatbox">             
<div id="chat-board">
<ul>
    <?= ListView::widget([
    'dataProvider' => $send,
    'summary'=>'',
    'itemOptions' => ['class'=>'item'],
    'itemView' =>'_message',
    ]);?>
</ul>
</div>


    <?php $form = ActiveForm::begin(['id' => $model->formName(),'enableAjaxValidation' => true]); ?>
     <?= $form->field($model, 'message')->textInput(['maxlength' => true, 'placeholder'=> 'Type a message'])->label(false) ?>
    <?= Html::submitButton(Yii::t('app', 'Send'), ['class' => 'btn-send']) ?>
   <?php ActiveForm::end(); ?>
</div>

这是我的Javerscript代码

 <script>
            /* AJAX request to checking for new record */
            function checking(){
                $.ajax({
                    type: 'POST',
                    url: '<?=Url::to(['ichat/chating', 'id'=>Yii::$app->request->get('id')])?>',
                    dataType: 'json',
                    data: {
                        counter:$('#chat-board').data('counter')
                    }
                }).done(function( response ) {
                    /* update counter */
                    $('#chat-board').data('counter',response.current);
                    /* check if with response we got a new update */
                    if(response.update==true){
                        $('#chat-board').html(response.message);
                    }
                });
            }
            //Every 20 sec check if there is new update
            setInterval(checking,20000);
        </script>

将新记录添加到数据库后，如何使用Jquery重新加载div内容？

0 个答案: