How To Delete Data Using Ajax With Delete Message In Laravel

admin_img Posted By Bajarangi soft , Posted On 20-01-2021

We can delete data easily without refreshing a page using ajax and jquery with modal in laravel.

How To Delete Data Using Ajax With Delete Message In Laravel

Step 1:Create a table and model for deleting data.
 

class Contry extends Model
{
    public $table = 'product';
    protected $fillable = [
        'product_name', 'product_title',
    ];
}


Step: 2 Make a view page and create ajax for deleting data.
resources/views/welcome.blade.php

 

<html>
  <head>
   <title>Laravel </title>  
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
  </head>
<body><br>
<div id="alert" class="alert-success new-window" data-message="my message">
        </div>
<div class="container">
<div class="panel panel-primary">
 <div class="panel-heading">Products
 <button id="btn_add" name="btn_add" class="btn btn-default pull-right">Add New Product</button>
    </div>
      <div class="panel-body"> 
       <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Product Name</th>
            <th>Product Title</th>
            <th>Actions</th>
          </tr>   
         </thead>
         <tbody id="products-list" name="products-list">
           @foreach ($product as $product)
            <tr id="product">
             <td>{{$product->id}}</td>
             <td>{{$product->product_name}}</td>
             <td>{{$product->product_title}}</td>
              <td>
              <button class="btn btn-warning btn-detail open_modal btn-edit" value="{{$product->id}}">Edit</button>
              <button class="btn btn-danger btn-delete delete-product" value="{{$product->id}}">Delete</button>
              </td>
            </tr>
             @endforeach
        </tbody>
        </table>
       </div>
       </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Product</h4>
            </div>
            <div class="modal-body">
            <form id="frmProducts" name="frmProducts" class="form-horizontal" novalidate="">
                <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Product Name</label>
                   <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="product_name" name="product_name" placeholder="Product Name" value="">
                   </div>
                   </div>
                 <div class="form-group">
                 <label for="inputDetail" class="col-sm-3 control-label">Product Title</label>
                    <div class="col-sm-9">
                    <input type="text" class="form-control" id="product_title" name="product_title" placeholder="Product Title" value="">
                    </div>
                </div>
            </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="btn-save" value="add">Save</button>
            <input type="hidden" id="product_id" name="product_id" value="0">
            </div>
        </div>
      </div>
  </div>

  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
           <div class="modal-content">
             <div class="modal-header">
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Product</h4>
            </div>
            <div class="modal-body">
            <form id="frmProducts" name="frmProducts" class="form-horizontal" novalidate="">
                <div class="form-group error">
                 <label for="inputName" class="col-sm-3 control-label">Product Name</label>
                   <div class="col-sm-9">
                    <input type="text" class="form-control has-error" id="product_name1" name="product_name1" placeholder="Product Name" value="">
                   </div>
                   </div>
                 <div class="form-group">
                 <label for="inputDetail" class="col-sm-3 control-label">Product Title</label>
                    <div class="col-sm-9">
                    <input type="text" class="form-control" id="product_title1" name="product_title1" placeholder="Product Title" value="">
                    </div>
                </div>
            </form>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="btn-update" value="edit">Update</button>
            <input type="hidden" id="product_id" name="product_id" value="0">
            <input type="hidden" id="id" name="id" value="">
            </div>
        </div>
      </div>
  </div>

  <div id="confirmModal" 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">&times;</button>
                <h2 class="modal-title">Confirmation</h2>
            </div>
            <div class="modal-body">
                <h4 align="center" style="margin:0;">Are you sure you want to remove this data?</h4>
            </div>
            <div class="modal-footer">
             <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
</div>
    <meta name="_token" content="{!! csrf_token() !!}" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="{{asset('js/ajaxscript.js')}}"></script>
    <script type="text/javascript">
    $(document).ready(function(){

      $('#btn_add').click(function(){
        $('#myModal').modal('show');
      });

      $('#btn-save').on('click',function(event){
        var product_name = $("#product_name").val();
        var product_title = $("#product_title").val();
        event.preventDefault();
          $.ajax({
            url:"{{ url('store') }}",
            type:"POST",
            data:{"_token": "{{ csrf_token() }}",product_name:product_name,product_title,product_title} ,
            dataType:"json",
            success:function(data)
            {
                $('#myModal').modal('hide');  
                $('#alert').text('Data Inserted Successfully..');

                setTimeout(function() {
                $('#alert').fadeOut('slow');
                    }, 5000);
                window.location.href= "blog";

            },    
            error: function(data){
                 alert("Error")
            }
          });

      });


      $(document).on('click', '.btn-delete', function(){
        var id = $(this).val();

        $('#confirmModal').modal('show');
      

        $('#ok_button').click(function(){
          $.ajax({
           url:"destroy/"+id,
           beforeSend:function(){
            $('#ok_button').text('Deleting...');
           },
           success:function(data)
           {
              $('#confirmModal').modal('hide');
              $('#alert').text('Data Deleted Successfully..');
              window.location.href= "blog";
           }
          })
        });
      });

    });
    $(document).ready(function(){
        $('.btn-edit').click(function(){
          var id = $(this).val();
          var pis =   $('#id').val(id);
         
          $.ajax({
           url:"edit/"+id,
           dataType:"json",
           success:function(data){
            console.log(data);
            $('#product_name1').val(data.data.product_name);
            $('#product_title1').val(data.data.product_title);
            
            $('#editModal').modal('show');
           }
          })
        });

        $('#btn-update').on('click',function(event){
        var product_name = $("#product_name1").val();
        var product_title = $("#product_title1").val();
        var id = $("#id").val();
        // alert(product_name);
        // alert(product_name);
        event.preventDefault();
          $.ajax({
            url:"{{ url('update') }}"+'/'+id,
            method:"POST",
            data:{"_token": "{{ csrf_token() }}",product_name:product_name,product_title:product_title} ,
            dataType:"json",
            success:function(data)
            {
                $('#editModal').modal('hide');  
                $('#alert').text('Data Updated Successfully..');

                setTimeout(function() {
                $('#alert').fadeOut('slow');
                    }, 5000);
                
                window.location.href= "blog";
            },    
            error: function(data){
                 alert("Error")
            }
          });

      });
    });
  </script>
</body>
</html>


Step: 3 Create a function in controller for delete data from the model.
app/Http/Controllers/BlogController.php

 

public function destroy($id)
    {
        $data = Contry::where('id', $id)->delete(); 
        return response()->json($data);
    }


Step: 4 Make a route for connection with controller.
app/Http/routes.php

 

Route::get('destroy/{id}', 'BlogController@destroy');

Related Post