I want to send collection from livewire component to livewire blade.
This is my code:
Button in livewire blade
<button type="button" wire:click = "getShipmentHistory" class="btn btn-sm btn-info" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fa fa-history"></i> #lang('orders.shipment_history')
</button>
My livewire component
public $shipment_history ;
public function getShipmentHistory()
{
$this->shipment_history = OrderShippmentHistory::with(['creator:id,name', 'reason'])->where('shippment_id', $this->shipment_id)->get();
}
When I try dd for $shipment_history, I get my collection; but when I try to access it, I get this error:
Uncaught TypeError: this._config is undefined from consolo
I want to receive collection in modal bootstrap to loop on it for showing data.
foreach in my blade
#foreach($shipment_history as $history)
<tr>
<td>{{ $history->creator->name??'-' }}</td>
<td>{{ $history->comment??t('no_comment') }}</td>
</tr>
#endforeach
Related
I wanted to add pagination to my project and followed a tutorial for that. When I click new page the results are not changing.
In my Controller I added this $competitions = Competition::latest()->paginate(1);
Then into app/Providers/AppServiceProvider added this use Illuminate\Pagination\Paginator; and inside the boot function added this: Paginator::useBootstrap();
And the last thing was to add this {{ $competitions->onEachSide(1)->links() }} after I close my table in the blade file.
EDIT:
Controller function:
public function index()
{
$competitions = Competition::latest()->paginate(1);
return view('competition.index', compact('competitions'));
}
Loop in blade:
#foreach ($competitions as $competition)
<tbody >
#switch($competition->status)
#case('active')
<tr>
#break
#case('to_push')
<tr class="bg-secondary">
#break
#case('inactive')
<tr class="bg-warning">
#break
#default
<tr>
#endswitch
<td>{{ $competition->id }}</td>
<td>{{ $competition->name }}</td>
<td>{{ $competition->status }}</td>
<td>{{ $competition->mode }}</td>
<td>{{ $competition->type }}</td>
<td>{{ $competition->frequency }}</td>
<td>{{ $competition->last_push }}</td>
<td>{{ $competition->next_push }}</td>
<td class="text-center"><a class="btn btn-info btn-sm" href="{{ route('events.list_by_competition',['competition' => $competition->id]) }}">Events</a></td>
<td class="text-center"><a class="btn btn-info btn-sm" href="{{ route('competitions.exports',$competition->id) }}">Exports</a></td>
<td class="text-center">
<form action="{{ route('competitions.destroy',$competition->id) }}" method="POST">
<a class="btn btn-primary btn-sm" href="{{ route('competitions.edit',$competition->id) }}">Edit</a>
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
</tbody>
#endforeach
</table>
{{ $competitions->links('pagination::bootstrap-5') }}
dd(Competition::all()) returns the 4 records I have
Can you please tell me what I did wrong? Any and all help gratefully received.
$competitions = Competition::latest()->paginate(1) this command will return you one result and then pagination will take 1 per page so it won't be shown at all.
Try something like this in your controller
$competitions = Competition::paginate(1)
return view(...., ['competitions' => $competitions]);
and in your blade add this under the foreach loop where you display data
{{ $competitions->links() }}
Read more here
HERE IS HOW TO MAKE PAGINATION
BLADE
#foreach($paginate as $p)
{{ $p->name }} <br>
#endforeach
{{ $paginate->links() }}
CONTROLLER
return view('backend.test', [
'paginate' => Product::paginate(5)
]);
I have a table view in which I have a view button and redirect to another page carrying the id of the row that has been clicked.
<tbody>
<tr>
<?php $hold=0; ?>
#if(!empty($users))
#foreach($users as $user)
#if($user->role == 3)
<?php $hold++; ?>
<td class="py-1">{{ $user->id }}</td>
<td>{{ $user->name }} </td>
<td>{{ $user->Zone }} </td>
<td>{{ $user->Purok }}</td>
<td> Wala pa sa database </td>
<td>
<div class="template-demo">
<button type="button" onclick="location.href=' {{ route ('SupAd.View_PL_Accnt/'.$user->id) }}'" class="btn btn-outline-info btn-icon-text">
<i class="ti-search btn-icon-append"></i>View
</button>
</div>
</td>
</tr>
#endif
#endforeach
<?php if($hold == 0){
echo "<p><font color=red size='4pt'>No purok leader can be found</font></p>";
}
?>
#endif
I have here my code on web.php route
Route::group(['prefix'=>'SupAd_Purok_Leader_Account', 'middleware'=>['isSupAd', 'auth', 'PreventBackHistory']], function (){
Route::get('View_PL_Accnt', [SupAdController::class, 'View_PL_Accnt'])->name('SupAd.View_PL_Accnt/{id}'); });
And I got the error:
Symfony\Component\Routing\Exception\RouteNotFoundException
Route [SupAd.View_PL_Accnt/3] not defined.
You are placing the route parameter in the wrong place. Try this:
Route::get('View_PL_Accnt/{id}', [SupAdController::class, 'View_PL_Accnt'])->name('SupAd.View_PL_Accnt'); });
The name is used to call a route using the route helper. You can give the url parameters to the route helper in an array. Inside your blade file use:
{{ route ('SupAd.View_PL_Accnt', [$user->id]) }}
you can change routes like
Route::get('View_PL_Accnt/{id}', [SupAdController::class, 'View_PL_Accnt'])->name('SupAd.View_PL_Accnt'); });
And change the button on click event
<button type="button" onclick="location.href='{!! route('SupAd.View_PL_Accnt', [$user->id]) !!}'" class="btn btn-outline-info btn-icon-text">
<i class="ti-search btn-icon-append"></i>View
</button>
i am a beginner of laravel. i ran into the problem with Route [student.delete] not defined. using laravel 7. when run the laravel project. what i tried so far i attached below. i attached the controller and view and route file below i don't what was a problem.
Controller.
public function destroy(Student $student)
{
$student->delete();
return redirect()->route('student.index')->with('success', 'Student has been Deleteddddd');
}
index.blade.php
#foreach ($students as $student)
<tr>
<td>{{ $student->id }}</td>
<td>{{ $student->name }}</td>
<td>{{ $student->phone }}</td>
<td>{{ $student->address }}</td>
<td>
<a class="btn btn-primary" href="{{ route('student.edit',$student->id) }}">Edit</a>
<a class="btn btn-primary" href="{{ route('student.delete',$student->id) }}">Delete</a>
</form>
</td>
</tr>
#endforeach
Routes
Route::get('/', 'StudentController#index');
Route::get('/students', 'StudentController#create')->name('student.create');
Route::post('/students', 'StudentController#store')->name('student.store');
Route::get('/students/{student}', 'StudentController#edit')->name('student.edit');
Route::post('/students/{student}', 'StudentController#update')->name('student.update');
//Route::delete('/students/{student}', 'StudentController#destroy')->name('student.destroy');
Route::get('/students/{student}', 'StudentController#destroy')->name('student.destroy');
Only the first row of the table is changing
HTML table
<tr>
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $entrepreneur->name }}</td>
<td>{{ $entrepreneur->contact }}</td>
<td>{{ $entrepreneur->address }}</td>
<td>{{ $entrepreneur->business_name }}</td>
<td>{{ $entrepreneur->business_address }}</td>
<td>
<div id="approval">
<button class="check-btn" id="check-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#checkModal-{{ $entrepreneur->id }}"><i class="fa fa-check"></i></button>
<button class="delete-btn" id="delete-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#rejectModal-{{ $entrepreneur->id }}"><i class="fa fa-close"></i></button>
</div>
</td>
</tr>
Ajax Function
$.ajax({
type: 'post',
url: "/changeAccepted/"+entrepreneur_id,
success: function(res) {
toastr["success"]('Entrepreneur accepted succesfully');
$('#checkModal-'+entrepreneur_id).modal('hide');
$('#approval').html('Accepted');
} });
I am trying to change the two buttons on 'id=approval', right now it is changing for only the first row. I also want to change for other rows when it is accepted.
Each html element on same page has to have unique id property.
As you are using table I think you have multiple rows and each row has its own buttons placed in <div id="approval"></div> element.
When you use $('#approval') selector, Jquery gets only first one.
If you want to select all and change every element you have to use any selector but id.
The simplest way is to use .class selector.
Example & Solution:
Html:
...
<div class="approval_class">
<button class="check-btn" id="check-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#checkModal-{{ $entrepreneur->id }}"><i class="fa fa-check"></i></button>
<button class="delete-btn" id="delete-btn-{{ $entrepreneur->id }}" data-toggle="modal" data-target="#rejectModal-{{ $entrepreneur->id }}"><i class="fa fa-close"></i></button>
</div>
...
Javascript (Jquery): (to change all rows as accepted)
$('.approval_class').html('Accepted');
Javascript (Jquery): (to change only that row which accepted)
$('#delete-btn-' + entrepreneur_id).closest('div').html('Accepted');
I am trying to call a modal on a button click and pass through an $incident array, which will then be passed through the properties of a Vue component. How do you pass through data from a parent blade through to an included modal? i tried using data-attach but i think that is wrong.
I currently have a table looping through an incidents array passed through to my blade:
#foreach($incidents as $incident)
<tr>
<td>{{ $incident->service_now_incident_number }}</td>
<td>{{ $incident->business_service_reference ?: 'N/A' }}</td>
<td>{{ $incident->status }}</td>
<td>{{ $incident->raised_date->format('d/m/y') }}</td>
<td>{{ $incident->email }}</td>
<td>
<a class="btn btn-primary" data-toggle="modal" data-target="#incident-details-modal" data-attach="{{$incident}}">View</a>
</td>
</tr>
#endforeach
This is the modal i am trying to pass data to:
<div class="modal fade" id="incident-details-modal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<incident-details :incident="{{$incident}}"></incident-details>
</div>
</div>
</div>
is there a way i can pass through array data on modal load?
You can use $emit method for this purpose.
v-on directive captures the child components events that is emitted by $emit
Child component triggers clicked event:
export default {
methods: {
onClickButton (event) {
this.$emit('clicked', 'someValue')
}
}
}
Parent component receive clicked event:
<div>
<child #clicked="onClickChild"></child>
</div>
export default {
methods: {
onClickChild (value) {
console.log(value) // someValue
}
}
}