Question

Comment puis-je mettre à jour only 1 column de ma table avec Ajax en utilisant la case à cocher?

Explication

Je souhaite utiliser la case à cocher et mettre à jour ma colonne active, la valeur sera soit 1 ou 0. Si la valeur cochée est 1 sinon 0.

Codes

html

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

data-name est le nom de ma colonne

data-id est mon identifiant de ligne

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

vous ne savez pas comment gérer cette partie!

MISE À JOUR

Mes derniers 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>

Problèmes

  1. Mes boutons de commutation ne fonctionnent pas comme prévu, activés pour la valeur 1 et désactivés pour la valeur 0, les sont toujours désactivés.
  2. J'ai ajouté {{ $courier->active == '1' ? 'checked' : ''}} pour aller droit sur et en dehors de la base des valeurs dans DB, mais depuis lors mes valeurs ne changera pas dans DB, ils restent sur leurs valeurs actuelles et ne reçoivent pas mise à jour

FIXÉE

Le problème était state: $(this).is(":checked") ? 0 : 1 comme "Quels sont les opérateurs PHP"? "Et": "appelés et que font-ils?" a expliqué que je devais utiliser state: $(this).is(":checked") ? 1 : 0

2
mafortis 13 avril 2018 à 05:52

3 réponses

Meilleure réponse

Je suppose que le code HTML que votre présentation utilise une bibliothèque, vous devriez vérifier la bibliothèque pour plus de détails, ils pourraient fournir des événements qui se déclenchent que vous pouvez utiliser.

Sinon, vous pouvez le faire comme suit et envoyer simplement une demande ajax, lorsque vous basculez la valeur, de regarder le code name semble arbitraire, vous ne devriez peut-être pas le faire dans le cas où quelqu'un envoie une mauvaise humeur nom de colonne.

Ok, vous pouvez donc faire une demande ajax en cliquant sur la case à cocher et obtenir id et name des attributs de données.

<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>

Ensuite, dans votre contrôleur, ajoutez simplement cette valeur:

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);
}
3
Lawrence Cherone 13 avril 2018 à 03:25

Vous pouvez le faire assez facilement en utilisant 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')
      }
    });
});
1
Onfire 13 avril 2018 à 03:26

Vous devez valider une variable indiquant si la case à cocher est cochée avec votre paramètre de données ajax comme id et nom do. Ensuite, vous pouvez le recevoir dans le contrôleur et l'enregistrer.

1
hellowd 13 avril 2018 à 03:23