javascriptphpjqueryajaxlaravel-5.4

How to Toggle Boolean Value in a Database Using Jquery and ajax Laravel 5.4


I have created a button to approve a row in a table but everything seems to happen right only to check and no change in the mysql Database Boolean Column

My button

<td><button><a href="/getapprove"><span class="approva" name="appro">Approve</span></a></button></td>

Here is my script section

@section('scripts')
<script type="text/javascript">

$(document).ready(function(){
  $(".approva").click(function(e) {
    e.preventDefault();
    var id = $(this).closest('tr').attr('id');

    $.ajax({
            type:'POST',
            url:'/getapprove',
            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            data: {"id":id},
            success: function(data){

             console.log('changed successfully')


            }
        });
    });
});
</script>
@endsection

My route file

Route::post('/getapprove','AdminalterdetailController@approve')->name('approved');

Controller Function: 'condition' is my boolean column in the db

public function approve(Request $request){
$rpt = Fielddetails::findOrFail($request->id);
if ($rpt->condition == 1){
    $rpt->condition = 0;
} else {
    $rpt->condition = 1;
}

$rpt->save();

How can I get The above working?


Solution

  • I would have done it like this.

    The boolean column condition needs to be of type tinyInt in your database table.

    Fielddetails.php

    /**
     * The attributes that are mass assignable.
     *
     * @var  array
     */
    protected $fillable = [
        'condition' // <-- make sure you have added this in your model file
    ];
    

    routes/web.php

    Route::get('/getapprove/{id}','AdminalterdetailController@approve')
        ->name('approved');
    

    The {id} is the id of the table, that you wish to update.

    Controller

    /**
     * Approve the data of the given id.
     *
     * @param   integer  $id
     * @return  Your-Response-Or-Redirect
     */
    public function approve($id, Request $request)
    {
        $rpt = Fielddetails::findOrFail($id);
    
        if ($rpt->condition == true) {
            $rpt->update(['condition' => false]);
        }
    
        if ($rpt->condition == false) {
            $rpt->update(['condition' => true]);
        }
    
        // return your success response or redirect
    }
    

    jQuery

    <script type="text/javascript">
        $('body').on('click', '.approva', function(e) {
            e.preventDefault();
    
            $.ajax({
                type: 'GET',
                url: $(this).attr('href'),
                success: function(data) {
                    console.log(data);
                },
                error: function(err) {
                    console.log(err);
                },
            });
        });
    </script>
    

    Notice the change of I handle the click event whenever a user wants to click on the approval link.

    That is because I am making an assumption that there will be multiple records with the same link having different id.

    table.blade.php

    <td>
        <a href="{{ route('approved', $yourId) }}" class="button approva">
            Approve
        </a>
    </td>
    

    Replace $yourId with your actual record id.


    For referencing, you can view this question. It is about deleting the record using AJAX, unlike your question, but it will surely help you.