Mixing
using ajax technique in laravel 5.7
2
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');
php jquery html ajax laravel
asked Jan 2 at 5:15
RezaReza
1616
add a comment |
2
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');
php jquery html ajax laravel
asked Jan 2 at 5:15
RezaReza
1616
add a comment |
2
2
2
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');
php jquery html ajax laravel
asked Jan 2 at 5:15
RezaReza
1616
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');
php jquery html ajax laravel
php jquery html ajax laravel
asked Jan 2 at 5:15
RezaReza
1616
asked Jan 2 at 5:15
RezaReza
1616
asked Jan 2 at 5:15
RezaReza
1616
asked Jan 2 at 5:15
RezaReza
1616
asked Jan 2 at 5:15
RezaReza
1616
1616
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
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();
}
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001528%2fusing-ajax-technique-in-laravel-5-7%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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();
}
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
add a comment |
0
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();
}
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
add a comment |
0
0
0
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();
}
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
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();
}
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
answered Jan 2 at 6:22
Md.Sukel AliMd.Sukel Ali
1,2181817
1,2181817
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001528%2fusing-ajax-technique-in-laravel-5-7%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
