SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'status_member' cannot be null - sql

i have failed to save update data, the notification error message is SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'status_member' cannot be null (SQL: update daftar_pelanggans set alamat = gdsgzddgrrse, status_member = ?, daftar_pelanggans.updated_at = 2020-12-06 03:36:35 where id = 6)
this is the button edit
<button data-toggle="modal" data-target="#editModal-{{ $pelanggan->id }}" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i></button>
this is the modal view
#foreach($daftar_pelanggan as $pelanggan)
<div class="modal fade" id="editModal-{{ $pelanggan->id }}" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title mb-0" id="editModalLabel">Update Data Pelanggan</h5>
</div>
<div class="modal-body">
<!-- Card body -->
<form role="form" action="{{ route('daftar_pelanggan.update', $pelanggan->id) }}" method="POST" id="editForm">
#csrf
#method('PUT')
<!-- Input groups with icon -->
<div class="form-group row">
<label for="updateNamaPelanggan" class="col-md-2 col-form-label form-control-label">Nama</label>
<div class="col-md-10">
<input type="hidden" name="id" value="{{ $pelanggan->id }}">
<input class="form-control" type="nama" value="{{ $pelanggan->nama_pelanggan }}" name="updateNamaPelanggan" required >
</div>
</div>
<div class="form-group row">
<label for="updateAlamat" class="col-md-2 col-form-label form-control-label">Alamat</label>
<div class="col-md-10">
<input class="form-control" type="alamat" value="{{ $pelanggan->alamat }}" name="updateAlamat" required>
</div>
</div>
<div class="form-group row">
<label for="updateNoTelp" class="col-md-2 col-form-label form-control-label">No.Telp</label>
<div class="col-md-10">
<input class="form-control" type="notelp" value="{{ $pelanggan->no_telp }}" name="updateNoTelp" required>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<div class="form-group">
<label class="form-control-label" for="updatePoin">POIN</label>
<input type="text" class="form-control" value="{{ $pelanggan->poin }}" name="updatePoin">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-control-label" for="status_member">Kategori</label>
<!-- <h3>{{ $pelanggan->status_member }}</h3>-->
<select class="form-control" name="status_member" required="required">
<option value="silver" {{ $pelanggan->status_member === 'Silver' ? 'selected' : '' }} >Silver</option>
<option value="gold" {{ $pelanggan->status_member === 'Gold' ? 'selected' : '' }} >Gold</option>
<option value="diamond" {{ $pelanggan->status_member === 'Diamond' ? 'selected' : '' }} >Diamond</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-secondary" data-dismiss="modal">Reset</button>
<button type="submit" class="btn btn-primary">Update Data</button>
</div>
</form>
</div>
</div>
</div>
#endforeach
this is the route
Route::put('daftar_pelanggan/update/{id}', '\App\Http\Controllers\DaftarPelangganController#update')->name('daftar_pelanggan.update');
and this is the controller
public function update(Request $request, $id)
{
$update_pelanggan = DaftarPelanggan::find($id);
$update_pelanggan->nama_pelanggan = $request->updateNamaPelanggan;
$update_pelanggan->alamat = $request->updateAlamat;
$update_pelanggan->no_telp = $request->updateNoTelp;
$update_pelanggan->poin = $request->updatePoin;
$update_pelanggan->status_member = $request->updateKategori;
$update_pelanggan->save();
if($simpan){
Alert::success(' Berhasil Tambah data ', ' Silahkan dicek kembali');
}else{
Alert::error('data gagal disimpan ', ' Silahkan coba lagi');
}
return redirect()->back();}
what's wrong with this code ?

