How to load content on click in yii2 framework? - php

Question

I'm working on yii2 project and we need to load blocks with ajax on click.
I wrote ajax part that works correctly but im stuck with javascript. My mentor says I should use .append but I cant find way to link it somehow with controller action.
php:
public function actionGetProjects() {
$post = Yii::$app->request->post();
$projects = Project::find()->orderBy('created_at DESC')->limit(15)->offset($post['page']*15)->all();
if (count($projects)>0) {
$this->return['code'] = 200;
$this->return['html'] = $this->renderPartial('_projects', [
'projects' => $projects
]);
} else {
$this->return['code'] = 404;
}
return json_encode($this->return);
}
UPD:
HTML
<div class="projects">
<div class="pageHeader">My Projects</div>
<?php foreach ($projects as $project) {?>
<a href="project/<?=$project->id?>" class="project-block">
<img src="<?=$project->projectImages[0] ? '/img/products/'.$project->projectImages[0]->image:''?>">
<div class="project-title"><?=$project->name?></div>
<div class="project-address"><?=$project->address?></div>
<div class="project-readmore">Read more</div>
</a>
<?php } ?>
<a class="projects-load-btn" href="#">Еще</a>
</div>
New JS:
$(".projects-load-btn").on("click", function(e) {
event.preventDefault();
var id = $(this).data("id") || 0;
$.ajax({
type: 'POST',
url: '/ajax/get-projects',
data: { id: id },
dataType: "json",
success: function (data) {
if(data.code == 200){
$('.projects').addClass('test');
$('.projects').html('');
$('.projects').append(data);
}
},
errors: function (errors) {
console.log(errors);
}
});
});

Answer 1

Do you have urlManager component configured with enablePrettyUrl set to true in your config file?
If so, yii2 uses the following default routing template: <controller>/<action>
In you case this would result in /ajax/get-projects url.
The complete JavaScript code would look something like this:
$(".projects-load-btn").on("click", function(e) {
e.preventDefault();
var id = $(this).data("id");
$.ajax({
url: "/ajax/get-projects",
data: { id: id }
}).done(function (data) {
$(".projects").append(data);
});
});

Answer 2

If I remember correctly you should not send the action as a variable through POST.
It depends on how routing was set in your Yii2 app, thus I'm only guessing:
An ajax call:
$.post("Ajax/getProjects", {id:id}, function(data) { ... });
Appending something in DOM:
$(".projects").append(jsonResponse.html);
Guessing this is school work, thus not giving the whole solution...