We Keep Coding

How to display a pop up notification laravel using ajax?

How to display a pop-up notification in admin side when a customer click an order?. Now its not getting the pop-up notification?.when inspect the values getting.
var audio = document.getElementById("myAudio");
function playAudio() {
audio.play();
}
function pauseAudio() {
audio.pause();
}
Ajax
<script>
setInterval(function () {
$.ajax({
url: '{{route('get-order-data')}}',
dataType: 'json',
success: function (response) {
let data = response.data;
if (data.new_order > 0) {
playAudio();
$('#popup-modal').appendTo("body").modal('show');
}
},
});
}, 1000);
Controller
public function order_data()
{
$new_order = DB::table('orders')->where(['checked' => 0])->count();
return response()->json([
'success' => 1,
'data' => ['new_order' => $new_order]
]);
}
pop up code
<div class="modal" id="popup-modal">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-12">
<center>
<h2 style="color: rgba(96,96,96,0.68)">
<i class="tio-shopping-cart-outlined"></i> You have new order, Check Please.
</h2>
<hr>
</center>
</div>
</div>
</div>
</div>
</div>

Ajax
<script>
$(document).ready(function(){
setInterval(function () {
$.ajax({
url: '{{route('get-order-data')}}',
type: 'GET',
dataType: 'json',
success: function (response) {
$.each(response.new_order, function (key, value) {
if (value.new_order > 0) {
playAudio();
$('#popup-modal').modal('show');
}
});
}
});
}, 1000);
});
</script>
Controller
public function order_data()
{
$data = DB::table('orders')->where('checked', 0)->get();
$count = $data->count();
$res['new_order'] = array([
'success' => 1,
'new_order' => $count
]);
return response()->json($res);
}

You are displaying the popup through modal window. You can trigger the modal window through javascript. I hope the below code will be useful for you. Try this code in jsFiddle with jQuery enabled. Append the javascript code inside the ajax code where you need to display the notification.
$('.btn').click(function () {
$("#myModal").modal('show');
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="myModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button class="btn">
Submit
</button>

Bootstrap Modal popup not showing on Index page

Hi i have a ajax call wherebey when i click a loacation on a loaded map it shows my modal popup when a user is logged in,but when a user is not authorized/not logged into the app it's suppose to jump to the error: part in ajax and display a simple modal popup but it's not showing rather in dev tools "Failed to load resource: the server responded with a status of 401 ()" and the pop up is not displayed,i tried redirecting to a random page on error: part and it successfully took me to the page but simple modal is failing to show,i tried all sources but nothing assisted,what i require is when a user clicks the location when they are not logged in to display a simple modal showing them a message that they first have to login.could you assist please,Thanks you.
here is my html
<!-- Modal -->
<div class="modal fade" id="authorisationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" id="authcontent">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</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>
</div>
</div>
</div>
here is my ajax call
$.ajax({
type: "GET",
url: "/GetOrchardLocation/" + id,
success: function (res) {
console.log(res);
if (res != null) {
$.ajax({
type: "GET",
url: "/Home/ShowWeatherPop?locationId=" + res.id + "&page=" + jumpDays,
success: function (res) {
$("#weatherPopupDiv").html(res);
showMap(regionName);
},//works fine until here
The problem is this part
error: $('#authorisationModal').on('shown.bs.modal', function () {
$('#authcontent').trigger('focus')
// this below works fine and redirects to the page for example
//window.location.replace("/Home/AccessDenied");
})
})
}
}
})
} else {
$.ajax({
type: "GET",
url: "/Home/ShowWeatherPop?locationId=" + locationId + "&page=" + jumpDays,
success: function (res) {
$("#weatherPopupDiv").html(res);
showMap(regionName);
},
error: $('#authorisationModal').on('shown.bs.modal', function () {
$('#authcontent').trigger('focus')
})
})
}

There are two mistakes.
First, you need to pass a function(){} in your error method.
Second, if you want to show a modal, you need to use $("#authorisationModal").modal("show"); instead.
const id = 1;
$.ajax({
type: "GET",
url: "/GetOrchardLocation/" + id,
success: function (res) {
console.log(res);
if (res != null) {
$.ajax({
type: "GET",
url: "/Home/ShowWeatherPop?locationId=" + res.id + "&page=" + jumpDays,
success: function (res) {
$("#weatherPopupDiv").html(res);
showMap(regionName);
},
error: function () {
console.log("error1");
$("#authorisationModal").modal("show");
},
});
}
},
error: function () {
console.log("error2");
$("#authorisationModal").modal("show");
},
});
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div
class="modal fade"
id="authorisationModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content" id="authcontent">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">...</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>
</div>
</div>
</div>

image show in modal by croppie.js library

I am using croppie.js library to crop a image in modal and save via ajax in database.
It is working when input type file. But do not need it after click on file type. I have an img tag with src and when I click on this image then related image should be in modal and I can crop image.
My img tag is:
<img src="pic1.jpg" id="profilenewpic" width="auto" height="140px" />
When I click on this image then my croppie libraray should work.
<script type="text/javascript">
// start profile crop
$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:230,
height:230,
type:'square' //circle
},
boundary:{
width:300,
height:300
}
});
$('#profilenewpic').on('click', function(){
var reader = new FileReader();
reader.onload = function (event) {
$image_crop.croppie('bind', {
url: event.target.result
}).then(function(){
console.log(event.target.result);
});
}
reader.readAsDataURL(this.files[0]);
$('#uploadimageModal').modal('show');
});
$('.crop_image').click(function(event){
$image_crop.croppie('result', {
type: 'canvas',
size: 'viewport'
}).then(function(response){
$.ajax({
url:"../../upload.php",
type: "POST",
data:{"image": response},
success:function(data)
{
$('#uploadimageModal').modal('hide');
$('#profile_id').hide();
$('#show_image').attr('src', data);
$('#show_image').show();
}
});
})
});
});
// end profile crop
</script>
My modal is:
<div id="uploadimageModal" class="modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-8 text-center">
<div id="image_demo" style="width:350px; margin-top:30px"></div>
</div>
<div class="col-md-4" style="padding-top:30px;">
<br />
<br />
<br/>
<button class="btn btn-success crop_image">Crop & Upload Image</button>
</div>
</div>
</div>
</div>
</div>
</div>

