Laravel ajax passing data to php - php

Question

I have a special problem.
I am making an Ajax request to get data from the db without updating.
The response I get should be outputted in a advanced way like this:
#foreach ($tasks as $task)
<div class="pr-1">
<div onclick="openComponent('modal-task', {{ $task->id }});setGlobalIndex({{ $task->id }});" title="{{ $task->title }}" class="calendar-task hover:opacity-75 cursor-pointer" style="background-color: #{{ $task->color }};">#{{ $task->id }} {{ ucfirst(substr($task->title, 0, 23)) }}</div>
</div>
<div id="modal-task_{{ $task->id }}" class="hidden">
<div class="display">
<div class="top">
<div class="title">Opgave #{{ $task->id }} <div class="inline-block text-blue-600 underline text-sm">Se hele opgaven</div>
</div>
<div onclick="closeComponent('modal-task', {{ $task->id }})" class="close-button"><i class="fas fa-times-circle text-gray-700"></i>
</div>
</div>
#include('component.task')
</div>
#endforeach
Right now I get the correct response from the Ajax request.
color: "e53e3e"
company_id: 1
created_date: "2020-11-13"
created_time: "00:00:00"
description: null
id: 8
status_1: null
status_2: null
status_3: null
title: "Overskrift"
But how do I output it like that, with the include also and it should appear many times (its a calendar system that gets tasks from each days)
The Ajax request POST 2 dates (from and to) till a laravel controller which returns the tasks that have the date in between.
<script>
var datePeriodRow = "<?php echo $datePeriodRow; ?>";
var _token = $('input[name=_token]').val();
$.ajax({
url: "/task/get",
type:"POST",
data:{
datePeriodRow:datePeriodRow,
_token: _token
},
success:function(response){
if(response) {
console.log(response);
}
},
});
</script>

Answer 1

What you can do in your "/task/get" endpoint method is to return a view that returns a rendered html. then set the rendered response with javascript in a div element instead of that foreach loop.
So place the foreach code part in an include/partial like partial/tasks.blade.php and in your endpoint method:
/** route: /task/get **/
public function yourTasksMethod(){
//your code that retrieves your tasks
return view('partial.tasks')->with('tasks', $tasks)->render();
}
Keep in mind to clear/empty the div before you make another request to the task/get endpoint.