Yii2 Ajaxの後にリストビューのDataProviderを更新する

Question

Ajaxでフォームを送信すると、リストビューのDataProviderを更新することができません。私はajaxなしで提出するときに動作しているが、ページを更新する。私はページをリフレッシュせずにそれをしたいと思います。私はtは以下の私のコードで間違っている可能性が正確に何を知っているドン：

jobs.php

... 

<div style="background-color: white;"> 

<div class="job_quick_search_container"> 

    <?php $form = ActiveForm::begin([ 
     'id' => 'quick_search_form', 
     'enableAjaxValidation'=>false, 
     'enableClientValidation'=>true, 
     'options' => ['class' => 'form-horizontal', 
         'onkeypress'=>" if(event.keyCode == 13){ searchJob(); }" 
        ], 
    ]); ?> 

    <table style="width:100%"> 
     <colgroup> 
      <col style="width:20%"> 
      <col style="width:20%"> 
      <col style="width:20%"> 
      <col style="width:40%"> 
     </colgroup> 

     <tr>  
      <td style="padding-right: 50px;"> 
       <?= $form->field($jobCompanyCategorySearchModel, 'ccCategory')->dropDownList(ArrayHelper::map(Companycategory::find()->all(),'ccID', 'ccCategory'), ['prompt'=>'Select a category']) 
       ?>     
      </td> 

      <td style="padding-right: 50px;"> 
       <?= $form->field($jobUserSearchModel, 'uCountry')->dropDownList(ArrayHelper::map(User::find()->all(), 
                    'uCountry', 'uCountry'), 
                    ['prompt'=>'Select a country']) 
       ?> 
      </td> 

      <td style="padding-right: 50px;"> 
       <?= $form->field($jobUserSearchModel, 'uCompanyName')->dropDownList(ArrayHelper::map(User::find()->all(), 
                    'uCompanyName', 'uCompanyName'), 
                    ['prompt'=>'Select a company']) 
       ?> 
      </td> 

      <td> 


       <div class="form-group"> 
        <?= Html::Button('Find a job', ['class' => 'btn btn-primary', 
                'onclick' => 'searchJob();', 
                'style' => 'font-size:18px']) ?> 
       </div> 
      </td> 
     </tr> 

    </table> 

    <?php ActiveForm::end(); ?>  

</div> 


<table style="width:100%"> 
    <colgroup> 
     <col style="width:65%"> 
     <col style="width:35%"> 
    </colgroup> 

    <tr> 
     <td> 
      //This partial view contains the listview 
      <?= $this->render('jobs_partial_view', ['dataProvider'=> $dataProvider]); ?> 

     </td> 
    ... 

部分図：jobs_partial_view.phpここ

は、フォームとリストビューです

<?php 
    use yii\widgets\ListView; 
?> 

<div class="jobs_listView_container"> 

    <?= 
     ListView::widget([ 

      'dataProvider' => $dataProvider, 
      'options' => [ 
          'tag' => 'div', 
          'class' => 'list_jobs_profile', 
          'id' => 'list_jobs_profile', 
         ], 
      'layout' => "{items}\n{pager}", 

      'itemView' => function ($model, $key, $index, $widget) { 
       return $this->render('_job_view',['model' => $model]); 
      }, 

      'itemOptions' => [ 
       'tag' => false, 
      ], 

      'pager' => [ 
       'firstPageLabel' => 'first', 
       'lastPageLabel' => 'last', 
       'nextPageLabel' => 'next', 
       'prevPageLabel' => 'previous', 
       'maxButtonCount' => 3, 
      ], 

      'emptyText' => "Sorry, No jobs found", 

     ]); 
    ?> 

アヤックスてフォームを送信した後、私は、コントローラ内のデータを取得

