Я показываю сообщение об успехе в div of id = ajax -alert, но моя цель - показать это сообщение во всплывающем окне, и после отображения этого сообщения в течение некоторого времени всплывающее окно будет скрыто. Я запутался, как я показываю сообщение об успехе во всплывающем окне. Как я создаю всплывающее окно и как его отключить через некоторое время?
Вид:
<div id="ajax-alert" class="alert" style="display:none"></div>
контроллер:
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 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