You have named the select control as status_member in the form while you are using $request->updateKategori in controller method/action while saving update data.
You can cross check by dd($request->all()) as first line of the update method and check which key value pairs are available as request data.
Change the update method like
public function update(Request $request, $id)
{
$update_pelanggan = DaftarPelanggan::findOrFail($id);
$update_pelanggan->nama_pelanggan = $request->updateNamaPelanggan;
$update_pelanggan->alamat = $request->updateAlamat;
$update_pelanggan->no_telp = $request->updateNoTelp;
$update_pelanggan->poin = $request->updatePoin;
//name of key $request->status_member must match name=status_member on select control in the form
$update_pelanggan->status_member = $request->status_member;
$update_pelanggan->save();
//------------- OR you can simply do ---------------------------//
//$update_pelanggam = DaftarPelanggan::findOrFail($id);
//$update_pelaggan->update($request->all();
//-------------------------------------------------------------//
if($simpan){
Alert::success(' Berhasil Tambah data ', ' Silahkan dicek kembali');
}else{
Alert::error('data gagal disimpan ', ' Silahkan coba lagi');
}
return redirect()->back();
}

Related

How to display validation summary below the input controls?

I have the following form:
<form asp-controller="Manage" asp-action="RemoveDetails" method="post" class="form-horizontal">
#if (Model.RequirePassword)
{
<div id="password-container">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" id="password" autocomplete="current-password" aria-required="true" />
<small>
<span asp-validation-for="Password" class="text-danger"></span>
</small>
</div>
</div>
</div>
}
<div class="col-6">
<hr class="mt-2 mb-3">
<button type="submit" class="btn btn-style-1 btn-danger">Confirm</button>
</div>
<div class="row">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
</div>
</form>
If I leave the password empty, a validation message (the model uses DataAnnonations) is displayed right below the control. This is fine.
If I enter the wrong password, the Post action validates it and adds an error to the ModelState. This error is displayed below the form.
Is it possible to display such model errors below the relevant controls?
Try this code in Controller: ModelState.AddModelError("Password", "validation summary error."); The error message won't display in <div asp-validation-summary="ModelOnly"></div>, but it can display error message in #Html.ValidationSummary(false, "", new { #class = "text-danger" }).
<form asp-controller="Home" asp-action="RemoveDetails" method="post" class="form-horizontal">
<div id="password-container">
<div class="col-md-6">
<div class="form-group">
<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" id="password" autocomplete="current-password" aria-required="true" />
<small>
#*<span asp-validation-for="Password" class="text-danger"></span>*#
#Html.ValidationSummary(false, "", new { #class = "text-danger" })
</small>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label asp-for="Description"></label>
<input asp-for="Description" class="form-control" id="description" autocomplete="current-password" aria-required="true" />
<small>
<span asp-validation-for="Description" class="text-danger"></span>
</small>
</div>
</div>
</div>
<div class="col-6">
<hr class="mt-2 mb-3">
<button type="submit" class="btn btn-style-1 btn-danger">Confirm</button>
</div>
<div class="row">
<div asp-validation-summary="ModelOnly"></div>
</div>
</form>
[HttpPost]
public IActionResult RemoveDetails(RemoveDetail rdl)
{
if(ModelState.IsValid)
{
var pwd = rdl.Password;
//do something here and find the password is wrong
//code below won't display error message in <div asp-validation-summary="ModelOnly" class="text-danger">
//but can display error message in #Html.ValidationSummary(false, "", new { #class = "text-danger" })
ModelState.AddModelError("Password", "validation summary error.");
return View(rdl);
}
return View(rdl);
}

Tiny Editor doesn't show on close of Bootstrap Popup

