How to display another page inside the block without reloading?

Question

JavaScript

I have a problem here in such a block
When the user clicks on the "edit" button, then this block should change to another without reloading the page.
Used like this

<div class="view-zakaz" style="color: black">
<?= Html::button('Редактировать', ['id' => 'edit']) ?>
</div>

And in js I did like this

$(document).ready(function(){
$('#edit').on('click', function(){
    $.ajax({
      url: 'zakazedit.html',
      success: function(html){
        $('.view-zakaz').html(html);
      }
    })
  });
});

I also tried php, create the same file _zakazedit.php.
But nothing happens either, the error Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

You are accessing a non-existent page - and this is not surprising. You must create a method in some controller that will use renderPartial or renderAjax to render your block. In Ajax, respectively, you must specify a link to this method

Answer 2

1. You can use PJAX www.yiiframework.com/doc-2.0/yii-widgets-pjax.html
2. Why so much js code, it's easier like this:

<div class="view-zakaz" style="color: black">
<?= Html::a('Редактировать', ['/some-controller/edit-action','id' => $model->id]) ?>
</div>

$('#edit').on('click', function(e){
e.preventDefault(); //отменяем стандартный get для ссылки
var url = $(this).attr('href'); // берем адрес ссылки
$('.view-zakaz').load(url); //отправляем get ajax на адрес ссылки, полученный ответ засовываем в нужный контейнер

In total, the button contains the URL where to take the form, js cancels the transition (standard action) and loads with ajax what the action sent to the block with the view-zakaz class