Alert Box to show when error occur

I am looking to implement the bootstrap alert boxes, for when I have a concurrency error on a page. Currently this is how the Controller is setup:

I would do something like this with sweetalert2:
https://jsfiddle.net/x07g89h9/
or with bootstrap
https://jsfiddle.net/mmq27s86/2/
HTML
declare bootstrap modal
<div id="myModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Errors</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul id="errors">
</ul>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary">Close</button>
</div>
</div>
</div>
</div>
JS
function showModal(errors){
var $msg = $("#errors");
$msg.empty();
for(var i=0; i<result.errors.length; i++){
$msg.append("<li>" + errors[i] + "</li>");
}
$('#myModal').modal();
}
$.ajax({
url: 'any...',
data: JSON.stringify(model),
type: 'POST',
cache: false,
contentType: 'application/json',
success: function (result) {
// in case of error
if(result.ChangeStatus !== "Success"){
showModal(result.errors);
}
},
error: function () {
$('#errorContainer').show();
$('#errorMessage').html('There was a server error, please contact the support desk on (+44) 0207 099 5991.');
}
});
});

Check this or this.
Articles are too long to report whole code here.

Laravel 4 validation in bootstrap modal

I'm a newbie to Laravel 4, and I'm trying to get a form validation in bootstrap modal.
My modal have a form with a text input and a submit button, and I want that when the validation fails, the modal show me the error.
But the modal, after the validation and the page refresh, is closed.
Here is the code from the controller and the view:
Controller code:
public function postAvatar()
{
$avatar_rules = array(
'avatar_src' => 'url',
);
$validator = Validator::make(Input::all(), $avatar_rules);
$validator->setAttributeNames(User::$names_attr);
if ($validator->passes())
{
$avatar_src = (Input::get('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
$user = User::find(Auth::id());
$user->avatar_src = $avatar_src;
if ($user){
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
}
return Redirect::to('dashboard')->withError("Error: an error has occurred.");
}
return Redirect::back()->withErrors($validator);
}
View code:
<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
</div>
<div class="modal-body">
<h4><span class="label label-info">Current avatar</span></h4>
<img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">
<div class="divider"></div>
<h4><span class="label label-info">New avatar</span></h4>
{{ Form::open(array('url' => 'dashboard/avatar', 'method'=>'post', 'role'=>'form')) }}
<ul>
#foreach($errors->all() as $error)
<div class="alert alert-danger" role="alert">{{ $error }}</div>
#endforeach
</ul>
<div class="form-group">
<label for="avatar_src" class="control-label">Link avatar</label>
<input type="text" name="avatar_src" class="form-control" id="avatar_src" placeholder="Link of avatar image url">
</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">Update</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
How can I resolve ?
Thanks.
SOLVED:
Controller code:
public function postAvatar()
{
$avatar_rules = array(
'avatar_src' => 'url',
);
$validator = Validator::make(Input::all(), $avatar_rules);
$validator->setAttributeNames(User::$names_attr);
if ($validator->passes())
{
$avatar_src = (Input::has('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
$user = User::find(Auth::id());
$user->avatar_src = $avatar_src;
if ($user->save()){
if(Request::ajax()){
return Response::json(array('success' => true));
}
}
return Redirect::to('dashboard')->withError("Error: an error has occurred.");
}
return Response::json(array('errors' => $validator->errors()->toArray()));
}
View code:
<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
</div>
<div class="modal-body">
<h4><span class="label label-info">Current avatar</span></h4>
<img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">
<div class="divider"></div>
<h4><span class="label label-info">New avatar</span></h4>
{{ Form::open(array('url' => 'dashboard/avatar', 'id'=>'avatar_form', 'method'=>'post', 'role'=>'form')) }}
<div class="alert alert-danger avatar_alert" role="alert" style="display: none">
<ul></ul>
</div>
<ul>
</ul>
<div class="form-group">
<label for="avatar_src" class="control-label">Link avatar</label>
<input type="text" name="avatar_src" class="form-control s_tooltip" id="avatar_src" placeholder="Avatar image links">
</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">Update</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
Ajax:
<script>
$(document).on('submit', '#avatar_form', function(event){
var info = $('.avatar_alert');
event.preventDefault();
var data = { avatar_src: $("#avatar_src").val() }
$.ajax({
url: "/dashboard/avatar",
type: "POST",
data: data,
}).done(function(response) {
info.hide().find('ul').empty();
if(response.errors)
{
$.each(response.errors, function(index, error){
info.find('ul').append(error);
});
info.slideDown();
}
else if(response.success){
window.location.href = "/dashboard";
}
});
});
</script>

Your best bet would be to validate the form via AJAX to avoid the page reloading entirely. You would then check the response of your AJAX request for the presence of errors and show them inside the modal if they exist.
You could also add in client side validation to prevent the request being made until the rules are satisfied. I wouldn't recommend using this INSTEAD of server side validation but using it ASWELL as is normally quite desirable.
To accomplish this, you'd need to do something along these lines:
Javascript:
Catch submit event of your form and make an AJAX request.
$(document).on('submit', 'form', function(event){
event.preventDefault();
var data = { avatar_src: $("#avatar_src").val(); };
$.ajax({
url: "/dashboard/avatar",
data: data
type: "POST",
}).done(function(response) {
if(response.errors)
{
// Add error to Modal Body
}
else
{
// Show success message, close modal?
}
});
});
Backend:
Modify your controller method to detect if the current request is an AJAX request and if so, return the response in JSON instead of Redirecting. For example:
if(Request::ajax())
{
return Response::json(array('errors' => $validator->messages()));
}
else
{
return Redirect::back()->withErrors($validator);
}
I've not tested any of that code so might contain some typos/errors but hopefully this helps you!

I was facing same issue. After research on internet,I found that Laravel don't support withSuccess('success_msg') method.
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
Here is complete discussion on this topic:
https://github.com/laravel/framework/issues/906.
But you can handle this issue with this approach:-
- For Error message:-
[code has to be added in controller]
return Redirect::to('view')->withErrors('your error message.');
[code has to be added in view]
#if(isset($errors) && count($errors->all())>0)
<ul>
#foreach($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
#endif
- for succcess message:-
[code has to be added in controller]
$success_msg='your success message.';
Session::flash('successMsg', $success_msg);
return Redirect::to('view');
[code has to be added in view]
#if (Session::has('successMsg'))
{{ Session::get('successMsg') }}
#endif
This approach is working fine for me.
For better display of your errors you can use bootstrap css.