Yii2 Modal link not calling controller

Question

I am trying to open a Modal and load a view into it.

I can do this using JS but I am trying to accomplish this with a simpler method.

I am using BS4 with Yii2

My link:

<a data-toggle="modal" data-target="#modal-contact-us" href="<?= Url::to(['site/contact-us']) ?>">Contact Us</a>

My Modal:

Modal::begin(
        [
                'options' => [
                        'id' => 'modal-contact-us'
                ]
        ]
);
echo "<div id='modalContent'></div>";
Modal::end();

My Controller:(SiteController)

public function actionContactUs()
    {
        $model = new ContactUsForm();
        return $this->renderAjax('_contactUs');
    }

My View:(_contactUs)

<div class="row">
    <div class="col-12">
        <p>
            Ok It's working
        </p>
    </div>
</div>

As it is, it opens the Modal but does not load the view into it, which tells me at least the modal function is working.

When I remove the data-toggle in the link the view loads in a separate page so I know the controller is working on its own. When I remove the data-target nothing happens

I am not sure how to get the href to call the controller and the data attributes to work together.

I was basing my code and testing off of a previous post here: https://stackoverflow.com/a/40179072/9179908

Here is the rendered modal in the view where the link is located:

<div id="modal-contact-us" class="fade modal" role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="modal-contact-us-label">
   <div class="modal-dialog" role="document">
       <div class="modal-content">
           <div class="modal-header">
               <h5 id="modal-contact-us-label" class="modal-title">Contact US</h5>
               <button type="button" class="close" data-dismiss="modal">
                   <span aria-hidden="true">&times;</span>
               </button>
           </div>
           <div class="modal-body">
               <div id='modalContent'></div>
           </div>
       </div>
   </div>
</div>

Any point in the right direction would be appreciated. And again I can and have done this using JS as so:

<a href="<?= Url::to(['site/contact-us']) ?>" class='show_contact_us_modal'>Contact Us</a>
$(function(){
      $(document).on('click', '.show_contact_us_modal', function(){
          $('#modal_contact_us').modal('show')
              .find('#modalContent')
              .load($(this).attr('value'));
    });
});

Thanks

Answer 1

Modal widget doesn't load any content by it self. U can add event listener to preload content

<a data-toggle="modal" data-target="#modal-contact-us">Contact Us</a>

<?php
Modal::begin([
  'options' => [
    'id' => 'modal-contact-us'
  ]
]);
Modal::end();
?>

<script>
$('#modal-contact-us').on('show.bs.modal', function (e) {
  $('#modal-contact-us .modal-body').load('<?= Url::to(['site/contact-us']) ?>');
});
</script>