public function actionJobs() 
{ 

     $jobCompanyCategorySearchModel = new JobCompanycategorySearch(); 
     $jobUserSearchModel = new JobUserSearch(); 

    if ( $jobUserSearchModel->load(Yii::$app->request->post()) && 
      $jobCompanyCategorySearchModel->load(Yii::$app->request->post())) { 


     $idCategorySearch = $jobCompanyCategorySearchModel->ccCategory; 
     $companyNameSearch = $jobUserSearchModel->uCompanyName; 
     $companyCountrySearch = $jobUserSearchModel->uCountry; 

     $dataProvider = new ActiveDataProvider([ 
       'query' => Jobs::find()->where(['jCategory' => $idCategorySearch]) 
             ->orderBy('jID DESC'), 
       'pagination' => ['pageSize' => 10,], 
      ]); 

     echo $this->renderPartial('jobs_partial_view', 
               ['jobCompanyCategorySearchModel' => $jobCompanyCategorySearchModel, 
               'jobUserSearchModel' => $jobUserSearchModel, 
               'dataProvider' => $dataProvider 
               ]); 
    } 

    else { 


     $dataProvider = new ActiveDataProvider([ 
      'query' => Jobs::find()->orderBy('jID DESC'), 
      'pagination' => ['pageSize' => 10,], 
     ]); 

    return $this->render('jobs', ['jobCompanyCategorySearchModel' => $jobCompanyCategorySearchModel, 
              'jobUserSearchModel' => $jobUserSearchModel, 
              'dataProvider' => $dataProvider 
              ]); 
    } 

     } 

、しかし：0 アヤックスを使用してjQueryの機能イストここ

：

function searchJob(){ 

var seach_data_job = $("#quick_search_form").serialize(); 

$.ajax({ 
    type: 'POST', 
    url: 'jobs', 
    data: seach_data_job, 
    dataType: 'html', 

    success: function(e) { 

    }, 

    /* 

    error: function(response, status){ 
     console.log(response); 
     console.log(status); 
    } 

    */ 
}); 

return false; 
} 

ここコントローラ funPion renderPartialは、新しいdataProviderでビューを更新していません。

Answer 1

最後に私は自分の問題の解決策を見つけましたが、それは次の読者に役立つ可能性があります。

dataproviderとajax submitですべてが完璧です。私は前に知らなかったどのようなことのdataProviderを更新し、機能れるrenderPartial（）を呼び出した後、

$dataProvider = new ActiveDataProvider([ 
      'query' => Jobs::find()->where(['jCategory' => $idCategorySearch]) 
            ->orderBy('jID DESC'), 
      'pagination' => ['pageSize' => 10,], 
     ]); 

    echo $this->renderPartial('jobs_partial_view', 
              ['jobCompanyCategorySearchModel' => $jobCompanyCategorySearchModel, 
              'jobUserSearchModel' => $jobUserSearchModel, 
              'dataProvider' => $dataProvider 
              ]); 

私はjQueryのを使用してのAjaxの応答に表示（新しいリストビュー）を得ることができるし、それをロードし、ということです古いリストビューのコンテナのHTMLコンテンツ：

function searchJob(){ 

var form = $("#quick_search_form"); 
var search_data_job = form.serialize(); 

var partialviewcontainer = $("#jobs_partial_view_container"); 

$.ajax({ 
    type: 'POST', 
    url: 'jobs', 
    data: search_data_job, 
    dataType: 'html', 

    success: function(newPartialView) { 
            partialviewcontainer.html(newPartialView); 
             }, 

}); 

return false; 

} 

私はリロードを滑らかにするためにフェードインとフェードアウト機能を追加しました。

partialviewcontainer.html(newPartialView); 

：から

$(partialviewcontainer).fadeOut(800, function(){ 
           partialviewcontainer.html(newPartialView).fadeIn().delay(2000); 
            } 
        ); 

はそれに役立つことを願っています。

私を助けようとしてくれた人に感謝します。

Answer 2

あなたのケースではPjaxを使用できます。だからあなたのfromは以下のようになります。

<?php \yii\widgets\Pjax::begin(['clientOptions' => ['method' => 'POST']]); ?> 

    <?php $form = ActiveForm::begin([ 
     'id' => 'quick_search_form', 
     'enableAjaxValidation'=>false, 
     'enableClientValidation'=>true, 
     'options' => ['class' => 'form-horizontal'] 
    ]); ?> 
     ....... 
     ....... 
     <!-- your form htmls will goes here --> 
     ....... 
     ....... 
    <?php \yii\widgets\ActiveForm::end(); ?> 
    <?= $this->render('jobs_partial_view', ['dataProvider'=> $dataProvider]); ?> 
<?php \yii\widgets\Pjax::end(); ?> 

注：あなたのフォームの送信のためのAjaxのコードを記述する必要はありません。 PjaxはすべてのAjaxの事例を扱います。また、コントローラの2つのアクション（actionJobs、actionJobsearch）を1つのアクションにマージする必要があります。だからactionJobsearchコーディングはactionJobsの中に来るでしょう。