I have succesfully created an application within Laravel which allows users to edit posts for a item. The current method is by redirecting user to different page where they are able to make changes. However to increase the user expirence I was planning to add 'modal' within the page. Meaning that editing posts will happen within the same page. This method for me partly works. In a aspect that the last or the latest post is only editable post. If I click on any of the posts it makes me only make changes to the latest post. Any help, suggestions or examples are trully appreciated.
Below I have attached my show.blade.php which shows the item infromation and posts.
<ul class="list-group">
#foreach ($car->reviews as $review)
<li class="list-group-item">
<strong>
Created by: {{ $review->user->name}} {{ $review->created_at->diffForHumans() }}:
<br>
Updated by: {{ $review->user->name}} {{ $review->updated_at->diffForHumans() }}:
</strong>
<a href="/reviews/{{ $review->id }}/edit" data-toggle="modal" data-target="#myModal1" >{{ $review->reviewbody }}</a>
<a style="float:right;" href="/reviews/{{$review->id}}/delete">Delete</a>
#endforeach
The Modal
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">TEST</button>
<!-- Modal -->
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="review-edit">
<div class="review-edit-block">
{{ $review->reviewbody }}
<form action="/reviews/{{$review->id}}" method="POST">
{{ csrf_field() }}
{{ method_field('patch') }}
<div class="form-group">
<textarea style="position:relative;left:10%;width:375px;"name="reviewbody" class="form-control">{{ $review->reviewbody }}</textarea>
</div>
<div>
<button type="submit" class="btn btn-primary">Update Review</button>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
If the modal is included after the foreach loop, the variable $review will still be set to the value of the last item in the array.
An option is to use Javascript to handle the clicked link, set the specific data into the modal fields and then make the modal visible.
Example
Related
I have a problem: I used a foreach to list a database collection with a button to open a modal in each one. The button works correctly, but the ID that passes into the modal does not. If the modal code is inside the foreach, in all options the first id always appears, if it is outside the foreach the last ID always appears.
<div class="row">
#if ($trainingphases == null)
<p>null</p>
#else
<div class="col-md-6">
<div class="card mt-1">
<div class="card-body">
<!-- right control icon -->
#foreach ($trainingphases as $trainingphase)
<div class="accordion" id="accordionRightIcon">
<div class="card ">
<div class="card-header header-elements-inline">
<h6 class="card-title ul-collapse__icon--size ul-collapse__right-icon mb-0">
<a data-toggle="collapse" class="text-default collapsed" href="#accordion-item-icon-right-{!!$trainingphase->id_trainingphases!!}"
aria-expanded="false">{!! $trainingphase->title !!}</a>
</h6>
</div>
<div id="accordion-item-icon-right-{!!$trainingphase->id_trainingphases!!}" class="collapse" data-parent="#accordionRightIcon" style="">
<div class="card-body">
<textarea class="ckeditor form-control" placeholder="teste" name="description">{{ $trainingphase->description }}</textarea>
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">editar {!! $trainingphase->title !!}</button>
</div>
</div>
</div>
#endforeach
<!-- /right control icon -->
</div>
</div>
</div>
#endif
</div>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<form method="POST" action="{{ route('create.trainingphase', array('id_trainings'=>$training->id_trainings)) }}">
#csrf
<h5 class="modal-title" id="exampleModalCenterTitle"><input type="text" class="form-control form-control-rounded" id="title" placeholder="{!! $trainingphase->title !!}" name="title"></h5>
</div>
<div class="modal-body">
<label for="descriptiom">Descrição</label>
<textarea class="ckeditor form-control" placeholder="teste" name="description">{{ $trainingphase->description }}</textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Explaination
This is the expected behaviour of a loop within PHP.
So your code will evaluate from top to bottom and within your #foreach loop you are essentially re-assigning the value of $trainingphase within the scope of the script.
Once the loop is finished, the value of $trainingphase is not unset so it will be whatever the last value was in the object you had just looped through.
Solution
Keep the modal code outside of the loop and try using data properties on the buttons you are using to open the modal to pass values into the modal itself.
Documentaion on this can be found here:
https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content
i want to get value id from my table or my db , when i tried to delete one of the row (one of the data). I tried to expand my endforeach and it's just make the html become so weird. Um for more explaining here is my images.
Images confirm modal
yeah i just want to confirm the user if it clicked the delete button it will show a modal "are you sure you want to delete this?".So, the problem is, i don't know how to get the value id when i clicked the next delete button from the seccond row delete button, delete button from the third row delete button, delete button from the fourth row delete button (if there is a row bellow it) and so on.
here is my modal code
Modal Delete
<div class="m-2">
<div class="modal fade h-50" id="modalDelete" tabindex="-1" role="dialog" aria-
labelledby="deleteModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModal">Change Department Status</h5>
</div>
<div class="modal-body">
<p id="question">Are You sure want to delete {{$ideaprogram[0]->showidea_id}}?</p>
</div>
<div class="modal-footer">
<a id="deleteData">
<button type="button" class="btn btn-success">Yes</button>
</a>
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
i'm just make the value of index $ideaprogram[0]->showidea_id like that. Using zero (0) the hardcode. for example if i want to delete the next one (the next index) which is 1, how can i change it the value into 1 or change it the value into 2 if i want to delete the next index and so on. Basically i want the function more like when i clicked the delete button from some row, it will show the id program from that row. I'm using laravel and php at the moment. I don't know how to make it happen. Can someone help me?
Set data in modal on delete button click :
assuming that you are showing your data in table , then give attribute data-programid to delete button.
#foreach($programs as $program)
<tr>
<td>{{$program->name}}</td>
<td><button class="btn btn-danger deleteProgram" data-programid="{{$program->id}}">Delete</button></td>
</tr>
#endforeach
now we set data in modal and show modal, when user click on deleteProgram button class javascript
<script>
$(document).on('click','.deleteProgram',function(){
var programID=$(this).attr('data-programid');
$('#app_id').val(programID);
$('#question').append(programID+' ?');
$('#applicantDeleteModal').modal('show');
});
</script>
your modal:
<div id="applicantDeleteModal" class="modal modal-danger fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width:55%;">
<div class="modal-content">
<form action="{{route()}}" method="POST" class="remove-record-model">
{{ method_field('delete') }}
{{ csrf_field() }}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title text-center" id="custom-width-modalLabel">Change Department Status</h5>
</div>
<div class="modal-body">
<h4 id="question">Are You sure want to delete </h4>
<input type="hidden" name="applicant_id" id="app_id">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger waves-effect remove-data-from-delete-form">Delete</button>
</div>
</form>
</div>
</div>
</div>
I use like this all time.
<td>
<ul style="list-style-type: none;">
<li><i class="fa fa-edit"></i> Edit </li>
<li><i class="fa fa-trash"></i>
<button data-toggle="modal" data-target="#modal{{ $role->id }}">Delete</button>
</li>
</ul>
</td>
<!-- Modal -->
<div class="modal fade" id="modal{{ $role->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-danger">
<h5 class="modal-title" id="exampleModalLabel">You are about to delete the role {{ $role->title }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-danger">Once you delete, it cannot be undone.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<form method="POST" action="{{ url('') }}/en/admin/role/delete/{{ $role->id }}">
{{ method_field('delete') }}
{{ csrf_field() }}
<button type="submit" class="btn btn-danger">Confirm</button>
</form>
</div>
</div>
</div>
</div>
Actually i want an answer that give me a solutions more like A.A Noman since it will be good for a little line of code, so i tought it possible, but after trying the suggested solutions, and not give me that i want, so i think i can solve it like this.
script.js
function deleteModal(data){
document.getElementById('question').innerHTML = `Are you sure to delete ${data.showidea_id} ?`;
document.getElementById('deleteData').setAttribute('href',`/program_idea/${data.showidea_id}/deleteData`);
$('#modalDelete').modal('show');
}
and my HTML are like this
index.blade.php
#foreach($ideaprogram as $dataload)
<tr>
<td class="text-center">
<button type="button" class="btn btn-danger btn-sm deleteProgram" data-toggle="modal"
onclick="deleteModal({{$dataload}})">
<i class="far fa-trash-alt"></i>
</button>
</tr>
#endforeach
anyway thank you for everyone that answer my questions
Sorry if the title may be confusing,
I'm using Laraverl blade, and I have a foreach inside my table in order to show as many rows as database records.
#foreach ($terminals as $terminal)
<tr>
<td>{{ $terminal->id }}</td>
<td>{{ $terminal->serial }}</td>
#if ($terminal->state != 0)
<td>{!! GetTerminalState($terminal->state) !!}</td>
#else
<td>{!! GetTerminalState($terminal->state) !!}</td>
#endif
<td>
<a href="{{ route('showSpecificTerminal', $terminal->id) }}" class="btn btn-primary btn-sm">
<i class="fa fa-cc-visa" aria-hidden="true"></i> Terminal Details
</a>
</td>
</tr>
<!-- TODO: Move Modal outside of table?-->
#if ($terminal->state != 0)
<div class="modal fade" tabindex="-1" role="dialog" id="terminalModal--{{ $terminal->id }}">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Terminal (S/N: {{ $terminal->serial }})</h4>
</div>
<div class="modal-body">
<h3 class="text-center">In use by</h3>
<strong>ID: </strong>{{ $terminal->user->id }}<br>
<strong>Username: </strong>{{ $terminal->user->name }}<br>
<strong>Real Name: </strong>{{ $terminal->user->realname }}<br>
<strong>E-Mail: </strong>{{ $terminal->user->email }}<br>
<strong>OID: </strong>{{ $terminal->user->oid }}<br>
<a href="{{ route('showSpecificProfile', $terminal->user->id) }}" class="btn btn-block btn-primary btn-sm">
<i class="fa fa-user" aria-hidden="true"></i> Profile
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
#endif
#endforeach
As you can see, inside the ForEach I use my custom function GetTerminalState which echoes a bootstrap label ("Not in use" for when $terminal->state is 0, and "In use" for when it is not 0).
When it is 0 Zero it should generate a modal, which opens on click on the label. Inside this modal I want to use a table, but that doesnt work (Table inside of a table).
So I need to move the modal out of the table, but don't want to use another ForEach later on. Also, does anyone knows of a better method of dynamically generating modals per database record?
Use javascript to generate your modals.
Listen to click event on your labels, pass the DB record id to your javascript code and make an ajax call for the data that goes into the modal and render it.
I really want that my Modal shows something based on which button inside it i press, but i have no idea of how to do this.
Actually i tried to use if(isset($_POST['buttoname'])
but looks like this dowsn't work `
This is my modal , i just want to place the content on the right side (which is white ) , but actually it doesn't work.
Here's the code i tried to use
<!-- Modal Settings -->
<div class="modal fade" id="Settings" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">
<button type="button" class="close" data-dismiss="modal" style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px">×</button>
<h4 style="background-color: #d9534f;color:white !important;text-align: center;font-size: 30px"><span class="fa fa-gear"></span> Settings</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="list-group col-sm-1">
<form method="post" href="#">
<button type="submit" name="Profile" href="#" class="list-group-item">First </button>
<button type="submit" name="Logins" href="#" class="list-group-item">First </button>
<button type="submit" name="Security" href="#" class="list-group-item">First </button>
</form>
</div> <!-- List -->
</div>
<?php
if(isset($_POST['Profile'])){
echo' <div class="container">
<div class="col-sm-11">
<p> This is a test</p>
</div>
</div>';
}
?>
</div>
<div class="modal-footer" style="background-color: #f9f9f9;">
<button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</div>
</div>
</div>
</div>
<!-- Modal Settings -->
You need to actually post the button click to have it stored in the $_POST. So just leave the form action empty and it will post this form to the url you already are in.
But this will refresh the page so if you want to make it without refreshing you will need to use javascript.
For example if you are using jquery and you are if you are using bootstrap
In you html put some placeholder div instead of this php if:
</div> <!-- List -->
</div>
<div id="placeholder"></div>
</div>
And in your javascript code:
$("button[name='Profile']").click(function() {
$("#placeholder").html("YOUR HTML CODE");
});
I am doing project in laravel. I have multiple records in databse which I have displayed in laravel's blade file using foreach loop. Each record have pending button. Whenever user clicks on pending button it opens a html modal. I want that record id inside the modal but it always take first record id. My blade file looks like,
#foreach($providerData as $newprovider)
<h4>Name:{{$newprovider->name}}</h4>
<button class="btn btn-default" data-toggle="modal" data-target="#Pendingnote">Pending</button>
{!! Form::model( $newprovider->id ,['method' => 'PATCH','action'=>['superadminController#pendingProvider', $newprovider->id]]) !!}
<div class="modal fade" id="Pendingnote" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Note {!! $newprovider->id !!}</h4>
</div>
<div class="modal-body">
<input type="text" class="form-control" name="note" value="{{ old('note') }}">
</div>
<div class="modal-footer">
{!! Form::submit('Add', ['class' => 'btn btn-default']) !!}
</div>
</div>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
</div>
{!! Form::close() !!}
#endforeach
Whichever record is clicked, it always returns $newprovider->id as first record's id. I don't know where I am getting wrong. Please help and thanks in advance.
Do these things in order to get the modals work.
Edit the button to:
<button class="btn btn-default" data-toggle="modal" data-target="#Pendingnote{{$newprovider->id}}">Pending</button>
And the modal container to:
<div class="modal fade" id="Pendingnote{{$newprovider->id}}" role="dialog">
All modal-triggering buttons have data-target="#Pendingnote", which means they all trigger the first modal with that id they can find.
You could try for instance removing the data-target attribute and trigger the modal with a bit of jQuery, like:
$('button[data-toggle]').on('click', function () {
$(this).next('form').find('.modal').modal('show');
});
I would suggest anyway to have the forminside the modal instead. So the jQuery would be:
$('button[data-toggle]').on('click', function () {
$(this).next('.modal').modal('show');
});
Lastly, take a look at this: http://getbootstrap.com/javascript/#modals-related-target