时间戳

首页 > 解决方案 > 如何在弹出窗口中显示成功消息？

ajax - 如何在弹出窗口中显示成功消息？

问题描述

我在 id=ajax-alert 的 div 中显示成功消息，但我的目标是在弹出窗口中显示此消息，并在一段时间内显示此消息后，弹出窗口将隐藏。我很困惑如何在弹出窗口中显示成功消息。我如何创建弹出窗口以及它如何在一段时间内被禁用？

看法：

<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

标签： ajaxlaravel

解决方案

// 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');
    }

推荐阅读