Root Cause: Your current get_comments_ajax() method ends with:
echo json_encode([ 'html' => $content, 'page' => $page_number, 'more_comments_to_display' => $more_comments_to_display, 'article_id' => $article_id ]); exit();
This “works”, but only if absolutely no output (spaces, BOM, debug lines, notices) happens before or after the method. Laravel, however, buffers responses, and using echo/exit() bypasses its response system — that’s dangerous.
So what’s happening is:
Laravel may prepend/append output buffering characters,
or a stray newline / space / UTF-8 BOM breaks JSON,
so your JS sees:
SyntaxError: Unexpected end of JSON input
Correct Laravel Way Replace your last part with a proper JSON response using Laravel’s response()->json().
Fixed get_comments_ajax(): `public function get_comments_ajax(Request $request) { if (!$request->ajax()) { abort(400, 'Invalid request'); }
$article_id = $request->post('article_id');
$page_number = $request->post('page');
$offset = $this->comments_per_page * $page_number;
$more_comments_to_display = true;
$data['comments'] = $this->get_commentQuery($article_id, $this->comments_per_page, $offset)
->whereNull('parent_id')
->with(['user', 'replies.user'])
->get();
$content = '';
if ($data['comments']->count()) {
$content .= view(
'themes/' . $this->theme_directory . '/partials/comments-list',
array_merge($data, [
'is_infinitescroll' => $this->is_infinitescroll,
'theme_directory' => $this->theme_directory,
'article_id' => $article_id
])
)->render();
} else {
$more_comments_to_display = false;
}
return response()->json([
'html' => $content,
'page' => $page_number,
'more_comments_to_display' => $more_comments_to_display,
'article_id' => $article_id
]);
}`
Key changes:
->render() on the Blade view ensures you get a string (not a View object).
response()->json() sends correct headers (Content-Type: application/json).
Removed echo and exit() (not recommended in Laravel).
Handles invalid requests gracefully.
Why Your JS Failed
When fetch() tried to run:
const text = await response.text(); data = JSON.parse(text);
the variable text was empty or broken because Laravel’s output was not pure JSON.
Hence → Unexpected end of JSON input.
Optional improvement (JS side) Since the response is guaranteed JSON, simplify your code:
const response = await fetch(${window.location.origin}/load_comments`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': csrfToken
},
body: JSON.stringify({ article_id: articleId, page })
});
const data = await response.json();
if (data.html) { const lastCommentCard = getLastCommentCard(); lastCommentCard.insertAdjacentHTML('afterend', data.html); currentPage++; moreComments = data.more_comments_to_display; } else { moreComments = false; }` Now your JSON parsing is clean, and you’ll never hit that error again.
@muhalifanhar I agree, but unfortuuinsnatelly, changing the contoller ruins aother theme (called Calvin), that currenlly works. You can try your idea out an make a pull euest if all is well. :)
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.