Yii2 Ajax request in yii2

Question

By using kartik select2 plugins in Yii2, I try to make dependence dropdown for country and states.

Form field for country and states:

$url = yii\helpers\Url::toRoute('op-client/lists');

$this->registerJs($this->render('script.js'), \yii\web\VIEW::POS_READY);


$form->field($model, 'country_id')->widget(Select2::classname(), [
                                    'data' => $countryData,
                                    'language' => 'en',
                                    'options' => ['placeholder' => 'Select'],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                    ],
                                    'pluginEvents' =>
                                    [
                                        'change' => 'function() 
                                          { 
                                              getstate
                                              (
                                                $("#select2-opclient-country_id-container").val(),
                                                 "'.$url.'"
                                              )
                                          }',
                                    ],
                                ]).'


                                $form->field($model, 'states_id')->widget(Select2::classname(), [
                                    'data' => $statesData,
                                    'language' => 'en',
                                    'options' => ['placeholder' => 'Select'],
                                    'pluginOptions' => [
                                        'allowClear' => true,
                                    ],

                                ]).'

Script.js

function getstate($countryid,url)
{
    //console.log(startdate + enddate);
 var csrfToken = $('meta[name="csrf-token"]').attr("content");

    $.ajax({
        type:"POST",
        cache:false,
        url:url,
        data:{countryid:countryid, _crsf:csrfToken},
        success:function(data){
            $("#select2-opclient-states_id-container").val(data);
        },
    })
}

Controller:

public function actionLists()
    {
        $request = Yii::$app->request;

        $country = $request->post('countryid');

        $countStates = OpStates::find()
                        ->where(['country_id' => $country])
                        ->count();

        $states = OpStates::find()
                        ->where(['country_id' =>$country])
                        ->all();

        if($countStates > 0)
        {
            foreach($states as $state){
                echo "<option value='".$state->id."'>".$state->state_name."</option>";
            }
        }
        else
        {
            echo "<option></option>";
        }
    } 

When I run the program, it show error "Uncaught ReferenceError: countryid is not defined" . But I thought i passed the countryid into it already? Where have I done wrong?

Any help/advice will be appreciated. Thankss

Answer 1

Please check below code,i think you did little mistake in country_id variable name.

public function actionLists()
    {
        $request = Yii::$app->request;

        $country = $request->post('country_id');

        $countStates = OpStates::find()
                        ->where(['country_id' => $country])
                        ->count();

        $states = OpStates::find()
                        ->where(['country_id' =>$country])
                        ->all();

        if($countStates > 0)
        {
            foreach($states as $state){
                echo "<option value='".$state->id."'>".$state->state_name."</option>";
            }
        }
        else
        {
            echo "<option></option>";
        }
    } 

and here

function getstate(countryid,url)
{
    //console.log(startdate + enddate);
 var csrfToken = $('meta[name="csrf-token"]').attr("content");

    $.ajax({
        type:"POST",
        cache:false,
        url:url,
        data:{countryid:countryid, _crsf:csrfToken},
        success:function(data){
            $("#select2-opclient-states_id-container").val(data);
        },
    })
}

It will solve your issue.