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 }} <a href="{{ route('auth.task', $task->id) }}"><div class="inline-block text-blue-600 underline text-sm">Se hele opgaven</div></a> </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>
Advertisement
Answer
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.