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

Question

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?

Answer 1

I would have done 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 approva 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 out.

Happy Coding. Cheers..