im trying to take 3 most viewed post but its just getting only two I don't know why I have tried limit () method it's not showing anything what am I doing wrong here ,
<?php
namespace App\Http\Livewire;
use App\Models\Movie;
use Livewire\Component;
class MovieBox extends Component
{
public function render()
{
return view('livewire.movie-box',[
'movies' => Movie::withCount('read_count')->orderBy('reads', 'desc')->take(3)->get(),
]);
}
}
movie box
<div>
<div class="relative grid grid-cols-3 gap-2 mt-3 user_story md:grid-cols-5">
#foreach ( $movies as $movie )
<a href="#create-post" uk-toggle="target: body ; cls: story-">
<div class="single_story">
<img src="assets/images/avatars/avatar-lg-1.jpg" alt="">
<div class="story-avatar"> <img src="assets/images/avatars/avatar-1.jpg" alt=""></div>
<div class="story-content">
<h4> {{ $movie->title }}</h4>
</div>
</div>
</a>
#endforeach
<span
class="absolute z-10 items-center justify-center hidden p-2 -mr-4 text-xl bg-white rounded-full shadow-md lg:flex w-9 uk-position-center-right"
uk-toggle="target: body ; cls: story-">
<i class="icon-feather-chevron-right"></i></span>
</div>
Change your render method like this.
public function render()
{
return view('livewire.movie-box',[
'movies' => Movie::withCount('read_count')->orderBy('reads', 'desc')->limit(3)->get(),
]);
}
Related
when i run laravel project on my computer after doing php artisan serve as soon as it login it shows error "Attempt to read property "menus" on null"
Please help me
#foreach ($specials->menus as $menu)
<div class="max-w-xs mx-4 mb-2 rounded-lg shadow-lg">
<img class="w-full h-48" src="{{ Storage::url($menu->image) }}" alt="Image" />
<div class="px-6 py-4">
<h4 class="mb-3 text-xl font-semibold tracking-tight text-green-600 uppercase">
{{ $menu->name }}</h4>
<p class="leading-normal text-gray-700">{{ $menu->description }}.</p>
</div>
<div class="flex items-center justify-between p-4">
<span class="text-xl text-green-600">${{ $menu->price }}</span>
</div>
</div>
#endforeach
welcomecontroller.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Menu extends Model
{
use HasFactory;
protected $fillable = ['name', 'price', 'description', 'image'];
public function categories()
{
return $this->belongsToMany(Category::class, 'category_menu');
}
}
I suppose you forgot to initialize $specials, it is null, that's why you get the error.
Could you try to use dd before foreach statement, so we can see it's content?
{{ dd($specials) }}
UPDATE:
#if(!is_null($specials))
#foreach ($specials->menus as $menu)
<div class="max-w-xs mx-4 mb-2 rounded-lg shadow-lg">
<img class="w-full h-48" src="{{ Storage::url($menu->image) }}" alt="Image" />
<div class="px-6 py-4">
<h4 class="mb-3 text-xl font-semibold tracking-tight text-green-600 uppercase">
{{ $menu->name }}</h4>
<p class="leading-normal text-gray-700">{{ $menu->description }}.</p>
</div>
<div class="flex items-center justify-between p-4">
<span class="text-xl text-green-600">${{ $menu->price }}</span>
</div>
</div>
#endforeach
#else
<div>no item was found</div>
#endif
Your issue is with this line of code (from the comments):
$specials = Category::where('name', 'specials')->first();
->first(); can return null, so when you use it later as $specials->menus, it can be null->menus, which is not valid.
You can use ->firstOrFail() to trigger a 404 in the event $specials results in null, or #foreach($specials->menus ?? [] as $menu) to short-circuit your foreach() with an empty array if $specials is null:
In your Controller:
$specials = Category::where('name', 'specials')->firstOrFail();
return view('welcome', compact('specials'));
OR
In your View:
#foreach($specials->menus ?? [] as $menu)
...
#endforeach
Either case will properly handle your "unsafe" code (unsafe meaning functional, but possible for unhandled errors, like null->menus, etc.) and either trigger a 404 before the view is rendered, or perform a foreach() on an empty array, which does nothing.
So my front-end Lists of Businesses are not in paginated style. But I do not know how to do it. Can anyone please help? The code I posted is in my BusinessListController.php
BusinessListController.php
`<?php
namespace App\Http\Controllers;
use App\Models\Business;
use App\Models\Category;
use App\Models\Location;
use Illuminate\Http\Request;
class BusinessListController extends Controller
{
public function index(Request $request)
{
$businesses = Business::query()
->with('location')
->whereFilters($request->only(
['search', 'category', 'location']
))
->get();d
return view('pages.business-list', [
'businesses' => $businesses,
'locations' => Location::all(),
'categories' => Category::all()
]);
}
}`
And then here is the code for my view blade front-end
Business-List.blade.php
<div class="row business-list-row mx-auto">
#foreach ($businesses as $business)
<div class="col-md-4">
<div class="card shadow border-light mb-3">
<img
src="https://cdn1.clickthecity.com/images/articles/content/5d6eba1f4795e0.58378778.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h4 class="card-title h6" style="font-weight: bold;">
{{Str::limit($business->name, 20, $end='...')}}
</h4>
<div class="">
<p class="card-text">
{{ $business->location?->name }}
</p>
<p class="card-text" style="color: #32a852;">
{{ $business->category?->name}}
</p>
</div>
</div>
<div class="align-self-center">
<a href="{{ route('store', $business->id) }}" class="btn btn-info stretched-link">
Visit
</a>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
So you need to do three things.
In Controller:
$businesses = Business::query()
->with('location')
->whereFilters($request->only(
['search', 'category', 'location']
))
->paginate(15);
put the number of items you need on a single page. here I put 15.
Put this under the </div> of your list.
{{ $business->links() }}
Put this inside the App\Providers\AppServiceProvider boot method.
use Illuminate\Pagination\Paginator;
public function boot()
{
Paginator::useBootstrapFive(); // or
Paginator::useBootstrapFour();
}
This depends upon which version of Bootstrap you are using.
Still confused? Checkout Laravel Pagination Documentation
Just remove ->get();d and add paginate
example
ModelName()->paginate();
I have a notifications component that I'm trying to emit an event to and get it to refresh and show new notifications to the user. I've verified that I'm receiving the event, and the refreshNotifications method is being called, but no matter what I try I can't seem to get the actual component to update. It's getting super frustrating at this point.
Here's my component:
namespace App\Http\Livewire\Components;
use Livewire\Component;
use Illuminate\Support\Facades\Auth;
class Notifications extends Component
{
public $notifications;
public $notificationCount = 0;
protected $listeners = ['refreshNotifications'];
public function mount()
{
$this->user = Auth::user();
}
public function render()
{
$this->notifications = $this->user->fresh()->unreadNotifications;
$this->notificationCount = $this->user->fresh()->unreadNotifications->count();
return view('livewire.components.notifications');
}
public function clearNotifications()
{
$this->user->unreadNotifications()->update(['read_at' => now()]);
}
public function refreshNotifications()
{
//can verify here that the event successfully emitted to this component. No refresh happens though.
$this->render();
}
}
And here's my blade view:
<li class="nav-item dropdown" x-data="{ open: false }">
<a #click="open = !open" #click.outside="open = false" class="nav-link dropdown-toggle show" id="notificationDropdown" role="button">
<i class="mdi mdi-bell-outline h3"></i>
#if ($notificationCount)
<div class="indicator">
<div class="circle"></div>
</div>
#endif
</a>
<div x-show="open" class="dropdown-menu p-0 show" data-bs-popper="none">
<div class="px-3 py-2 d-flex align-items-center justify-content-between border-bottom">
<p>{{ $notificationCount }} New Notifications</p>
#if ($notificationCount)
<a role="button" wire:click="clearNotifications" class="text-muted"><i class="mdi mdi-notification-clear-all"></i>Clear all</a>
#endif
</div>
#foreach ($notifications as $notification)
<div class="px-3 py-2" wire:key="notification-{{ $notification->id }}">
<a role="button" class="d-flex align-items-center py-2">
<div class="flex-grow-1 me-2">
<h5>{{ $notification->data['title'] ?? 'Test Title' }}</h5>
<p class="tx-14 text-muted"><em>{{ $notification->data['body'] ?? 'Test body' }}</em></p>
<p class="tx-12 text-muted">{{ Helper::timeElapsedForHumans($notification->created_at) }}</p>
</div>
</a>
</div>
#endforeach
</div>
</li>
Not sure if it's helpful, but the xhr response is this: {"effects":{"html":null,"dirty":[]},"serverMemo":{"checksum":"c980388fe95899e9055bfc363bd57c5d80916fe581b5b7983109cdba20db2f33"}}
Other questions on SO are related to not being in a single root element. That's not my issue. I have no idea why this isn't working. I feel like I've tried everything.
You need to define what event is called in the listener, for example:
protected $listeners = ['refreshNotifications' => '$refresh'];
See here:
https://laravel-livewire.com/docs/2.x/actions#magic-actions
Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;
class Events extends Model
{
use HasFactory;
use SoftDeletes;
public function EventQues()
{
return $this->hasMany(Questions::class, 'event_id')->limit(1);
}
}
Controller
public function ActiveEvent()
{
$display = Events::where('status', 1)->with('EventQues')->first();
// $next = Questions::where('id', '>',$request->id)->where('is_deleted',0)->first('id');
return view('frontend.index', compact('display'));
}
// function for front send answer value to DB
public function getData(Request $request)
{
$value = $request->all();
return response()->json($value, 200);
}
view
#extends('frontend.master')
#section('title', 'Home')
#section('content')
{{-- top menu Start --}}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand text-uppercase font-weight-bold" href="#">Logo</a>
<div class="col-2">
<h5 class=" dropdown-toggle text-light" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">{{ Auth::user()->name }}</h5>
<div class="dropdown-menu mt-1" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="{{ route('twitch.logout') }}">Log Out</a>
</div>
</div>
</div>
</nav> {{-- top menu end --}}
<div class="container-fluid">
<div class="row">
<div class="card shadow col-lg-8 col-md-8 col-sm-12 m-4">
<div class="card-body ">
<div id="twitch-embed"></div>
</div>
</div>
<div class="card shadow col-lg-3 col-md-3 col-sm-12 m-4">
<div class="card-body">
<div id="list-example" class="list-group mt-2">
#if (!$display)
<h2 class="font-weight-bold mt-5" id="Nothing">Currently No Event Is Active</h2>
#else
<h3 class="font-weight-bold p-2 text-light text-center bg-primary">{{ $display->title }}</h3>
<p class="text-justify">{{ $display->description }}</p>
{{-- Displaying questions of Active event from database --}}
<h4 class="text-center p-2">Time :<span id="timer"> </span></h4>
#foreach ($display->EventQues as $data)
<div id="quesDiv"></div>
<div id="quesDiv1">
<h5 id="question">{{ $data->question }}</h5>
<form >
#csrf
<div class="btn btn-group-toggle d-flex flex-column" id="radioDiv"
data-toggle="buttons">
<label class="btn btn-secondary mb-2">
<input type="radio" name="options" id="option_a1" class="answer-check-box"
autocomplete="off" data-value="1"> Yes
</label>
<label class="btn btn-secondary">
<input type="radio" name="options" id="option_a2" class="answer-check-box"
autocomplete="off" data-value="2"> NO
</label>
</div>
</form>
</div>
#endforeach
#endif
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('scripts')
#include('frontend.script')
#endsection
Script.js
$('#option_a1,#option_a2').click(function() {
if (options = $("input[type='radio']:checked")) {
val = options.attr('data-value');
} else if (options = $("input:checkbox:not(:checked)")) {
val = "";
}
});
let interval = setInterval(req, 1000);
function req() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
if (val || timeleft < '0') {
$.ajax({
type: "post",
url: "{{ route('ajax') }}",
data: {
'id': '{{ $data->id }}',
'value': val
},
success: function(data) {
$('#quesDiv1').hide();
$('#quesDiv').html('Next Question');
},
error: function(data) {
console.log('error!!')
}
});
var timeOut = setTimeout(interval, 1000);
}
// clearInterval(interval);
}
I am making an app where I have made one to many relation between events and questions. When an event is active questions related to this event are displayed one at a time and when a user submits an answer then fetch the next question from Database. And I was using Ajax call for this.
I am running into a very strange issue where I have a chatroom that should update whenever a new message is posted. Instead when I add a new message the x-data is getting updated and I can see the message there but the x-for doesnt seem to run and it never appears on the frontend. Then when I enter another message the previous message shows up on the frontend but the latest message does not show even though the x-data has been updated to reflect it.
Here is the code below:
<div
x-data="{{ json_encode(['messages' => $messages, 'messageBody' => '']) }}"
x-init="
Echo.join('chat.2')
.listen('ChatSent', (e) => {
#this.call('incomingMessage', e)
console.log(e)
})
">
<div
class="wow fadeInUp mb-10 rounded-md bg-light-bg dark:bg-dark"
data-wow-delay="0s"
>
<h3
class="border-b border-body-color border-opacity-10 py-4 px-8 text-lg font-semibold text-black dark:border-white dark:border-opacity-10 dark:text-white"
>
Chat
</h3>
<div id="chat-window" class="relative w-full p-3 overflow-y-auto h-[14rem]">
<ul class="space-y-2">
<template
x-for="message in messages"
:key="message.id"
>
<div>
<template x-if="message.user_id == {{ Auth::user()->id }}">
<li class="flex justify-end">
<div class="relative max-w-xl px-4 py-2 text-black dark:text-white bg-gray-100 dark:bg-black rounded shadow">
<span class="block" x-text="message.body"></span>
</div>
</li>
</template>
<template x-if="message.user_id != {{ Auth::user()->id }}">
<li class="flex justify-start">
<div class="relative max-w-xl px-4 py-2 text-black dark:text-white bg-blue-100 dark:bg-[#1e2a78] rounded shadow">
<span class="block" x-text="message.body"></span>
</div>
</li>
</template>
</div>
</template>
</ul>
</div>
<div class="flex items-center justify-between w-full p-3 border-t border-gray-300">
<input
#keydown.enter="
#this.call('sendMessage', messageBody)
messageBody = ''
"
x-model="messageBody"
type="text"
placeholder="Message"
class="block w-full py-2 pl-4 mx-3 bg-gray-100 dark:bg-black rounded-full outline-none focus:text-gray-700 dark:focus:text-white dark:text-white"
name="message" required />
<button
#click="
#this.call('sendMessage', messageBody)
messageBody = ''
">
<svg class="w-5 h-5 text-black dark:text-white origin-center transform rotate-90" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor">
<path
d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</div>
#error('messageBody')
<div class="w-full p-2 text-center">
<span class="text-red-500">Message is required!</span>
</div>
#enderror
</div>
<div
class="wow fadeInUp mb-10 rounded-md bg-light-bg dark:bg-dark"
data-wow-delay="0s">
<h3
class="border-b border-body-color border-opacity-10 py-4 px-8 text-lg font-semibold text-black dark:border-white dark:border-opacity-10 dark:text-white"
>
Active Players
</h3>
<ul class="flex flex-wrap py-6 px-8">
#forelse($here as $authData)
<li>
<a
href="javascript:void(0)"
class="text-body-color-3 mr-3 mb-3 inline-flex items-center justify-center rounded-full border-[.5px] border-body-color bg-body-color bg-opacity-10 py-2 px-4 hover:border-primary hover:bg-primary hover:text-white dark:border-[#363D68] dark:bg-[#272E5C] dark:text-white dark:hover:border-primary dark:hover:bg-primary dark:hover:text-white"
>
{{ $authData['name'] }}
</a>
</li>
#empty
#endforelse
</ul>
</div>
</div>
I figure it has to be something simple I am missing and hopefully someone can point me in the right direction.
EDIT to include Livewire code:
<?php
namespace App\Http\Livewire;
use App\Events\ChatSent;
use App\Models\Chat;
use App\Models\Games;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
class Chatbox extends Component
{
public $game_id, $game, $chats;
public $here = [];
public $messages = [];
public function getListeners()
{
$game_id = $this->game_id;
return [
"echo-presence:chat.{$game_id},here" => 'here',
"echo-presence:chat.{$game_id},joining" => 'joining',
"echo-presence:chat.{$game_id},leaving" => 'leaving',
];
}
public function render()
{
return view('games.components.chatbox');
}
public function mount()
{
$this->game = Games::find($this->game_id);
$this->messages = Chat::
where('games_id', $this->game_id)
->with('user')
->latest()
->limit(30)
->get()
->reverse()
->values()
->toArray();
}
public function sendMessage($body)
{
if (! $body) {
$this->addError('messageBody', 'Message body is required.');
return;
}
$message = Auth::user()->chats()->create([
'body' => $body,
'games_id' => $this->game_id,
]);
$message->load('user');
broadcast(new ChatSent($message, $this->game))->toOthers();
$myMessage = $message->toArray();
$this->dispatchBrowserEvent('update-chat');
array_push($this->messages, $myMessage);
}
/**
* #param $message
*/
public function incomingMessage($message)
{
// get the hydrated model from incoming json/array.
$message = Chat::with('user')->find($message['id']);
array_push($this->messages, $message);
$this->dispatchBrowserEvent('update-chat');
}
/**
* #param $data
*/
public function here($data)
{
$this->here = $data;
}
/**
* #param $data
*/
public function leaving($data)
{
$here = collect($this->here);
$firstIndex = $here->search(function ($authData) use ($data) {
return $authData['id'] == $data['id'];
});
$here->splice($firstIndex, 1);
$this->here = $here->toArray();
}
/**
* #param $data
*/
public function joining($data)
{
$this->here[] = $data;
}
}