https://prnt.sc/hzzBAhhL2uCh Burada images kısmı mevcut göndermeden önce mevcut fakat html tarafına response edince o images kısmı yok oluyor
https://prnt.sc/hcmLGz0Rbusu tam bu şekilde görünüyor.
Kodlarım şu şekilde
public function loadMoreReports(Request $request)
{
$page = $request->get('page');
$perPage = 6;
$reports = ManagementReport::where('reports_status', 'published')
->skip(($page - 1) * $perPage)
->take($perPage)
->get();
$reportsWithImages = $reports->map(function ($report) {
$images = Media::where('model_type', 'App\Models\ManagementReport')
->where('model_id', $report->id)
->where('mime_type', 'like', 'image%')
->get();
$slug = Str::slug($report->reports_name);
return [
'report' => $report,
'images' => $images,
];
});
return response()->json([
'data' => $reportsWithImages,
'has_more_pages' => $reports->count() === $perPage,
]);
}
Script kısmı
<script>
var currentPage = 1;
var loading = false;
function loadMoreReports() {
var url = "{{ route('loadMoreReports') }}";
$.ajax({
url: url,
type: "GET",
data: {page: currentPage + 1},
beforeSend: function() {
$('#loadingIndicator').show();
loading = true;
},
success: function(response) {
console.log(response)
var reportsWithImages = response.data;
var hasMorePages = response.has_more_pages;
if (reportsWithImages.length > 0) {
var html = '';
console.log(reportsWithImages)
$.each(reportsWithImages, function(index, item) {
html += '<div class="col-lg-3 col-md-6 col-sm-12">';
html += '<a href="{{ route('reportName', ['slug' => 'slug_placeholder', 'id' => 'id_placeholder']) }}'
.replace('slug_placeholder', item.report.slug)
.replace('id_placeholder', item.report.id)
+ '" class="report-item transition-hover-top report-icon">';
// Rapor içeriği ve resimleri buraya eklenecek
$.each(item.images, function(imageIndex, image) {
console.log(image.getUrl())
html += '<div class="img">';
html += '<img class="lazyload" data-src="' + image.getUrl() + '" alt="' + item.report.reports_name + '" title="' + item.report.reports_name + '" width="260" height="367">';
html += '</div>';
});
html += '<h3>' + item.report.reports_name + '</h3>';
html += '<span title="Read the Report" class="read-more">';
html += '<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 30 30">';
// Read the Report icon SVG içeriği
html += '</svg>';
html += 'Read the Report';
html += '</span>';
html += '</a>';
html += '</div>';
});
$('#reportList').append(html);
// lazyload için etkinleştirme
$('.lazyload').lazyload();
currentPage++;
}
$('#loadingIndicator').hide();
loading = false;
if (!hasMorePages) {
$(window).off('scroll', onScroll);
}
},
error: function() {
$('#loadingIndicator').hide();
loading = false;
}
});
}
function onScroll() {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !loading) {
loadMoreReports();
}
}
$(document).ready(function() {
// lazyload için etkinleştirme
$('.lazyload').lazyload();
$(window).on('scroll', onScroll);
});
</script>