CODEWITHSUNDEEP
javascriptphpajaxlaravel
mafortis
mafortis

Reputation: 7128

update laravel database by ajax

Question

How can I update only 1 column of my table with Ajax using checkbox?

Explanation

I want to use checkbox and update my active column, the value will be either 1 or 0. If checked value is 1 otherwise 0.

Codes

html

<label class="switch">
  <input type="checkbox" data-name="active" data-id="{{ $courier->id }}">
  <span class="slider round"></span>
</label>

data-name is name of my column

data-id is my row id

controller function

public function Updatecourierstatus(Request $request) {
        try {
            $id = $request->input('id');
            $field = $request->input('name');

            $courier = Courier::findOrFail($id);
            $courier->{$field} = //must get 1 or 0 here;
            $courier->save();
        } catch (Exception $e) {
            return response($e->getMessage(), 400);
        }
        return response('', 200);
    }

route

Route::post('/Updatecourierstatus', 'CourierController@Updatecourierstatus')->name('Updatecourierstatus');
});

JavaScript

not sure how to handle this part!

UPDATE

My latest codes:

script

<script>
    $(function (){
        $.ajaxSetup({
          headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('label.switch input[type="checkbox"]').on('click', function (event) {
          $.post("{{route('Updatecourierstatus')}}", { 
            id: $(this).data("id"),
            name: $(this).data("name"),
            state: $(this).is(":checked") ? 0 : 1 // toggles
          }).done(function(data) {
              console.log(data)
          });
        });
    });
</script>

controller

public function Updatecourierstatus(Request $request) {
            try {
                $id = $request->input('id');
                $field = $request->input('name');
                $state = $request->input('state');

                $courier = Courier::findOrFail($id);
                $courier->{$field} = (int) $state;
                $courier->save();
            } catch (Exception $e) {
               return response($e->getMessage(), 400);
            }
            return response('', 200);
    }

html

<label class="switch">
  <input class="status" type="checkbox" data-name="active" data-id="{{ $courier->id }}" {{ $courier->active == '1' ? 'checked' : ''}}>
  <span class="slider round"></span>
</label>

Issues

  1. My switch buttons not working as expected, on for value 1 and off for value 0, the are always off.
  2. I added {{ $courier->active == '1' ? 'checked' : ''}} in order to get right on and off base on values in DB, but since then my values will not change in DB they stay on their current values and not get updated

FIXED

The issue was state: $(this).is(":checked") ? 0 : 1 as "What are the PHP operators “?” and “:” called and what do they do?" explained I had to use state: $(this).is(":checked") ? 1 : 0

Upvotes: 2

Views: 2964

Answers (3)

Onfire
Onfire

Reputation: 364

You can do this pretty easily using jquery:

$('input.checkbox').on('change', function(e) {
    $.ajax({
      type: "POST",
      url: url,
      data: {value: $(this).val(), id: $(this).data('id'), name: $(this).data('name')},
      success: function() {
        console.log('submitted')
      }
    });
});

Upvotes: 1

Lawrence Cherone
Lawrence Cherone

Reputation: 46602

I'm guessing the html which your showing is using a lib, you should check the lib for details, they might provide events which get fired which you can use.

If not, you could do it like the following and just send up an ajax request, when you toggle the value, from looking at code name looks arbitrary set, you should perhaps not do that in case someone sends up a moody column name.

Ok, so you could do an ajax request on click of the checkbox and get id and name from the data attributes.

<script>
    $(function (){
        $('label.switch input[type="checkbox"]').on('click', function (event) {
          $.post("/Updatecourierstatus", { 
            id: $(this).data("id"),
            name: $(this).data("name"),
            state: $(this).is(":checked") ? 0 : 1 // toggles
          }).done(function(data) {
              console.log(data)
          });
        });
    });
</script>

Then in your controller, just add that value:

public function Updatecourierstatus(Request $request) {
    try {
        $id = $request->input('id');
        $field = $request->input('name');
        $state = $request->input('state');

        $courier = Courier::findOrFail($id);
        $courier->{$field} = (int) $state;
        $courier->save();
    } catch (Exception $e) {
       return response($e->getMessage(), 400);
    }
    return response('', 200);
}

Upvotes: 3

hellowd
hellowd

Reputation: 315

You should commit a varible shows if the checkbox is checked with your ajax data param like id and name do.Then you can receive it in the controller and save it.

Upvotes: 1

Related Questions