Как без перезагрузки вывести внутри блока другую страницу?

Question

[hollanditkzn]

У меня возникла проблема вот в такой блок
Когда пользователь нажимает на кнопку "редактирование" то должно данный блок должен смениться на другой без перезагрузки страницы.
Использовал вот так примерно

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

И в js я сделал так

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

пробовал и php, такой же создать файл _zakazedit.php.
Но тоже ничего не получается выходит ошибка Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

[Максим Федоров]

Вы обращаетесь к несуществующей странице - и это не удивительно. Вы должны создать метод в каком-нибудь контроллере, который будет с помощью renderPartial или renderAjax осуществлять отрисовку Вашего блока. В Ajax соответственно необходимо указывать ссылку на этот метод

Comments

[hollanditkzn]

Максим Федоров Вопрос такой, как понимаю это я делаю не в js файле, а на той странице где находится данная таблица?В контроллере я прописал

public function actionZakazedit($id){
        return $this->renderAjax('_zakazedit', ['model' => $model]);
    }

А в самой view прописал

<?php $this->registerJs('$("#edit").on("click", function(){
        $.ajax({
            url: 'Url::toRouter(["zakaz/zakazedit", "id" => "$model->id_zakaz"])',
            success: function(html){
                $(".view-zakaz").html(html);
            }
        })
    });') ?>

Или как-то не так я понял?

[Максим Федоров]

hollanditkzn: да Вы правильно поняли. Только не понятно в текущем коде откуда берется $model и в JS Вы не верно конкатенацию делаете

[hollanditkzn]

Максим Федоров: Я просто забыл вот эту строку в контроллере. А на счет js я пока не пойму, а как нужно склеивать url?

[Максим Федоров]

просто точки добавить между текстом и пхп-кодом

$this->registerJs('$("#edit").on("click", function(){
        $.ajax({
            url: '.Url::toRouter(["zakaz/zakazedit", "id" => "$model->id_zakaz"]).',
            success: function(html){
                $(".view-zakaz").html(html);
            }
        })
    });')

[hollanditkzn]

Максим Федоров: У меня там проблема возникает 400

url: "'.Url::toRoute(['zakaz/zakazedit', 'id' => $model->id_zakaz]).'",

А если так то выходит 500 ошибка

url: "'.Url::toRoute(['zakaz/zakazedit', 'id' => '38']).'",

Как решать данные ошибки. Я попробовал прогуглить, ничего толкового не нашел

[Максим Федоров]

hollanditkzn: 400 ошибка - не верный запрос, в Вашем случае скорее всего $model->id_zakaz имеет пустое значение
500 ошибка - внутренняя ошибка сервера. Из-за чего она произошла нужно смотреть в логе yii

[hollanditkzn]

Максим Федоров:

400 ошибка - не верный запрос, в Вашем случае скорее всего $model->id_zakaz имеет пустое значение

Да есть такое
Все я понял, использовал плагин в sublime указал не ту папке и соответсвенно не работало. Пока что у меня одна проблема с id как его взять если это я в ajax делаю Или этот код написать в grid завернуть во функцию?

[Максим Федоров]

hollanditkzn: где-то в гриде указывать ID а потом JS-скриптом его вытягивать

[hollanditkzn]

Максим Федоров: Я немного не пойму как из php можно получить js переменную в данном случае. Я делаю так

<?php $this->registerJs('$("#edit").on("click", function(){
           var key = $(this).data("key");
           console.log(key);
        $.ajax({
            url: "'.Url::toRoute(['zakaz/zakazedit', 'id' => '+key+']).'",
            success: function(html){
                $(".view-zakaz").html(html);
            }
        })
    });') ?>

А в гриде

'contentOptions' => function($model, $key, $index, $grid){
                    return ['id' => $model->id_zakaz, 'class' => 'border-left', 'style' => 'border:none'];
                },

То есть в консоле я получаю значение но передать в грид пока что не получается. Не могу догадаться как это сделать

[hollanditkzn]

Максим Федоров: Если только не так написать

url: "http://crm/frontend/web/zakaz/zakazedit?id="+key

То получается

[Максим Федоров]

hollanditkzn:

Я немного не пойму как из php можно получить js переменную в данном случае

никак. То что Вы пытаетесь сделать - невозможно. Нужно писать что-то в таком стиле
url: "'.Url::toRoute(['zakaz/zakazedit']).'?id=key"

Answer 2

[Максим Тимофеев]

1. Можно юзать PJAX www.yiiframework.com/doc-2.0/yii-widgets-pjax.html
2. Зачем столько js кода, проще так:

<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 на адрес ссылки, полученный ответ засовываем в нужный контейнер

Итого кнопка содержит урл где брать форму, js отменяет переход (стандартное действие) и загружает ajax-ом то что отдал экшен в блок с классом view-zakaz

Comments

[hollanditkzn]

Так у меня не получилось

[hollanditkzn]

Проще все ajax вывести. Там еще якоря стоят и скорее всего может из-за этого не работают

[hollanditkzn]

А на счет pjax то у меня и так стоит pjax. Слишком муторно сейчас менять, предыдущий пример больше подашел