Introduction to Ajax in Laravel
The Laravel Framework is one of the favorite frameworks for the developer’s community. The reasons are many. It is one of the most robust frameworks that allows the developer to create functionalities in the easiest of manners. The Laravel Framework through its expressive query command line provides myriad choices that help the programmer overcome the usual programming challenges. Being open-ended, it also is flexible enough to get integrated with third-party frameworks and build standalone functionalities. This is the reason why ecommerce site owners and developers swear by the Laravel Framework. It is an immensely scalable framework that is capable of heavy lifting as well as deal with the subtlety of finer changes.
One such expressive command-line query is the Ajax in Laravel. It stands for Asynchronous JavaScript and XML. It is a web application technique that allows the developer to utilize many web technologies to build applications based on the web.
Examples of Ajax in Laravel
Below is the example of Ajax in Laravel:
Code:
Route::resource('posts','PostsController');
Route::post('posts/changeStatus', array('as' => 'changeStatus', 'uses' => 'PostsController@changeStatus'));
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreatePostsTable extends Migration
{
public function up()
{
Schema::create('posts', function(Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->text('content');
$table->boolean('is_published')->default(false);
$table->timestamps();
});
}
public function down()
{
Schema::drop('demo_posts');
}
}PHP Code:
<?php namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $table = 'posts';
protected $fillable = ['title', 'content', 'is_published'];
public static function getExcerpt($str, $startPos = 0, $maxLength = 50) {
if(strlen($str) > $maxLength) {
$excerpt = substr($str, $startPos, $maxLength - 6);
$lastSpace = strrpos($excerpt, ' ');
$excerpt = substr($excerpt, 0, $lastSpace);
$excerpt .= ' [...]';
} else {
$excerpt = $str;
}
return $excerpt;
}
}
<?php namespace App\Http\Controllers;
use Illuminate\Support\Facades\Input;
use Illuminate\Http\Request;
use Validator;
use Response;
use App\Post;
use View;
class PostsController extends Controller
{
protected $rules =
[
'title' => 'required|min:2|max:32|regex:/^[a-z ,.\'-]+$/i',
'content' => 'required|min:2|max:128|regex:/^[a-z ,.\'-]+$/i'
];
public function index()
{
$posts = Post::all();
return view('posts.index', ['posts' => $posts]);
}
public function store(Request $request)
{
$validator = Validator::make(Input::all(), $this->rules);
if ($validator->fails()) {
return Response::json(array('errors' => $validator->getMessageBag()->toArray()));
} else {
$post = new Post();
$post->title = $request->title;
$post->content = $request->content;
$post->save();
return response()->json($post);
}
}
public function show($id)
{
$post = Post::findOrFail($id);
return view('post.show', ['post' => $post]);
}
public function update(Request $request, $id)
{
$validator = Validator::make(Input::all(), $this->rules);
if ($validator->fails()) {
return Response::json(array('errors' => $validator->getMessageBag()->toArray()));
} else {
$post = Post::findOrFail($id);
$post->title = $request->title;
$post->content = $request->content;
$post->save();
return response()->json($post);
}
}
public function destroy($id)
{
$post = Post::findOrFail($id);
$post->delete();
return response()->json($post);
}
public function changeStatus()
{
$id = Input::get('id');
$post = Post::findOrFail($id);
$post->is_published= !$post->is_published;
$post->save();
return response()->json($post);
}
}HTML and CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="{{ asset('images/favicon.jpg') }}">
<!-- CSFR token for ajax call -->
<meta name="_token" content="{{ csrf_token() }}"/>
<title>Manage Posts</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--icheck checkboxes -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/square/yellow.css">
<!--toastr notifications -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.panel-heading {
padding: 0;
}
.panel-heading ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.panel-heading li {
float: left;
border-right:1px solid #bbb;
display: block;
padding: 14px 16px;
text-align: center;
}
.panel-heading li:last-child:hover {
background-color: #ccc;
}
.panel-heading li:last-child {
border-right: none;
}
.panel-heading li a:hover {
text-decoration: none;
}
.table.table-bordered tbody td {
vertical-align: baseline;
}
/* icheck checkboxes */
.iradio_flat-yellow {
background: url(https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/square/yellow.png) no-repeat;
}
</style>
</head>
<body>
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">Manage Posts</h2>
<br />
<div class="panel panel-default">
<div class="panel-heading">
<ul>
<li><i class="fa fa-file-text-o"></i> All the current Posts</li>
<a href="#" class="add-modal"><li>Add a Post</li></a>
</ul>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover" id="postTable" style="visibility: hidden;">
<thead>
<tr>
<thvalign="middle">ID</th>
<th>Title</th>
<th>Content</th>
<th>Published?</th>
<th>Last updated</th>
<th>Actions</th>
</tr>
{{ csrf_field() }}
</thead>
<tbody>
@foreach($posts as $post)
<tr class="item{{$post->id}} @if($post->is_published) warning @endif">
<td>{{$post->id}}</td>
<td>{{$post->title}}</td>
<td>
{{App\Post::getExcerpt($post->content)}}
</td>
<td class="text-center"><input type="checkbox" class="published" data-id="{{$post->id}}" @if ($post->is_published) checked @endif></td>
<td>{{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $post->updated_at)->diffForHumans() }}</td>
<td>
<button class="show-modal btnbtn-success" data-id="{{$post->id}}" data-title="{{$post->title}}" data-content="{{$post->content}}">
<span class="glyphiconglyphicon-eye-open"></span> Show</button>
<button class="edit-modal btnbtn-info" data-id="{{$post->id}}" data-title="{{$post->title}}" data-content="{{$post->content}}">
<span class="glyphiconglyphicon-edit"></span> Edit</button>
<button class="delete-modal btnbtn-danger" data-id="{{$post->id}}" data-title="{{$post->title}}" data-content="{{$post->content}}">
<span class="glyphiconglyphicon-trash"></span> Delete</button>
</td>
</tr>
@endforeach
</tbody>
</table>
</div><!-- /.panel-body -->
</div><!-- /.panel panel-default -->
</div><!-- /.col-md-8 -->
<!-- Modal form to add a post -->
<div id="addModal" class="modal fade" 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"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title_add" autofocus>
<small>Min: 2, Max: 32, only text</small>
<p class="errorTitle text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="content">Content:</label>
<div class="col-sm-10">
<textarea class="form-control" id="content_add" cols="40" rows="5"></textarea>
<small>Min: 2, Max: 128, only text</small>
<p class="errorContent text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btnbtn-success add" data-dismiss="modal">
<span id="" class='glyphiconglyphicon-check'></span> Add
</button>
<button type="button" class="btnbtn-warning" data-dismiss="modal">
<span class='glyphiconglyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>Modal form to show a post:
<div id="showModal" class="modal fade" 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"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">ID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_show" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="title_show" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="content">Content:</label>
<div class="col-sm-10">
<textarea class="form-control" id="content_show" cols="40" rows="5" disabled></textarea>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btnbtn-warning" data-dismiss="modal">
<span class='glyphiconglyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>Modal form to edit a form:
<div id="editModal" class="modal fade" 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"></h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">ID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_edit" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="title_edit" autofocus>
<p class="errorTitle text-center alert alert-danger hidden"></p>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="content">Content:</label>
<div class="col-sm-10">
<textarea class="form-control" id="content_edit" cols="40" rows="5"></textarea>
<p class="errorContent text-center alert alert-danger hidden"></p>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btnbtn-primary edit" data-dismiss="modal">
<span class='glyphiconglyphicon-check'></span> Edit
</button>
<button type="button" class="btnbtn-warning" data-dismiss="modal">
<span class='glyphiconglyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>Modal form to delete a form:
<div id="deleteModal" class="modal fade" 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"></h4>
</div>
<div class="modal-body">
<h3 class="text-center">Are you sure you want to delete the following post?</h3>
<br />
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="id">ID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="id_delete" disabled>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="title">Title:</label>
<div class="col-sm-10">
<input type="name" class="form-control" id="title_delete" disabled>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btnbtn-danger delete" data-dismiss="modal">
<span id="" class='glyphiconglyphicon-trash'></span> Delete
</button>
<button type="button" class="btnbtn-warning" data-dismiss="modal">
<span class='glyphiconglyphicon-remove'></span> Close
</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<!-- Bootstrap JavaScript -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
<!--toastr notifications -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<!--icheck checkboxes -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>
<!-- Delay table load until everything else is loaded -->
<script>
$(window).load(function(){
$('#postTable').removeAttr('style');
})
</script>
<script>
$(document).ready(function(){
$('.published').iCheck({
checkboxClass: 'icheckbox_square-yellow',
radioClass: 'iradio_square-yellow',
increaseArea: '20%'
});
$('.published').on('ifClicked', function(event){
id = $(this).data('id');
$.ajax({
type: 'POST',
url: "{{ URL::route('changeStatus') }}",
data: {
'_token': $('input[name=_token]').val(),
'id': id
},
success: function(data) {
// empty
},
});
});
$('.published').on('ifToggled', function(event) {
$(this).closest('tr').toggleClass('warning');
});
});
</script>
<!-- AJAX CRUD operations -->
<script type="text/javascript">
// add a new post
$(document).on('click', '.add-modal', function() {
$('.modal-title').text('Add');
$('#addModal').modal('show');
});
$('.modal-footer').on('click', '.add', function() {
$.ajax({
type: 'POST',
url: 'posts',
data: {
'_token': $('input[name=_token]').val(),
'title': $('#title_add').val(),
'content': $('#content_add').val()
},
success: function(data) {
$('.errorTitle').addClass('hidden');
$('.errorContent').addClass('hidden');
if ((data.errors)) {
setTimeout(function () {
$('#addModal').modal('show');
toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
}, 500);
if (data.errors.title) {
$('.errorTitle').removeClass('hidden');
$('.errorTitle').text(data.errors.title);
}
if (data.errors.content) {
$('.errorContent').removeClass('hidden');
$('.errorContent').text(data.errors.content);
}
} else {
toastr.success('Successfully added Post!', 'Success Alert', {timeOut: 5000});
$('#postTable').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.content + "</td><td class='text-center'><input type='checkbox' class='new_published' data-id='" + data.id + " '></td><td>Right now</td><td><button class='show-modal btnbtn-success' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphiconglyphicon-eye-open'></span> Show</button><button class='edit-modal btnbtn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphiconglyphicon-edit'></span> Edit</button><button class='delete-modal btnbtn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphiconglyphicon-trash'></span> Delete</button></td></tr>");
$('.new_published').iCheck({
checkboxClass: 'icheckbox_square-yellow',
radioClass: 'iradio_square-yellow',
increaseArea: '20%'
});
$('.new_published').on('ifToggled', function(event){
$(this).closest('tr').toggleClass('warning');
});
$('.new_published').on('ifChanged', function(event){
id = $(this).data('id');
$.ajax({
type: 'POST',
url: "{{ URL::route('changeStatus') }}",
data: {
'_token': $('input[name=_token]').val(),
'id': id
},
success: function(data) {
// empty
},
});
});
}
},
});
});
// Show a post
$(document).on('click', '.show-modal', function() {
$('.modal-title').text('Show');
$('#id_show').val($(this).data('id'));
$('#title_show').val($(this).data('title'));
$('#content_show').val($(this).data('content'));
$('#showModal').modal('show');
});
// Edit a post
$(document).on('click', '.edit-modal', function() {
$('.modal-title').text('Edit');
$('#id_edit').val($(this).data('id'));
$('#title_edit').val($(this).data('title'));
$('#content_edit').val($(this).data('content'));
id = $('#id_edit').val();
$('#editModal').modal('show');
});
$('.modal-footer').on('click', '.edit', function() {
$.ajax({
type: 'PUT',
url: 'posts/' + id,
data: {
'_token': $('input[name=_token]').val(),
'id': $("#id_edit").val(),
'title': $('#title_edit').val(),
'content': $('#content_edit').val()
},
success: function(data) {
$('.errorTitle').addClass('hidden');
$('.errorContent').addClass('hidden');
if ((data.errors)) {
setTimeout(function () {
$('#editModal').modal('show');
toastr.error('Validation error!', 'Error Alert', {timeOut: 5000});
}, 500);
if (data.errors.title) {
$('.errorTitle').removeClass('hidden');
$('.errorTitle').text(data.errors.title);
}
if (data.errors.content) {
$('.errorContent').removeClass('hidden');
$('.errorContent').text(data.errors.content);
}
} else {
toastr.success('Successfully updated Post!', 'Success Alert', {timeOut: 5000});
$('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.title + "</td><td>" + data.content + "</td><td class='text-center'><input type='checkbox' class='edit_published' data-id='" + data.id + "'></td><td>Right now</td><td><button class='show-modal btnbtn-success' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphiconglyphicon-eye-open'></span> Show</button><button class='edit-modal btnbtn-info' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphiconglyphicon-edit'></span> Edit</button><button class='delete-modal btnbtn-danger' data-id='" + data.id + "' data-title='" + data.title + "' data-content='" + data.content + "'><span class='glyphiconglyphicon-trash'></span> Delete</button></td></tr>");
if (data.is_published) {
$('.edit_published').prop('checked', true);
$('.edit_published').closest('tr').addClass('warning');
}
$('.edit_published').iCheck({
checkboxClass: 'icheckbox_square-yellow',
radioClass: 'iradio_square-yellow',
increaseArea: '20%'
});
$('.edit_published').on('ifToggled', function(event) {
$(this).closest('tr').toggleClass('warning');
});
$('.edit_published').on('ifChanged', function(event){
id = $(this).data('id');
$.ajax({
type: 'POST',
url: "{{ URL::route('changeStatus') }}",
data: {
'_token': $('input[name=_token]').val(),
'id': id
},
success: function(data) {
// empty
},
});
});
}
}
});
});
// delete a post
$(document).on('click', '.delete-modal', function() {
$('.modal-title').text('Delete');
$('#id_delete').val($(this).data('id'));
$('#title_delete').val($(this).data('title'));
$('#deleteModal').modal('show');
id = $('#id_delete').val();
});
$('.modal-footer').on('click', '.delete', function() {
$.ajax({
type: 'DELETE',
url: 'posts/' + id,
data: {
'_token': $('input[name=_token]').val(),
},
success: function(data) {
toastr.success('Successfully deleted Post!', 'Success Alert', {timeOut: 5000});
$('.item' + data['id']).remove();
}
});
});
</script>
</body>
</html>Output:
Laravel 5.5 Framework is:
Conclusion
With Ajax, one can create seemingly complex web functionalities in a more structured manner and in double-quick time. This is also one of the reasons why the Laravel framework is a programmer’s delight.
Recommended Article
We hope that this EDUCBA information on “Ajax in Laravel” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