I'm using the TinyMCE Editor version 5.6.1. Whenever I load my popup for the first time, I get the following:
When I close the Popup and re-display it again, I get the following:
There are no errors in the console and loading the Popup is as plain as you can get it:
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is the code which calls the Modal
#{
ViewData["Title"] = "Product Administration";
}
<br />
<div class="modal" tabindex="-1" role="dialog" id="form-modal">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<div class="shadow-lg p-1 mb-1 bg-primary rounded d-flex">
<h5 class="text-white flex-grow-1">Product Administration ...</h5>
<div>
<a onclick="showInPopup('#Url.Action("AddEdit","Product",null,Context.Request.Scheme)','New Product')"
class="btn btn-success text-white">
<i class="fas fa-random"></i>New Product</a>
</div>
</div>
Here is the code for the Modal:
#model ProductEdit
#{
Layout = null;
}
<script>tinymce.init({
selector: 'textarea',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_css: '//www.tiny.cloud/css/codepen.min.css'
});</script>
<div class="row">
<div class="col-lg-12">
<form asp-action="AddEdit" asp-route-id="#Model.Id" onsubmit="return jQueryAjaxPost(this, RefreshMe, false);" autocomplete="off">
<input type="hidden" asp-for="#Model.Id" />
<div id="errValidation" class="alert alert-dismissible alert-danger" data-content="ok">
<button id="closeValidation" type="button" class="close">×</button>
<div id="errTitle" class="font-weight-bolder">Oh snap!</div>
<div id="errDetails">An Error Occured!</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.CategoryId" class="control-label"></label>
<select asp-for="#Model.CategoryId"
class="form-control"
asp-items="#(new SelectList(Model.ProductCategories,"Id","Display"))">
</select>
<span asp-validation-for="#Model.CategoryId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.SectionId" class="control-label"></label>
<select asp-for="#Model.SectionId"
class="form-control"
asp-items="#(new SelectList(Model.ProposalSections,"Id","Display"))">
</select>
<span asp-validation-for="#Model.SectionId" class="text-danger"></span>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<label asp-for="#Model.ManufacturerId" class="control-label"></label>
<select asp-for="#Model.ManufacturerId"
class="form-control"
asp-items="#(new SelectList(Model.Manufacturers,"Id","Display"))">
</select>
<span asp-validation-for="#Model.ManufacturerId" class="text-danger"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.InternalPartNumber" class="control-label"></label>
<input asp-for="#Model.InternalPartNumber" class="form-control"></>
<span asp-validation-for="#Model.InternalPartNumber" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group mb-2 has-warning has-feedback">
<label asp-for="#Model.ManufacturerPartNumber" class="control-label"></label>
<input asp-for="#Model.ManufacturerPartNumber" class="form-control"></>
<span asp-validation-for="#Model.ManufacturerPartNumber" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.Description" class="control-label"></label>
<input asp-for="#Model.Description" class="form-control" rows="2"></>
<span asp-validation-for="#Model.Description" class="text-danger"></span>
</div>
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.SellPrice" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.SellPrice" class="form-control"></>
</div>
<span asp-validation-for="#Model.SellPrice" class="text-danger"></span>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label asp-for="#Model.Cost" class="control-label"></label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-dollar-sign"></i>
</div>
</div>
<input asp-for="#Model.Cost" class="form-control"></>
</div>
<span asp-validation-for="#Model.Cost" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group">
<label asp-for="#Model.ProductWebsite" class="control-label"></label>
<input asp-for="#Model.ProductWebsite" class="form-control"></>
<span asp-validation-for="#Model.ProductWebsite" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#Model.Note" class="control-label"></label>
<textarea asp-for="#Model.Note" class="form-control" rows="5"></textarea>
<span asp-validation-for="#Model.Note" class="text-danger"></span>
</div>
<div class="d-flex">
<div class="form-group mr-2">
<input asp-for="#Model.Active" />
<label asp-for="#Model.Active" class="control-label text-success"></label>
</div>
<div><button type="submit" value="Save" class="btn btn-success mr-2">Save Changes</button></div>
<div><input type="reset" class="btn btn-warning"></></div>
</div>
</form>
</div>
</div>
<script>
$('#errValidation').hide();
$(function () {
$("#SectionId").chosen({ no_results_text: "Oops, Section not found!", disable_search_threshold: 4 });
$("#CategoryId").chosen({ no_results_text: "Oops, Category not found!" });
$("#ManufacturerId").chosen({ no_results_text: "Oops, Manufacturer not found!" });
});
$("#closeValidation").click(function () {
$("#errValidation").hide();
});
function RefreshMe() {
$('#products').DataTable().ajax.reload(null, false);
showSuccessToast('Product Saved', 'top-center');
}
</script>
The showInPopup method is the following:
showInPopup = (url, title) => {
$.ajax({
type: "GET",
url: url,
success: function (res) {
$('#form-modal .modal-body').html(res);
$('#form-modal .modal-title').html(title);
$('#form-modal').modal('show');
}
})
}
Any ideas about what might be happening? If I refresh the page it works again only for the first load.
Thanks.
--- Val
From the second pictures, the textare is not rendered by tinymce, because the html which ajax returned can not be rendered by tinymce. TinyMCE works when the page is building. So a better method is to use #Html.Partial to load the partial view (ProductEdit).
In the view Product Administration, change the modal body.
<div class="modal-header">
<h5 class="modal-title">#Context.Request.Scheme</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
#Html.Partial("addedit.cshtml",Model)
</div>
Change this javascript method.
var showInPopup = (url, title) => {
$('#form-modal').modal('show');
}
And move tinymce.init({ //... }) to this view Product Administration.
Then, TinyMCE will work well.

How to clear form after submit in vuejs

I am trying to empty the form after it submits form but I am unable to do this. Here is the code
<form class="form-horizontal" #submit.prevent="addtodirectory" id="form-directory">
<div class="model-body">
<div class="card-body">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input v-model="form.name" type="text" name="name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<textarea v-model="form.address" type="text" name="address"
class="form-control" :class="{ 'is-invalid': form.errors.has('address') }"></textarea>
<has-error :form="form" field="address"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Profession</label>
<div class="col-sm-10">
<input v-model="form.profession" type="text" name="profession"
class="form-control" :class="{ 'is-invalid': form.errors.has('profession') }">
<has-error :form="form" field="profession"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Contact Number</label>
<div class="col-sm-10">
<input v-model="form.contact_number" type="text" name="contact_number"
class="form-control" :class="{ 'is-invalid': form.errors.has('contact_number') }">
<has-error :form="form" field="contact_number"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">City</label>
<div class="col-sm-10">
<input v-model="form.city" type="text" name="city"
class="form-control" :class="{ 'is-invalid': form.errors.has('city') }">
<has-error :form="form" field="city"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">State</label>
<div class="col-sm-10">
<select v-model="form.state" type="text" name="state"
class="form-control" :class="{ 'is-invalid': form.errors.has('state') }">
<has-error :form="form" field="state"></has-error>
<option value="Rajasthan">Rajasthan</option>
<option value="Gujrat">Gujrat</option>
</select>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-success">Submit</button>
<button type="submit" class="btn btn-default float-right">Cancel</button>
</div>
<!-- /.card-footer -->
</div>
</form>
<script>
export default {
data() {
return {
news:{},
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
}
},
methods: { addtodirectory() {
this.$Progress.start();
this.form.post('api/addtodirectory');
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
$('#form-directory input[type="text"]').val('');
this.$Progress.finish();
}
}
I am using vform plugin to submit the form. Using Laravel as backend. The data is being submitted in database but I am not able to clear the form. please help in this regarding. Should I use jquery or javascript to clear the form? I tried different ways but I could not figure out the problem.
Simply empty your form object after form submit.
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
Well it was simple and I did following code for emptying the form.
addtodirectory(event) {
this.$Progress.start();
this.form.post('api/addtodirectory');
// document.getElementById("form-directory").reset();
console.log('durgesh');
// document.getElementsByName('name').value = '';
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";
this.$Progress.finish();
},
after submitting the form I did not used the form. so after doing this I emptied the form.
Or in a one-liner:
Object.keys(form).forEach(v => form[v] = "")
instead of:
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";

Validate specific amount of input fields with vee-validate

I want to validate varios steps in a wizard, without validating all inputs, when clicking on the next button. When clicking on the next button it should fire the function to validate the input fields of the first step. Then in the next step the input fields of the second step and so on. The next button is no submit button.
<tab-content title="Company" icon="fas fa-building" :before-change="validateThirdStep">
<div class="col-md-8 offset-md-2">
<label class="col-form-label text-md-right">Do you have a chicken?</label>
<div class="form-goup row">
<div class="col-md-7">
<input type="radio" name="dsb" id="radios" value="yes" v-model="pickeddsb">Yes
<input type="radio" name="dsb" id="radios" value="no" v-model="pickeddsb">No
</div>
</div>
</div>
<div class="form-group" v-if="pickeddsb=='yes'">
<div class="col-md-8 offset-md-2">
<h4>Data</h4>
</div>
<div class="col-lg-8 m-auto">
<!-- Name -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
<div class="col-md-7">
<input
v-model="namedsb"
v-validate="'required|namedsb'"
:class="{ 'has-error': errors.has('namedsb') }"
type="text"
name="namedsb"
>
{{ errors.first('namedsb') }}
</div>
</div>
<!-- Firm -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('companyname') }}</label>
<div class="col-md-7">
<input
v-model="firm"
v-validate="'required|firmdsb'"
:class="{ 'has-error': errors.has('firmdsb') }"
class="form-control"
type="text"
name="firmdsb"
>
{{ errors.first('firmdsb') }}
</div>
</div>
<!--Telephone-->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{$t('telephone')}}</label>
<div class="col-md-7">
<input
v-model="telephonedsb"
v-validate="'required|telephonedsb'"
:class="{ 'has-error': errors.has('telephonedsb')}"
class="form-control"
type="tel"
name="telephonedsb"
>
{{ errors.first('telephonedsb') }}
</div>
</div>
<!-- Email -->
<div class="form-group row">
<label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
<div class="col-md-7">
<input
v-model="emaildsb"
v-validate="'required|emaildsb'"
:class="{ 'has-error': errors.has('emaildsb') }"
class="form-control"
type="email"
name="emaildsb"
>
{{ errors.first('emaildsb') }}
</div>
</div>
</div>
</div>
</tab-content>
export default {
data() {
return {
namedsb: "",
telephonedsb: "",
emaildsb: "",
namere: "",
telephonere:"",
emailre: "",
}
},
methods: {
validateThirdStep: function() {
this.$validator.validate('namedsb', this.namedsb);
this.$validator.validate('firmdsb', this.firmdsb);
this.$validator.validate('telephonedsb', this.state);
this.$validator.validate('emaildsb', this.emaildsb);
}
}
}
It's fairly easy with the built-in scopes of VeeValidate, you can read about it on this page: enter link description here
A simple explanation is to add a specific scope for each tab/step, by adding this on the fields:
data-vv-scope="step1"
And then use this method when pressing the button for validation:
methods: {
validateForm(scope) {
this.$validator.validateAll('step1').then((result) => {
if (result) {
alert('Form Submitted!');
}
});
}
}

Angular 5 form data post issue

When i am trying to submit angular form i am getting cannot read property value error
console screen error:
ERROR TypeError: Cannot read property 'value' of undefined
html
<div class="panel-body">
<form [formGroup]="angForm" novalidate>
<div class="form-group">
<label class="col-md-4">Coin Name</label>
<input type="text" class="form-control" formControlName="name" #name />
</div>
<div *ngIf="angForm.controls['name'].invalid && (angForm.controls['name'].dirty || angForm.controls['name'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['name'].errors.required">
Name is required.
</div>
</div>
<div class="form-group">
<label class="col-md-4">Coin Price</label>
<input type="text" class="form-control" formControlName="language" #price/>
</div>
<div *ngIf="angForm.controls['language'].invalid && (angForm.controls['language'].dirty || angForm.controls['language'].touched)" class="alert alert-danger">
<div *ngIf="angForm.controls['language'].errors.required">
Price is required.
</div>
</div>
<div class="form-group">
<button (click)="addBooks(name.value, language.value)" [disabled]="angForm.pristine || angForm.invalid" class="btn btn-primary">Add</button>
</div>
</form>
</div>