How to pass data-id to modal - php

I send an id from the database to the button. I can't send the id to modal inpıt. I tried so hard, but I couldn't.
Modal:
<div class="modal fade" id="delete">
<div class="modal-dialog">
<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"><b>Deleting.</b></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" method="POST" action="advert_delete.php">
<input type=""class="id" name="id">
<div class="text-center">
<p>DELETE </p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat pull-left" data-dismiss="modal"><i class="fa fa-close"></i> Close</button>
<button type="submit" class="btn btn-danger btn-flat" name="delete_button"><i class="fa fa-trash"></i> Delete</button>
</div>
</form>
</div>
</div>
Buton and Script:
<button type='button' class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['id']."' ><i class='fa fa-trash'></i> Delete</button>
$(document).on('click', '.delete', function(e){
e.preventDefault();
var id = $(this).attr('data-id');
$("id").val(id);
$('#delete').modal('show');
});

The following input field:
<input class="id" name="id" id="id">
Can be called in the following ways:
$(".id") // Calling *any* element with class="id"
$("input[name=id]") //Calling *any* _input_ element that has name="id"
$("#id") // Calling the element with id="id"
In your particular example, your field doesn't include the id attribute, so you cannot use #id as a reference (Unless you add the id attribute of course). But the other two methods should work.

Related

Using a modal as template to edit/delete

I have some rows shown in a table (each one is a row of the related model database table). For each row I show a button that shows a modal asking for confirmation to delete it.
[https://i.stack.imgur.com/tSquD.png][1]
[https://i.stack.imgur.com/gGhSO.png][2]
The modal code is a blade template.
For a table with a single row, i have no problem. I can pass the id as variable to the modal. But i dont know how to send the selected one (logically, its including the modal with the last value of the $subnet var).
What would be the correct way to achieve this?
...
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td><button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet">Delete</button></td>
</tr>
#endforeach
#include('inc.modals.modal_deleteSubnet',['subnet' => $subnet])
...
<div class="modal fade" id="deleteSubnet" tabindex="-1" role="dialog" aria-labelledby="deleteSubnetLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="deleteSubnetLabel">Delete subnet</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form action="/subnets/{{$subnet->id}}" method="POST">
#csrf
#method('DELETE')
<p>Are you sure you want to delete this subnet ({{$subnet->name}})?<p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<span class="pull-right">
<input class="btn btn-primary" type="submit" value="Delete">
</span>
</form>
</div>
</div>
</div>
</div>
[1]: https://i.stack.imgur.com/tSquD.png
[2]: https://i.stack.imgur.com/gGhSO.png
In your form add a bind id
#foreach($subnets as $subnet)
<tr>
<td>{{$subnet->name}}</td>
<td>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}">Edit</button>
<button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}" data-toggle="modal" data-target="#deleteSubnet">Delete</button>
</td>
</tr>
#endforeach
Add a "id" in your form to get in jquery. <form method="POST id="formId">
$(document).ready(function () {
// you can add a better validation to button like a ID or class
$("button").each(function () {
$(this).onClick(function () {
var action = "/subnets/" + $(this).data().id;
$("#formId").attr("action", action);
});
});
});
You might wanna check this section on Bootstrap's website.
In your case this could be translated to:
Add data-id="{{ $subnet->id }}" to your button.
<button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet" data-id="{{ $subnet->id }}">Delete</button>
Add this jQuery snippet.
$('#deleteSubnet').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('form').attr('action', '/subnets/' + id)
})
Without any javascript workarounds:
<button ... data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
....
<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
....
</div>
Should work fine
<div class="modal fade" id="AddEditModal" role="dialog" ng-show="showEditModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button" ng-click="loadDetails()">
×
</button>
<h4 class="modal-title" ng-show="newType">Employee - New</h4>
<h4 class="modal-title" ng-hide="newType">Employee - Edit</h4>
</div>
<form class="form-horizontal" name="employeeForm" ng-submit="saveEmployee(detail,employeeForm.$valid)">
<div class="modal-body">
<p>
<div ng-repeat="error in errors">
<div class="alert alert-danger">
<button class="close" data-dismiss="alert">× </button>
<i class="fa fa-times-circle"></i>
{{error}}
</div>
</div>
</p>
<div class="row">
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine }">
<label class="col-sm-4 control-label" for="EmpCode"><b>Employee Code:</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="EmpCode" ng-model="detail.EmpCode" required>
<p ng-show="employeeForm.EmpCode.$invalid && !employeeForm.EmpCode.$pristine" class="help-block">Employee is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine }">
<label class="col-sm-4 control-label" for="FirstName"><b>First Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="FirstName" ng-model="detail.FirstName" required>
<p ng-show="employeeForm.FirstName.$invalid && !employeeForm.FirstName.$pristine" class="help-block">First Name is required.</p>
</div>
</div>
<div class="form-group required" ng-class="{ 'has-error' : employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine }">
<label class="col-sm-4 control-label" for="LastName"><b>Last Name :</b> </label>
<div class="col-sm-6">
<input class="form-control" type="text" name="LastName" ng-model="detail.LastName" required>
<p ng-show="employeeForm.LastName.$invalid && !employeeForm.LastName.$pristine" class="help-block">Last Name is required.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" ng-show="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save
</button>
<button class="btn btn-success" type="submit" ng-hide="newType" ng-disabled="employeeForm.$invalid">
<i class="fa fa-save"></i>
Save Changes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="removeFormDetails()"><i class="fa clip-close-3"></i>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--Delete Section-->
<div class="modal fade" id="deleteModal" role="dialog" ng-show="showDeleteModal">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Delete</h4>
</div>
<div class="modal-body">
<p>Do you really want to delete this User?</p>
</div>
<div class="modal-footer">
<button class="btn btn-bricky" type="button" ng-click="deleteEmployee(detail)">
<i class="fa fa-trash-o"></i>
Delete
</button>
<button class="btn btn-green" data-dismiss="modal" type="button" ng-click="removeFormDetails()">
<i class="fa clip-close-3"></i>
Close
</button>
</div>
</div>
</div>
</div>

