Unable to send ajax response to the controller in yii2

Question

I have a view in which I have a detailview and a gridview. In my gridview I have a checkbox. And on clicking on any check box I am able to get the id of the column(s) selected. Below is my view

//my DetailView
?= GridView::widget([
         'dataProvider' => $dataProvider,
          /*'filterModel' => $searchModel,*/

          'columns' => [

         ['class' => 'yii\grid\CheckboxColumn', 'checkboxOptions' => function($d) {
             return ['value' => $d['meter_id']];
         }],

         'Meter_Serial_Number',
         'Issued_To',
         'Store',
       ],
]); ?>
<a href="<?= URL::toRoute(['ogpheader/viewsetpdf', 'id'=>$model->id])?>" name="redirect" class="btn btn-primary" id="myid">Set PDF</a>

UI

Note:

The detail view is coming from the model and gridview is generated from query to view and then select the data.

Now I have placed an ajax call that will send the data to the controller.

<?php
$url = Url::toRoute(['/ogpheader/viewsetpdf']);
$script = <<< JS
$(document).ready(function () {      

$('#myid').click(function() {
 var strValue = "";

    $('input[name="selection[]"]:checked').each(function() {

    if(strValue!="")
        {
        strValue = strValue + " , " + this.value;

        }
    else 
        strValue = this.value;     

});
$.ajax({
     url: '$url',
     data: {
           data: strValue,              
     },
     type: 'post',
     dataType: 'json',
     success: function(data) {
        alert(data);
     },
  });
 }) 
});


JS;
$this->registerJs($script, static::POS_END);
?>

Action Controller

 public function actionViewsetpdf($id)
{
    $model = $this->findModel($id);
    print_r($model);
    $data = "";
    if(isset($_POST['data']))
    {
        $data = json_decode($_POST['data']);
        print_r($data);
    }
    else{
        echo 'no data';
    }
    exit();

}

The $id is the id of the model i.e. the id of my detail view. I want to pass both my detail view and grid view selected items to process things forward.

Now when i click on Set PDF button I got the following result

In output image I am getting the details of my model i.e. my detail view items but for my selected grid view items I am getting no data. I have searched for it but unable to find the solution that helps me

Update 1

Changed my JS and ajax call

$('#myid').on('click',function(e) {
e.preventDefault();    
 var strValue = "";        
    $('input[name="selection[]"]:checked').each(function() {

    if(strValue!="")
        {
        strValue = strValue + " , " + this.value;

        }
    else 
        strValue = this.value;     

});
   // alert(strValue);
  $.ajax({
     url: '$url',
     type: 'POST',
     dataType: 'json',
     data: 'data='+ strValue,         
     success: function(data) {
        alert(data);
      },
    });
   }) 
  });

The output in my Xhr I am getting is

common\models\Ogpheader Object( [_attributes:yii\db\BaseActiveRecord:private] => Array ( [id] => 54 [created_by] => 12 [created_at] => 2017-11-13 05:26:04 [updated_at] => [canceled_at] => [store_id] => 10 [status] => Prepared [issuer] => 88 [admin_incharge] => Faisal [project_manager] => Ali ) [_oldAttributes:yii\db\BaseActiveRecord:private] => Array ( [id] => 54 [created_by] => 12 [created_at] => 2017-11-13 05:26:04 [updated_at] => [canceled_at] => [store_id] => 10 [status] => Prepared [issuer] => 88 [admin_incharge] => Faisal [project_manager] => Ali ) [_related:yii\db\BaseActiveRecord:private] => Array ( ) [_errors:yii\base\Model:private] => [_validators:yii\base\Model:private] => [_scenario:yii\base\Model:private] => default [_events:yii\base\Component:private] => Array ( ) [_behaviors:yii\base\Component:private] => Array ( ))array(1) { ["data"]=> string(26) "99 , 100 , 101 , 102 , 103"}

But when I remove the e.preventDefault() then the page is redirected to the another view and the response i get is

common\models\Ogpheader Object( [_attributes:yii\db\BaseActiveRecord:private] => Array ( [id] => 54 [created_by] => 12 [created_at] => 2017-11-13 05:26:04 [updated_at] => [canceled_at] => [store_id] => 10 [status] => Prepared [issuer] => 88 [admin_incharge] => Faisal [project_manager] => Ali ) [_oldAttributes:yii\db\BaseActiveRecord:private] => Array ( [id] => 54 [created_by] => 12 [created_at] => 2017-11-13 05:26:04 [updated_at] => [canceled_at] => [store_id] => 10 [status] => Prepared [issuer] => 88 [admin_incharge] => Faisal [project_manager] => Ali ) [_related:yii\db\BaseActiveRecord:private] => Array ( ) [_errors:yii\base\Model:private] => [_validators:yii\base\Model:private] => [_scenario:yii\base\Model:private] => default [_events:yii\base\Component:private] => Array ( ) [_behaviors:yii\base\Component:private] => Array ( )) no data

Any help would be highly appreciated.

Answer 1

I think $url is not available into js code, for example you can get the url via jquery when you click on #myid link like this way :

var url;
$('#myid').click(function() {
 var strValue = "";
   url = $(this).attr("href");
    $('input[name="selection[]"]:checked').each(function() {

    if(strValue!="")
        {
        strValue = strValue + " , " + this.value;

        }
    else 
        strValue = this.value;

   $.ajax({
     url: url,
     data: {
           data: strValue,              
     },
     type: 'post',
     dataType: 'json',
     success: function(data) {
        alert(data);
     },
  });
 });

Answer 2

you should avoid the quote aroun php var

$.ajax({
    url: $url,
    .....