How can display success message in popup? - ajax

Question

I am display success message in div of id=ajax-alert but my aim is to display this message in popup and after displaying this message in within some time popup will hide. I am confused how i am display success message in popup. How i am creating popup and how it is disable in some time?
View:
<div id="ajax-alert" class="alert" style="display:none"></div>
controller:
public function add_to_wishlist(Request $req)
{
$userId=Session::get('userid');
if(empty($userId))
{
return response()->json(['status'=> 1]);
}
else
{
$checkWishlist=DB::select('select * from wishlist where user_id=? && product_id=?',[$userId,$req->sub_id]);
if($checkWishlist)
{
DB::table('wishlist')->where('user_id',$userId)->where('product_id',$req->sub_id)->delete();
return response()->json(['status'=> 2,'message'=>'item is removed from wishlist']);
}
else
{
DB::table('wishlist')->insert(['user_id'=>$userId,'product_id'=>$req->sub_id]);
return response()->json(['status'=> 3,'message'=>'item is added in wishlist']);
}
}
}
script:
<script type="text/javascript">
$(document).ready(function(){
$('.sub').click(function(e) {
var sub_id=$(this).attr('data-id');
var input=$(this).prev();
e.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/add-to-wishlist') }}",
method: 'get',
data: {
sub_id: sub_id,
},
success: function(result){
if(result.status==1)
{
window.location.href="/login";
}
else if(result.status==2)
{
//$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"grey"});
$('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("add");
$('a[data-id="' + sub_id + '"] > i.whishstate').addClass("remove");
$('#ajax-alert').addClass('alert-success').show(function(){
$(this).html(result.message);
});
}
else if(result.status==3)
{
//$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"#FBA842"});
$('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("remove");
$('a[data-id="' + sub_id + '"] > i.whishstate').addClass("add");
$('#ajax-alert').addClass('alert-success').show(function(){
$(this).html(result.message);
});
}
}});
});
});
</script>
#endsection

Answer 1

in ajax you can not use $(this)
it's not getting you any errors or warning~, it just does not working
you can do this:
<script type="text/javascript">
$(document).ready(function(){
$('.sub').click(function(e) {
var this_element = $(this); //THIS LINE ADDED!
var sub_id=$(this).attr('data-id');
var input=$(this).prev();
e.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/add-to-wishlist') }}",
method: 'get',
data: {
sub_id: sub_id,
},
success: function(result){
if(result.status==1)
{
window.location.href="/login";
}
else if(result.status==2)
{
//$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"grey"});
$('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("add");
$('a[data-id="' + sub_id + '"] > i.whishstate').addClass("remove");
$('#ajax-alert').addClass('alert-success').show(function(){
this_element.html(result.message);
}); //THIS LINE CHANGED!
}
else if(result.status==3)
{
//$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"#FBA842"});
$('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("remove");
$('a[data-id="' + sub_id + '"] > i.whishstate').addClass("add");
$('#ajax-alert').addClass('alert-success').show(function(){
this_element.html(result.message);
}); //THIS LINE CHANGED TOO!
}
}});
});
});
</script>

Answer 2

To display a popup, you can use a Modal. You can use this basic modal to use as your popup:
<!-- Modal -->
<div id="myModal" class="modal fade" 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">
<p class = 'alert-text'></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.sub').click(function(e) {
var $this = $(this);
var sub_id= $this.attr('data-id');
var input= $this.prev();
e.preventDefault()
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/add-to-wishlist') }}",
method: 'get',
data: {
sub_id: sub_id,
},
success: function(result){
if(result.status == 1) {
window.location.href="/login";
}
else if(result.status == 2) {
//$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"grey"});
$('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("add");
$('a[data-id="' + sub_id + '"] > i.whishstate').addClass("remove");
$('.alert-text').html(result.message);
$('#myModal').modal('show');
}
else if(result.status == 3) {
//$('a[data-id="' + sub_id + '"] > i.whishstate').css({"color":"#FBA842"});
$('a[data-id="' + sub_id + '"] > i.whishstate').removeClass("remove");
$('a[data-id="' + sub_id + '"] > i.whishstate').addClass("add");
$('.alert-text').html(result.message);
$('#myModal').modal('show');
setTimeout(function(){
$('#myModal').modal('hide');
},3000); //It will hide modal
}
}});
});
});
</script>
If you want more custom popup then you can search for sweetAlert.

Answer 3

// install package
composer require brian2694/laravel-toastr
// then
php artisan vendor:publish
// use this css cdn
<link rel="stylesheet" href="http://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css">
// use this js cdn
<script src="http://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
{!! Toastr::message() !!}
<script>
#if($errors->any())
#foreach($errors->all() as $error)
toastr.error('{{ $error }}','Error',{
closeButton:true,
progressBar:true,
});
#endforeach
#endif
</script>
// Controller
use Brian2694\Toastr\Facades\Toastr;
public function store(Request $request)
{
$this->validate($request,[
'name' => 'required'
]);
$category = new Category();
$category->name = $request->name;
$category->slug = str_slug($request->name);
$category->save();
Toastr::success('Category Successfully Saved','Success');
return redirect()->route('admin.category.index');
}