Passing data-id from button to bootstrap modal

I try to pass the 'data-id' from the code below:
<a data-toggle="modal" data-id="10" class="passingID">
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editkaryawan">
<i class="fas fa-pencil-alt"></i> Edit</button>
</a>
To an input form values here:
<div class="modal-body">
<form method="post" action="tambahkaryawan.php">
<input type="hidden" class="form-control" name="idkl" id="idkl" value="">
</form>
</div>
This is the jquery i use:
<script>
$(document).on("click", ".passingID", function () {
var ids = $(this).data('id');
$(".modal-body #idkl").val( ids );
});
</script>
I usually use .attr for data-* attributes and it works.
$(this).attr('data-id');
it is quite simple to pass a value or ID check this out
with this button, I will trigger the Modal and also pass the DATA ID which is being generated dynamically from PHP you can also make this a title or any other info needed.
<button data-id="<? echo $note['id'] ?>" onclick="$('#dataid').val($(this).data('id')); $('#showmodal').modal('show');" >click me</button>
My modall is called showmodal as you can see
in the modal's body add the following code
<input type="text" name="dataid" id="dataid" value=""/>
this will show the value from the button.
I hope this helps someone
You can also try like this, by using Jquery to show modal poup
$(".passingID").click(function () {
var ids = $(this).attr('data-id');
$("#idkl").val( ids );
$('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg passingID" data-id="10">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<form method="post" action="tambahkaryawan.php">
<input type="text" class="form-control" name="idkl" id="idkl" value="">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

using ajax technique in laravel 5.7

I want to delete and update table row with modal by using ajax technique
in
laravel 5.7 but I m quite naive with ajax.
I would be appreciated if anyone helps and explain how ajax send/get data in
controller and is there any difference between using ajax in PHP and
laravel.?
this is my table
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Description</th>
</tr>
#foreach($project as $pro)
<tr>
<td>{{$pro->id}}</td>
<td>{{$pro->title}}</td>
<td>{{$pro->description}}</td>
<td>
<button class="btn btn-info"
data-toggle="modal" data-target="#edit">Edit</button>
<button class="btn btn-danger"
data-toggle="modal" data-target="#dlt">Delete</button>
</td>
<--------------------->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" action="">
#method('PATCH')
#csrf
<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" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title" >
</div>
<div class="form-group">
<label for="description">Description</label>
<input type="text" class="form-control"
name="description">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save
changes</button>
</div>
</form>
</div>
</div>
</div>
this is my modal code
<div class="modal fade" id="dlt" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<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" id="myModalLabel">Adding
Project</h4>
</div>
<form method="post" action="">
#method('delete')
#csrf
<div class="modal-body">
<p class="text-center">
Are you sure, you want to delete this.?
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">No, Cancel</button>
<button type="submit" class="btn btn-info">Yes,
Delete</button>
</div>
</form>
</div>
</div>
</div>
my route
Route::resource('projects', 'ProjectsController');
There no difference between using ajax in PHP and laravel.
html adjustment, add this meta inside your html head.
<meta name="csrf-token" content="{{ csrf_token() }}" />
Update your delete button and add a hidden field inside your delete modal body.
<button class="btn btn-danger btn-delete-project" data-toggle="modal" data-target="#dlt" data-project-id="{{ $pro->id}}">Delete</button>
<input type="hidden" name="project_id" id="project_id" value="">
<button type="submit" class="btn btn-info delete-project-confirm">Yes, Delete</button>
Get Your deleted row,
<tr data-row-id="{{ $pro->id }}">
</tr>
Define your ajax function, there are many defferent technique you can do it. A simple one below.
/**
* project delete confirm modal
*/
$(document).on('click', '.btn-delete-project', function (e) {
e.preventDefault();
var projectId = $(this).data('project-id');
$('#dlt #project_id').val(projectId);
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
/**
* ajax call
*/
// give your delete button id
$(document).on('click', '.delete-project-confirm', function (e) {
e.preventDefault();
var projectId = $('#dlt #project_id').val();
var deletedRow = $('tr[data-row-id="' + projectId + '"]');
$.ajax({
type: 'delete',
url: '/project/' + projectId,
success: function () {
$('#dlt').modal('toggle');
deletedRow.remove();
// toastr.success('Order Has Been Deleted Successfully.');
},
error: function(XMLHttpRequest) {
// toastr.error('Something Went Wrong !');
}
});
});
In your ProjectController destroy() method,
public function destroy($id)
{
// dd($id);
$project = Project::findOrFail($id);
// dd($project);
$project->delete();
}

update data dynamically using Modal in laravel

Tomorrow I am presenting my code in sprint. Everything was working fine until a few hours ago. I have a modal which pops up when a user clicks on Edit. It was giving the values according to id.
<div class="modal fade" id="myModal" 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>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div>
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
I am very upset and confused and don't know what to do.
Any help would highly be appreciated
Edit:
After reading the comments; i have understood that only one id would be updated every time. How could i change the id dynamically and update data of that specific id and each time it should get only clicked id.
Controller Function to update:
public function updateCommunity($id, CommunityRequest $request) {
$updateCommunity = Community::findOrFail($id);
$updateCommunity->update($request->all());
return back();
}
View Buttons:
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal">Edit</button>
| Delete</td>
</tr>
#endforeach
Update
I understand you have all the communities listed in a list somewhere outside this modal, each entry has an edit and delete button. Upon clicking edit button user should be presented a modal with a single form to edit community he clicked that button for. All this using a single modal element.
The fact that you don't want to use more than one modal means you want to generate less DOM in order to provide faster loading times, if that's the case then edit your view buttons.
#foreach ($Community as $communities)
<tr>
<td>{{$communities->community_name}}</td>
<td> <button type="button" class="btn btn-primary dropdown-toggle waves-effect waves-light" data-toggle="modal" data-target="#myModal" data-community="{{ json_encode($communities) }}">Edit</button>
| Delete</td>
</tr>
#endforeach
Notice new data-community attribute in edit button.
Now change your modal to provide a template for community edit form instead of providing a form for each community.
<div class="modal fade" id="myModal" 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>
<h4 class="modal-title">Edit: <span></span></h4>
</div>
<div class="modal-body">
<form class="form-group" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>
Now what you need to do it listen to edit community button click event (the one from view buttons), get data-community object from it, open a modal and fill with to fit edited community.
search for $('modal-title span') and .html() community name into it
search for $('#editCommunityForm') and change it's action to \update\{community_id}
search for $('button[form="editCommunityForm"]) and on click send form using ajax
There are many other ways to do this, better ways, it's just a simple example on how you can make it work.
Original answer
How come your submit button is outside of foreach but in an image it is displayed after each form? Also you are closing <div> tag in a loop that you opened before that loop.
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
</div> // You are closing a tag opened before foreach loop
<div class="modal-body">
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
#endforeach
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm">Update Community</button><br /><br />
</div>
After you fix this you can simply edit form id by adding $editCommunity->id to it, like so:
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
Then you can edit button's form parameter to match your form:
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button>
You should end up with this:
<div class="modal fade" id="myModal" 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">
#foreach($Community as $editCommunity)
<h4 class="modal-title">Edit: {!! $editCommunity->community_name !!}</h4>
<form class="form-group" action="/update/{{$editCommunity->id}}" method="post" id="editCommunityForm_{{$editCommunity->id}}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="text" name="community_name" class="form-control" value="{{$editCommunity->community_name}}">
</form>
<button class="btn btn-custom dropdown-toggle waves-effect waves-light" type="submit" form="editCommunityForm_{{$editCommunity->id}}">Update Community</button><br /><br />
#endforeach
</div>
<div class="modal-footer">
{{--<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>--}}
</div>
</div>
</div>
</div>

Dialog form in form action laravel 5.1

I have the following form action:
<form id="form_1" action="{{route("admin.pos.store")}}" method="POST" enctype="multipart/form-data" onsubmit="return CJForm_s(1)">
<!-- Transaction form -->
<!-- end Transaction -->
<!-- Dialog Payment -->
<button class="btn btn-info btn-block btn-lg" type="button" data-toggle = "modal" data-target="#payments" >Complete</button>
<div class="modal fade" id="payments" tabindex="-1" role="dialog" aria-labelledby="payments">
<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" id="method">Method Payment</h4>
</div>
<div class="modal-body">
<button class="btn btn-primary" type="button" id="debit">Debit</button>
<button class="btn btn-primary" type="button" id="kredit">Kredit</button>
<button class="btn btn-primary" type="button" id="transfer">Transfer</button>
<button class="btn btn-primary" type="button" id="cash">Cash</button>
<hr/>
<div id="content-payment"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" type="submit">Send</button>
</div>
</div>
</div>
</div>
<!-- End Dialog Payment -->
</form>
If I click on submit button in dialog it will store all transactions and input in dialog. That happens if submit in dialog nothing happen.
Can you give me a solution for this problem?
You've the type attribute for 2 times. Remove the type="button" in the send button.
<button class="btn btn-primary" type="submit" id="send_payment">Send</button>
You don't further post your JavaScript. I suppose that you use a dialog module, such as Bootstrap dialog. If it's a dialog in an iframe, or dynamic (injected) html, make sure that the events are binded to the elements.

Categories