Yii2 charger la vue dans modal à partir de ne fonctionne pas correctement

Question

Je suis en train de charger mon point de vue sous forme modale sur a tag click. Mais pour mon malheur, la forme modale reste vide. Je travaille sur le framework Yii2 MVC. Est-il possible de le faire de la façon dont je l'essaie ou je vais dans une rue sourde? Qu'est-ce que je l'ai écrit à ce jour est: Action de contrôleur:

public function actionInquiry(){ 
     $model = new Inquiry(); 
     $id = (int)$_GET['id']; 
     $product = Product::findOne($id); 

     return $this->render('inquiry', [ 
      'model' => $model, 
      'product' => $product 
     ]); 
    } 

Une partie de la première vue, où le bouton pour le formulaire modal est:

echo '<div class="col-sm-4"> 
                <div class="lineheight32"> 
                 <a class="btn-bg modalButton" href="/'.$lang->url.'/'.$inquiryPage->url.'?id='.$product->id.'">'.Yii::t('app', 'app.Make inquiry').'</a> 
                </div>'; 
                \yii\bootstrap\Modal::begin([ 
                  'id' => 'modal', 
                  'size' => 'modal-lg' 
                ]); 
                echo '<div id="modalContent>"></div>'; 
                \yii\bootstrap\Modal::end(); 
              echo '<div> 

Mon point de vue, ce qui suppose d'être chargé dans le fenêtre modale:

<?php 

use kartik\file\FileInput; 
use kartik\helpers\Html; 

?> 
<div id="inquiry-page"> 
    <div class="height50"></div> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-4"> 
       <div class="col-sm-12"> 
        <h2 class="text-center"><span class="inquiry-heading"><?= Yii::t('app', 'app.Inquiry') ?></span></h2> 
       </div> 
       <div class="col-sm-12 height50"></div> 
       <div class="col-sm-12 text-right"> 
        <img src="<?= $product->getProductImg() ?>" alt="<?= $product->title ?>"> 
       </div> 
      </div> 
      <div class="col-sm-8 grey-bg right-part-inquiry"> 
       <div class="col-sm-12"> 
        <div class="x-mark"> 
         <a href=""><img src="<?= Yii::$app->urlManagerFrontend->baseUrl ?>/images/delete-icon.png" alt="delete"></a> 
        </div> 
       </div> 
       <div class="col-sm-12 height50"></div> 
       <?php $form = \kartik\form\ActiveForm::begin([ 
         'method' => 'post', 
         'fieldConfig' => [ 
         ] 
       ]) ?> 

       <div class="row"> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'product_name')->textInput(['value' => $product->title ]) ?> 
        </div> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'country')->textInput() ?> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'name')->textInput() ?> 
        </div> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'city')->textInput() ?> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'surname')->textInput() ?> 
        </div> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'email')->textInput() ?> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'company')->textInput() ?> 
        </div> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'vat_number')->textInput() ?> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-6"> 
         <?= $form->field($model, 'phone')->textInput() ?> 
        </div> 
        <div class="col-sm-6"> 
         <div class="col-sm-6 padding0"> 
          <?php 
          echo $form->field($model, 'imageFiles[]')->widget(FileInput::classname(), [ 
           'options' => [ 
            'multiple' => false, 
            'disabled' => (Yii::$app->params['numberPubPhotos'] == 0) ? true : false, 
           ], 
           'pluginOptions' => [ 
            'allowedFileExtensions'=> Yii::$app->params['allowedProductFileExtensions'], 
            'maxFileCount' => Yii::$app->params['numberPubPhotos'], 
           ], 
          ]); 
          ?> 
         </div> 
         <div class="col-sm-6 padding0"></div> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="col-sm-12"> 
         <?= $form->field($model, 'message')->textarea(['rows' => 5]) ?> 
        </div> 
       </div> 

       <?php \kartik\form\ActiveForm::end() ?> 
      </div> 
     </div> 
    </div> 
</div> 

Et enfin mes js:

$(function() { 
     $('.modalButton').on('click', function() { 
      $.get($(this).attr('href'), function (data) { 
       $('#modal').modal('show').find('#modalContent').html(data); 
      });   
     }); 
    }); 

Answer 1

Vous choisissez correctement, mais je vous prorose, de faire quelques chage à refactoriser votre code selon les normes yii2:

1) La sont méthode spécifique som dans le contrôleur, à votre objectif: renderAjax(), vous action contrôleur sera:

public function actionInquiry(){ 
    //set response is json 
    Yii::$app->response->format = Response::FORMAT_JSON; 
    $model = new Inquiry(); 
    //use POST and default yii2 method for secure to get id 
    $id = Yii::$app->request->post('id'); 
    $product = Product::findOne($id); 
    //use renderAjax for transfer to view your modal 
    return $this->renderAjax('inquiry', [ 
     'model' => $model, 
     'product' => $product 
    ]); 
} 

2) Une partie de la première vue, lorsque le bouton correspondant à la forme modale sera:

echo '<div class="col-sm-4">'; 
     echo '<div class="lineheight32">' 
//Heare use yii\helpers\Html for best code style 
//And data attribute from HTML5 for save data 
echo Html::a(Yii::t('app', 'app.Make inquiry'), "javascript:void(0);", 
[ 
    'class' => "btn-bg modalButton", 
    "data-url" => "/$lang->url/$inquiryPage->url", 
    "data-product_id" => $product->id]); 
echo '</div>'; 
\yii\bootstrap\Modal::begin(['id' => 'modal','size' => 'modal-lg']); 
echo '<div id="modalContent>"></div>'; 
\yii\bootstrap\Modal::end(); 
echo '</div>'; 

3) vue modal sans modifications.

4) Et votre js sera:

$(function() { 
     $('.modalButton').on('click', function() { 
      $.ajax({ 
       type: "POST", 
       url: $(this).data('url'), 
       data: {'id': $(this).data('product_id')}, 
       success: function (data) { 
$('#modal').modal('show').find('#modalContent').html(data); 
       } 
      }); 
     }); 
    }); 

Answer 2

Il suffit de remplacer

 return $this->render('inquiry', [ 
      'model' => $model, 
      'product' => $product 
     ]); 

avec

 return $this->renderAjax('inquiry', [ 
      'model' => $model, 
      'product' => $product 
     ]);