Level 122
i assume you have the bootstrap code installed?
Is the modal loaded in the same view?
Oct 13, 2018
29
Level 1
Problem with modal window (EDIT)
I have problem with modal window (on edit). It won't show/open. Here is my code.
directory.blade.php
<tbody class="text-center">
<?php $i=1; ?>
@foreach($directories as $item)
<tr>
<td scope="row">{{ $i }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->surname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phone }}</td>
<td>{{ $item->town }}</td>
<td>{{ $item->country }}</td>
<td>{{ $item->gender }}</td>
<td>{{ $item->status }}</td>
<td><a href="#editDirectory/{{ $item->id}}" data-target="#editDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
<td><a href="#deleteDirectory{{ $item->id}}" data-toggle="modal" class="text-center"><img src="{{ asset('storage/admin/delete.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
<?php $i++; ?>
</tr>
@endforeach
<div class="modal fade bd-example-modal-md" id="editDirectory" tabindex="-1" role="dialog" aria-labelledby="editDirectoryModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
{!! Form::open (['method' => 'POST', 'action' => ['DirectoriesController@update',$directories->id]]) !!}
{!! csrf_field() !!}
<div class="modal-header">
<h5 class="modal-title" id="editDirectoryModalLabel">Ažuriranje novog korisnika</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@include('pages.admin.forms-admin.edit.edit-directory')
</div>
{!! Form::hidden('_method','PUT')!!}
{!! Form::close() !!}
</div>
</div>
</div>
Level 67
Try changing the hrefs of the anchors (to trigger the modal) to just #.
href="#editDirectory/{{ $item->id}}" If you're trying to send that $item->id to the modal, it should be in a data property, not the href, like data-item-id="{{ $item->id }}"
What version of bootstrap are you using?
As an aside, you can use the index of the array in your loop to generate the row numbers. Instead of
<?php $i=1; ?>
@foreach($directories as $item)
<tr>
<td scope="row">{{ $i }}</td>
<?php $i++; ?>
</tr>
@endforeach
You could reduce code and just
@foreach ($directories as $key => $item)
<tr>
<td scope="row">{{ $key+1 }}</td>
</tr>
@endforeach
I used $key+1 because array indexes start at 0.
Level 1
Thank you!! I changed the last one! :)
Version of Bootstrap is "bootstrap": "^4.0.0"
<td><a href="#" data-item-id="{{ $item->id }}" data-target="#editDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
Did I make this right? I don't know if I understand what you write.
What else should I do?
Level 122
The ever present w3schools says
For <a> elements, omit data-target, and use href="#modalID" instead
Level 1
directory.blade.php
@extends('layouts.app-admin')
@section('content')
<section id="admin">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="text-center">Imenik</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 d-flex justify-content-end">
<a href="#addDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/add.png') }}" height=33 width=33 class="img-responsive mr-auto d-block"/></a>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="text-justify">
<table class="table table-hover">
<thead class="text-center">
<tr>
<th scope="col">#</th>
<th scope="col">Ime</th>
<th scope="col">Prezime</th>
<th scope="col">Email</th>
<th scope="col">Telefon</th>
<th scope="col">Grad</th>
<th scope="col">Država</th>
<th scope="col">Spol</th>
<th scope="col">Status</th>
<th scope="col">Izmijeni</th>
<th scope="col">Izbriši</th>
</tr>
</thead>
<tbody class="text-center">
@foreach($directories as $key => $item)
<tr>
<td scope="row">{{ $key+1 }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->surname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phone }}</td>
<td>{{ $item->town }}</td>
<td>{{ $item->country }}</td>
<td>{{ $item->gender }}</td>
<td>{{ $item->status }}</td>
<td><a href="#" data-item-id="{{ $item->id }}" data-target="#editDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
<td><a href="#deleteDirectory{{ $item->id}}" data-toggle="modal" class="text-center"><img src="{{ asset('storage/admin/delete.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
@include('pages.admin.modals-admin.create.add-directory')
@endsection
modal
{!! Form::open (['method' => 'POST', 'action' => ['DirectoriesController@update',$directories->id]]) !!}
{!! csrf_field() !!}
<div class="modal-header">
<h5 class="modal-title" id="editDirectoryModalLabel">Ažuriranje novog učesnika turnira Murga Open</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@include('pages.admin.forms-admin.edit.edit-directory')
</div>
{!! Form::hidden('_method','PUT')!!}
{!! Form::close() !!}
</div>
</div>
</div>
form
<div class="form-group has-feedback">
{{Form::label('name','Ime')}}
{{Form::text('name',$directory->name, ['class' => 'form-control','placeholder' => 'Upišite ime'])}}
</div>
<div class="form-group">
{{Form::label('surname','Prezime')}}
{{Form::text('surname',$directory->surname, ['class' => 'form-control','placeholder' => 'Upišite prezime'])}}
</div>
<div class="form-group">
{{Form::label('email','Email')}}
{{Form::email('email',$directory->email, ['class' => 'form-control','placeholder' => '[email protected]'])}}
</div>
<div class="form-group">
{{Form::label('phone','Telefon')}}
{{Form::number('phone',$directory->phone, ['class' => 'form-control','placeholder' => '38591222333'])}}
</div>
<div class="form-group">
{{Form::label('town','Grad')}}
{{Form::text('town',$directory->town, ['class' => 'form-control','placeholder' => 'Upiši grad'])}}
</div>
<div class="form-group">
{{Form::label('country','Država')}}
{{Form::text('country',$directory->country, ['class' => 'form-control','placeholder' => 'Upiši državu'])}}
</div>
<div class="form-group">
{{Form::label('gender','Spol')}}
{{Form::select('gender', $genders,$directory->gender, ['class' => 'form-control'])}}
Level 122
please format your code. Put ``` on its own line before and after code
Level 122
can you do us a favour and put the file names above the code block instead of just 'modal'
1 like
Level 1
directory.blade.php (I didn't include edit modal before)
@extends('layouts.app-admin')
@section('content')
<section id="admin">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="text-center">Imenik</h2>
</div>
</div>
<div class="row">
<div class="col-md-12 d-flex justify-content-end">
<a href="#addDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/add.png') }}" height=33 width=33 class="img-responsive mr-auto d-block"/></a>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="text-justify">
<table class="table table-hover">
<thead class="text-center">
<tr>
<th scope="col">#</th>
<th scope="col">Ime</th>
<th scope="col">Prezime</th>
<th scope="col">Email</th>
<th scope="col">Telefon</th>
<th scope="col">Grad</th>
<th scope="col">Država</th>
<th scope="col">Spol</th>
<th scope="col">Status</th>
<th scope="col">Izmijeni</th>
<th scope="col">Izbriši</th>
</tr>
</thead>
<tbody class="text-center">
@foreach($directories as $key => $item)
<tr>
<td scope="row">{{ $key+1 }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->surname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phone }}</td>
<td>{{ $item->town }}</td>
<td>{{ $item->country }}</td>
<td>{{ $item->gender }}</td>
<td>{{ $item->status }}</td>
<td><a href="#editDirectory/{{ $item->id }}" data-item-id="{{ $item->id }} data-target="#editDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
<td><a href="#deleteDirectory{{ $item->id}}" data-toggle="modal" class="text-center"><img src="{{ asset('storage/admin/delete.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
@include('pages.admin.modals-admin.create.add-directory')
@include('pages.admin.modals-admin.edit.edit-directory')
@endsection
pages\admin\modals-admin\edit\edit-directory.blade.php
<div class="modal fade bd-example-modal-md" id="editDirectory" tabindex="-1" role="dialog" aria-labelledby="editDirectoryModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
{!! Form::open (['method' => 'POST', 'action' => ['DirectoriesController@update',$directories->id]]) !!}
{!! csrf_field() !!}
<div class="modal-header">
<h5 class="modal-title" id="editDirectoryModalLabel">Ažuriranje novog korisnika</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@include('pages.admin.forms-admin.edit.edit-directory')
</div>
{!! Form::hidden('_method','PUT')!!}
{!! Form::close() !!}
</div>
</div>
</div>
pages\admin\forms-admin\edit\edit-directory.blade.php
<div class="form-group has-feedback">
{{Form::label('name','Ime')}}
{{Form::text('name',$directory->name, ['class' => 'form-control','placeholder' => 'Upišite ime'])}}
</div>
<div class="form-group">
{{Form::label('surname','Prezime')}}
{{Form::text('surname',$directory->surname, ['class' => 'form-control','placeholder' => 'Upišite prezime'])}}
</div>
<div class="form-group">
{{Form::label('email','Email')}}
{{Form::email('email',$directory->email, ['class' => 'form-control','placeholder' => '[email protected]'])}}
</div>
<div class="form-group">
{{Form::label('phone','Telefon')}}
{{Form::number('phone',$directory->phone, ['class' => 'form-control','placeholder' => '38591222333'])}}
</div>
<div class="form-group">
{{Form::label('town','Grad')}}
{{Form::text('town',$directory->town, ['class' => 'form-control','placeholder' => 'Upiši grad'])}}
</div>
<div class="form-group">
{{Form::label('country','Država')}}
{{Form::text('country',$directory->country, ['class' => 'form-control','placeholder' => 'Upiši državu'])}}
</div>
<div class="form-group">
{{Form::label('gender','Spol')}}
{{Form::select('gender', $genders,$directory->gender, ['class' => 'form-control'])}}
</div>
<div class="form-group">
{{Form::label('status','Status')}}
{{Form::select('status', $statuses,$directory->status, ['class' => 'form-control'])}}
</div>
<div class="modal-footer">
{{Form::submit('Spasi',['class'=> 'btn btn-primary'])}}
<button type="button" class="btn btn-secondary" data-dismiss="modal">Zatvoriti</button>
</div>
Error is Trying to get property 'id' of non-object
Level 1
it's not solved yet. I have an error. I put wrong button.
Level 122
why an error now? have you changed the code? what's the error?
Level 1
Error is: Trying to get property 'id' of non-object
I put in directory.blade.php this:
@include('pages.admin.modals-admin.edit.edit-directory')
and
<td><a href="#editDirectory/{{ $item->id }}" data-item-id="{{ $item->id }} data-target="#editDirectory" data-toggle="modal"><img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/></a></td>
Level 67
Probably vecause you're doing this
@foreach($directories as $key => $item)
@endforeach
@include('pages.admin.modals-admin.edit.edit-directory')
$item only exists inside that loop or will only ever be the last value from the loop.
Level 122
as @Cronix said but i think its $directories->id that is failing in the modal
Level 1
I saw it ($directories->id) here:
https://www.youtube.com/watch?v=PAP8IS_ak6w&list=PLillGF-RfqbYhQsN5WMXy6VsDMKGadrJ-&index=8
Do I have to change it then? In what?
Thank you guys for your time...
Level 67
Did this modal ever work? I usually start out with the bare minimum (the button/link to open the modal, and a modal with no content, no data properties etc...just the bare minimum to get it working). Once that's working, THEN I start adding the complex stuff. I'd suggest that approach next time. As it is now you have so much stuff on here it's making it really hard to troubleshoot.
Code a little, test. No errors, add next thing. Test. Then do next little thing. Test. Don't just come up with 5 pages full of code without knowing things are working incrementally and then try to figure it out. Work in small steps. It's a LOT easier to discover your errors if you're continually testing as you're moving along.
1 like
Level 1
Ok, I'll try to find error... yes it works on ADD modal... it works great! A because of that I am confused. Why it won't work here in EDIT modal.
Btw it shows error here:
<?php echo Form::open (['method' => 'POST', 'action' => ['DirectoriesController@update',$directories->id]]);
Trying to get property 'id' of non-object
Level 122
because $directories is a collection not a single object ?
Why do you have this? the id needs to come from the clicked link.
1 like
Level 1
It works!! Thak you!! Again!! :) It shows. Now I have to save it.
Level 1
And just one more question. It doesn't fetch correct values in form. For all users shows data from user with id=1.
Here is my code:
Controller
public function edit($id)
{
$directories = Directory::find($id);
return view('pages.admin.directory')->with('directories',$directories);
}
Form
<div class="form-group has-feedback">
{{Form::label('name','Ime')}}
{{Form::text('name',$item->name, ['class' => 'form-control','placeholder' => 'Upišite ime'])}}
</div>
<div class="form-group">
{{Form::label('surname','Prezime')}}
{{Form::text('surname',$item->surname, ['class' => 'form-control','placeholder' => 'Upišite prezime'])}}
</div>
<div class="form-group">
{{Form::label('email','Email')}}
{{Form::email('email',$item->email, ['class' => 'form-control','placeholder' => '[email protected]'])}}
</div>
<div class="form-group">
{{Form::label('phone','Telefon')}}
{{Form::number('phone',$item->phone, ['class' => 'form-control','placeholder' => '38591222333'])}}
</div>
<div class="form-group">
{{Form::label('town','Grad')}}
{{Form::text('town',$item->town, ['class' => 'form-control','placeholder' => 'Upiši grad'])}}
</div>
<div class="form-group">
{{Form::label('country','Država')}}
{{Form::text('country',$item->country, ['class' => 'form-control','placeholder' => 'Upiši državu'])}}
</div>
<div class="form-group">
{{Form::label('gender','Spol')}}
{{Form::select('gender', $genders, $item->gender, ['class' => 'form-control'])}}
</div>
<div class="form-group">
{{Form::label('status','Status')}}
{{Form::select('status', $statuses, $item->status, ['class' => 'form-control'])}}
</div>
<div class="modal-footer">
{{Form::submit('Spasi',['class'=> 'btn btn-primary'])}}
<button type="button" class="btn btn-secondary" data-dismiss="modal">Zatvoriti</button>
</div>
Level 122
yep modals for this stuff is hard
you need to pass the entire item into the form. A common practice is to use ajax to populate the modal
Level 1
How he put values here without Ajax?
https://youtu.be/PAP8IS_ak6w?t=247
Just like that. Like I tried.
Level 67
That's pretty easy. Just create more data properties on the anchors that open the modal, and use the modals show.bs.modal event to capture them off the clicked button to populate the form in the modal with them just like the docs show. https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
Level 1
Hi! I tried what you said but it doesn't work? Can you check my code?
app.js
$('#editDirectory').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
//var recipient = button.data('item-id') // Extract info from data-* attributes
var id = button.data('id')
var name = button.data('name')
var surname = button.data('surname')
var phone = button.data('phone')
var email = button.data('email')
var town = button.data('town')
var country = button.data('country')
var gender = button.data('gender')
var status = button.data('status')
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('hidden[id="id"]').val(id)
modal.find('input[id="name"]').val(name)
modal.find('input[id="surname"]').val(surname)
modal.find('phone[id="phone"]').val(phone)
modal.find('email[id="email"]').val(email)
modal.find('input[id="town"]').val(town)
modal.find('input[id="country"]').val(country)
modal.find('select[id="gender"]').val(gender)
modal.find('select[id="status"]').val(status)
})
Level 122
have you assigned all the data- properties in the blade loop?
Any console errors?
Level 1
There is no console error. And in console shows right data. But in modal window 'Edit' not.
Here is my code:
<tbody class="text-center">
@foreach($directories as $key => $item)
<tr>
<td scope="row">{{ $key+1 }}</td>
<td>{{ $item->name }}</td>
<td>{{ $item->surname }}</td>
<td>{{ $item->email }}</td>
<td>{{ $item->phone }}</td>
<td>{{ $item->town }}</td>
<td>{{ $item->country }}</td>
<td>{{ $item->gender }}</td>
<td>{{ $item->status }}</td>
<td><a href="#editDirectory/{{ $item->id }}"
data-item-id="{{ $item->id }}"
data-name="{{ $item->name }}"
data-surname="{{ $item->surname }}"
data-email="{{ $item->email }}"
data-phone="{{ $item->phone }}"
data-town="{{ $item->town }}"
data-country="{{ $item->country }}"
data-gender="{{ $item->gender }}"
data-status="{{ $item->status }}"
data-target="#editDirectory" data-toggle="modal">
<img src="{{ asset('storage/admin/edit.png') }}" height=23 width=23 class="mx-auto d-block"/>
</a>
</td>
</tr>
@endforeach
</tbody>
Level 122
console log the data. Its all dependent on this var button = $(event.relatedTarget) picking up on the anchor link and getting access to the data attributes
Level 1
I tried to check it with console log but it doesn't show anything.
Level 1
I do almost the same thing with delete (without javascript) and it is the same problem. It shows only one user in every modal window. First id from table.
<div class="modal fade bd-example-modal-md" id="deleteDirectory" tabindex="-1" role="dialog" aria-labelledby="deleteDirectoryModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
{!! Form::open (['method' => 'POST', 'action' => ['DirectoriesController@destroy',$item->id]]) !!}
{!! csrf_field() !!}
<div class="modal-header">
<h5 class="modal-title" id="deleteDirectoryModalLabel">Brisanje učesnika </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
@include('pages.admin.forms-admin.delete.delete-directory')
</div>
{!! Form::hidden('_method','DELETE')!!}
{!! Form::close() !!}
</div>
</div>
</div>
Level 1
I didn't find solution for this yet. Can someone help me? Console log in app.js doesn't work. What's wrong?
Please or to participate in this conversation.