to get data in a modal in Laravel - laravel

Is there any way to get the data inside a modal? I know that it is possible to work with this through Jquery, but I would like to know if there is any way to work with Laravel itself. In a view, we can do this:
return view ('admin/users/index', ['datas1' => $ datas1, 'datas2' => $datas2];
but for a modal, is it possible to do something like this? to send my data through the controller and within my modal I check if this data are coming empty or filled, as this answer I just want to show different things, like this:
$dep = User::query()->where('dep_link', $id)->get();
 return['status' => 'success', 'dep' => $dep];
only my validation in the modal:
<div class="row" style="padding: 28px 20px;">
<div class="col-12">
#if(empty($dep))
<div class="position-relative">
<label for="rg_titular">Selecione o RG do titular (.png .jpg .pdf)</label><br>
<input type="file" name="rg_titular" class="file-input"/>
<button type="button" class="file-button">Selecionar arquivo</button>
<span class="text-arquivo">Arquivo selecionado!</span>
</div>
#else
<a href="link" target="_blank">
Visualizar RG do titular
</a>
#endif
</div>
</div>
Is there any way I can get this data inside the modal window and work with them? I just want to check if it's coming empty or not, that's all.

You can write a view composer for the modal blade file.
https://laravel.com/docs/5.8/views#view-composers
In your service provider (app, or a custom one you make)
public function boot()
{
view()->composer('myBladeFileName', function ($view) {
$activeUsers = \App\User::where('active', true)->get();
$view->with(compact('activeUsers'));
});
}

Related

Laravel/Blade Load data without reloading the page

I have a laravel 9 project with blade and boostrap5, on the left is a form with filters such as "brand", "model", "weight" and on the right I want to display the results.
I can't think of how to make the submit button load the data on the right side. I don't know whether to do "partial views" and load the information with Jquery's "load".
At the code level I have this in the view called Search.blade.php
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-lg-12">
<h3>Category {{$category->name}}</h3>
</div>
// LEFT SIDE
<div class="col-4">
Filters<br><br>
<form>
Brand<br>
Model<br>
<input type=submit>
</form>
</div>
// RIGHT SIDE (results)
<div class="col-8">
#foreach ($items as $item)
{{$item->name}}<br>
{{$item->description}}<br>
Show product<br><br>
#endforeach
</div>
</div>
</div>
#endsection
This call comes from a controller where it loads ITEMS of that category
/**
* #param $category_name
* #return Application|Factory|View
*/
public function index($category_name) {
$category = ProductCategory::where('slug',$category_name)->get()[0];
$items = Product::where('category_id',$category->id)->take(10)->get();
return view('productcategories/show',compact('category','items'));
}
Laravel livewire will do a great job.
Check https://laravel-livewire.com/docs/2.x/polling#polling-background
Either user livewire or use ajax to achieve what you want

Laravel 2 submit buttons in the same form

I am building a CRUD with Laravel. Each category hasMany attachments and each attachment belongsTo a category.
In the category.edit view I want to give the user the possibility of deleting the attachments (singularly) from the Category. I tried this method but it did not work:
Registering route for the attachment:
Route::group(['middleware' => ['auth']], function () {
Route::delete('attachment/{id}', 'AttachmentController#delete')->name('attachment');
});
Handling the delete building the AttachmentController#delete method:
class AttachmentController extends Controller
{
public function delete($id) {
$toDelete = Attachment::findOrFail($id);
$toDelete->delete();
return redirect()->back();
}
}
In the CategoryController (edit method), I fetch the attachments linked to each category to be rendered inside the view:
public function edit($category)
{
$wildcard = $category;
$category = Category::findOrFail($wildcard);
$attachments = App\Category::findOrFail($wildcard)->attachments()->get()->toArray();
return view('category.edit', [
'category' => $category,
'attachments' => $attachments
]);
}
In the view, I render the attachment and the button to delete. I am fully aware of the error of having a form inside another form, nevertheless I do not know antoher approach to submit this delete request.
// update Category form
#foreach ($attachments as $attachment)
<div class="row">
<div class="col-4">
<img style="width: 100%;" src={{ $attachment['url'] }} alt="">
</div>
<div class="col-4">
<div>
<p class="general_par general_url">{{ $attachment['url'] }}</p>
</div>
</div>
<div class="col-4">
<form action="{{ route('attachment', $attachment['id']) }}" method="POST">
#csrf
#method('DELETE')
<button type="submit" class="btn btn-danger">Delete Image</button>
</form>
</div>
</div>
<hr>
#endforeach
// end of update Category form
Should I build a deleteAttachment method inside the CategoryController? If so, how can I still submit the Delete request? Also, if any other Model in the future will have attachments, should I build a deleteAttachment method inside each controller? That is cumbersome. Thanks in advance
if you don't like to use form, then use tag:
<a class="btn btn-danger" href="{{ route('attachment', $attachment['id']) }}">Delete Image</a>
And redefine the route to Route::get(...)
(or maybe use ajax for POST method if that is required)

Laravel: How to create link buttons on a view dynamically?

I'm making a College Administration website where a professor can log in.
I have a dashboard, where my dynamically generated button should be placed: (right now it just has dummy buttons!)
Generated by this view file, which I will have to modify soon:
<div class="container d-flex flex-column align-items-center justify-content-center">
<h1>IA DASHBOARD</h1>
<br>
<div class="grid2">
SUBCODE 1</button>
SUBCODE 2</button>
SUBCODE 3</button>
</div>
Tables in the Database:
the table iamarks contains the data (student info, and marks) that is to be displayed after /subcode/{subcode} narrows it down to records of just the students that are in the class assigned to current logged-in professor.
classroom_mappers is a table used to map a professor to a classroom with a subject. It makes sure that one classroom only has one professor for a particular subject.
the routes currently in my web.php:
route::get('/ia', 'IAController#show')->middleware('auth');
Route::get('/subcode/{subcode}', 'IAController#showTable')->middleware('auth');
...and these are the methods inside my controller:
//shows buttons to the user:
public function show(){
$subcodes = DB::table('classroom_mappers')
->select('subcode')
->where([['PID','=', auth()->user()->PID]])
->get();
return view('ia',compact('subcodes'));
}
//when user clicks a button, subcode is to be generated and a table is to be shown:
//it works, I tried it by manually typing in subcode value in URL.
public function showTable($subcode){
$sem = DB::table('classroom_mappers')
->where([['PID','=', auth()->user()->PID],
['subcode','=',$subcode]])
->pluck('semester');
$division = DB::table('classroom_mappers')
->where([['PID','=', auth()->user()->PID],
['semester','=',$sem],
['subcode','=',$subcode]])
->pluck('division');
$data = DB::table('iamarks')
->where([['semester','=',$sem],
['division','=',$division],
['subcode','=',$subcode]])
->get();
return view('subcode',compact('data'));
}
My Problem:
To be able to generate the {subcode} in the URL dynamically, I want to create buttons in the dashboard using the data $subcodes. The controller hands over the $subcodes (an array of subject codes which belong to logged in professor) which are to be made into buttons from the show() method.
The buttons should have the name {subcode} and when clicked, should append the same subject code in the URL as {subcode}.
How do I make use of $subcodes and make the buttons dynamically?
How do I make sure the buttons made for one user are not visible to another user?
I managed to find the solution, thanks to Air Petr.
Apparently, you can't nest blade syntax like {{some_stuff {{ more_stuff }} }} and it generates a wrong php code. I modified the solution by Air Petr to:
<div class="grid2">
#foreach ($subcodes as $subcode)
<a href="<?php echo e(url('/subcode/'.$subcode->subcode));?>">
<button class="btn btn-outline-primary btn-custom-outline-primary btn-custom">
<?php
echo e($subcode->subcode);
?>
</button>
</a>
#endforeach
</div>
It generates the buttons perfectly. The buttons for one user are not visible to another, since I'm using PID constraint in a query (['PID','=', auth()->user()->PID]).
Pass the passcodes array to view:
$subcodes = []; // Array retrieved from DB
return view('subcode', compact('subcodes'));
And in subcode.blade.php, loop through each subcode:
<div class="grid2">
#foreach($subcodes as $subcode)
<a href="{{ url('/subcode/' . $subcode->subcode) }}">
<button class="btn btn-outline-primary btn-custom-outline-primary btn-custom">SUBCODE {{ $subcode->subcode }}</button>
</a>
#endforeach
</div>
You can loop your codes to create buttons. Something like this (it's for "blade" template engine):
<div class="grid2">
#foreach ($subcodes as $subcode)
{{ $subcode->subcode }}</button>
#endforeach
</div>
Since you're using PID constrain in a query (['PID','=', auth()->user()->PID]), you'll get buttons for that specific PID. So there's no problem.

Ember : if a value is set in controller , perform an Ajax command(written in template),

I have given a rough code to understand what I need to perform,
/app/route1/controller.js
export default Controller.extend({
test: function(id) {
$.ajax({
.....
.....
.....
}).then(() => {
set('message','successfully added');
});
}
});
/app/route1/template.hbs
<div class="ui container">
<div class="ui segment"
<button class="ui button" {{action "test" model.id}}>Submit</button>
</div>
</div>
<div class="ui container">
<div class="ui modal">
<div class="header"
Message
</div>
<div class="content"
{{message}}
</div>
<div class="actions">
<div class="ui ok button">OK</button>
</div>
</div>
</div>
<script type="text/javascript">
$.ajax({
if(message) {
$('.ui.modal').modal('show');
}
})
</script>
If I set a message in controller then, I have to show this message in the MODAL. The Ajax command that I've written is not correct., Please help to solve this issue.
Thanks in advance
First, you must not use <script> tags with ember. This won't work as expected and is in no way supported.
If you have to manually access DOM you should use the didInsertElement of a component.
Are you absolutly sure you want to build your modal yourself? There are many addons providing a nice API for modals. If you can use one of them. If you cant you basically have to write your own modal component.
I will not instruct your in detail how to do this, because this seems not to be your primary question.
Now about your test function. first you seem to try to use it as an action:
{{action "test" model.id}}
however for this you must place the function under the actions hash.
Next this line is wrong:
set('message','successfully added');
you either must use this.set('message','successfully added'); or set(this, 'message','successfully added');
Then you can display your message like this:
{{#if message}}
{{#modal-dialog
onClose=(action (mut isShowingBasic) false)
}}
{{message}}
{{/modal-dialog}}
{{/if}}
And it will work as expected.

Can't work with object after sending it via Ajax request

I sent to my bootstrap modal this content with Ajax:
<div class="list-of-players text-center">
<div class="list">
#foreach($team->players as $player)
<a class="player_choose" id="player_id_Standard_{{$player->id}}">
<div class="player">
<span class="p_name"><span class="flag-icon {{$player->nationality->flag}}"></span> {{$player->fullname}}</span>
</div>
</a>
#endforeach
</div>
</div>
But then when I want to choose some element of this modal window by this code:
$('.player_choose').click(function () {
$('.modal').modal('hide');
});
It doesn't work. What can be a problem? Maybe js don't see "player_choose" elements after ajax?
Yes. Your script executes before you get this element with ajax. You should use event delegation. This should work:
$(document).on('click','.player_choose', function () {
$('.modal').modal('hide');
});

Resources